Getting Value from Toggle Switch not consistant - javascript

i am trying to send the value of a toggle switch to my URL and retrieve it with Php. The code is working. The problem is every time i change the page or using the back-button i need to get the page reloaded so the toggle switch works, but when staying at the same page is doesnt work. what am doing wrong ?
This my code:
<?php
$status_water = $_GET['water_swicth'];
$status_light = $_GET['light_swicth'];
$status_air = $_GET['air_swicth'];
if ($status_water == "on")
{ $water_on = "selected";
$file = fopen("light.json", "w") or die("can't open file");
fwrite($file, '{"water": "on", "light":off, "air":off}');
fclose($file);
}
if ($status_water == "off") {
$file = fopen("light.json", "w") or die("can't open file");
fwrite($file, '{"water": "off", "light":"off", "air":off}');
fclose($file);
}
?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/MyTheme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li style="font-size: 14px;">Water
<div id="water_switch">
<select name="water" id="water" data-role="flipswitch" data-mini="true">
<option value="off" myTag="off">Off</option>
<option value="on" myTag="on" <?php echo $water_on; ?>>On</option>
</select>
</div>
</li>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#water_switch').on('click', function () {
var checkStatus = $('option:selected', this).attr('mytag');
window.location.href = "stats.php?id=<?php echo $id; ?>&water_swicth=" + checkStatus;
});
});
</script>
</body>
</html>

i got it to work, by moving the part from the to
ref: https://forum.jquery.com/topic/script-not-running-unless-i-refresh-page

Related

javascript change background color using if statement in php

please i always stuck with javascript that can't run in my php. i wanna change the background color on class one-container if the data on class one >= 100. the data come from db that i connect with my php.
any help would be appreciated.
thanks and sorry for my bad english
<!DOCTYPE html>
<html lang="eng">
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="body-container">
<div class="sec-nav-container">
<div class="wrapper">
<nav>
<div class="title">
<span class="dashboard">Dashboard Billing</span>
</div>
<div class="time-container">
<b class="last-updated">Last Updated on:</b>
<script type="text/javascript">
function lastModified () {
document.write(document.lastModified);
}
lastModified();
</script>
</div>
</nav>
</div>
</div>
<div class="header-container">
<div class="wrapper">
<?php
include "connect_db.php";
$sql = "SELECT * FROM tb_dashboard";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "
<div class='one-container'>
<h1 class='one'>" . $row['kirim_mpn'] . "</h1>
<p class='mpn'>Siap Kirim MPN</p>
</div>";
}
}
else {
echo "Tidak ada hasil";
}
mysqli_close($conn);
?>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script language="JavaScript" src="emil.js" type="text/javascript"></script>
</body>
</html>
and this is raw code of javascript that i wanna use in my php
<script>
var colorBox = function () {
var data = [100];
if (data >= 100) {
document.getElementById("one-container").style.backgroundColor = '#FF6C60';
} else {
document.getElementById("one-container").style.backgroundColor = '#F8D347';
}
}
colorBox();>
</script>
i wanna make var data = [100] become var data = [" . $row['kirim_mpn'] . "]

How to get div values that are dynamically generated by a php script?

I want to alert the name of the item whose place bid button I will click but my code seems to alert only laptop. Can anyone tell me how to get div values that are dynamically generated through a php script. Below is the code for the page.I want to alert name of that item whose place bid I click on. Since the page is dynamically generated which gets item details from a database containing item details.
<?php
$con = mysqli_connect("localhost","root","*****","bidding") or
die(mysqli_error($con));
$select_query = "select * from items";
$select_query_result = mysqli_query($con, $select_query) or
die("Query Mistake");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bid</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="materialize/css/materialize.css"/>
<link rel="stylesheet" type="text/css" href="seperate2.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="materialize/js/materialize.min.js"></script>
<script type="text/javascript">
function post_data(){
var item_name = document.getElementById("item_name").innerHTML;
alert(item_name);
}
</script>
</head>
<body>
<div class="container">
<h1>Bid</h1>
<div class="row">
<?php while($row = mysqli_fetch_array($select_query_result)) { ?>
<div class="col s3" >
<div id="item_name"><?php echo"$row[item_name]"?></div>
<div id="starting_price"><?php echo"$row[starting_price]"?</div>
<div><?php echo"$row[description]"?></div>
<button class="btn waves-effect waves-teal"
onclick="post_data()">Place Bid</button>
</div>
<?php } ?>
</div>
</div>
</body>
</html>
ID of element in HTML must be unique. Use class.
In loop you declare static name of ID, that are not unique.
Your code requires a counter by which the dynamically created DIVs may be accessed. Your <div class="row"> block would be:
<div class="row">
<?php
$divCounter = 0;
while($row = mysqli_fetch_array($select_query_result)) {
$divCounter += 1;
?>
<div class="col s3" >
<div id="item_name<?php echo $divCounter; ?>"><?php echo"$row[item_name]"?></div>
<div id="starting_price"><?php echo"$row[starting_price]"?</div>
<div><?php echo"$row[description]"?></div>
<button class="btn waves-effect waves-teal"
onclick="post_data('<?php echo 'item_name'.$divCounter; ?>')">Place Bid</button>
</div>
<?php } ?>
</div>
Notice that the call to the Javascript function post_data() now provides the DIV id that contains its counter. To complete the job, adjust post_data() to include the parameter:
<script type="text/javascript">
function post_data(divId){
var item_name = document.getElementById(divId).innerHTML;
alert(item_name);
}
</script>
If you prefer, instead of using a counter and concatenating with the static "item_name", you may use the $row[item_name] property instead. Whether or not you can do this will depend on whether this property can serve as a valid HTML id attribute value.

Gridstack Auto Resize When Fullscreen Browser

Hello i have a plugin gridstack, And already use this plugin
But i'm have a problem.
When i'm full screen mode browser my page show whitespace, but if not fullscreen mode this whitespace has gone
Fullscreen Mode
Not Fullscreen Mode
I'm confuse to fix this
this is my code
index.php
in pastebin Click Here
<?php include "element/connection.php"; ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DMS | PJB UP. Muara Karang</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/iCheck/square/blue.css">
<!-- Favicon -->
<link rel="shortcut icon" href="images/logo-pjb.png">
<!-- Owl Carousel Assets -->
<link href="dist/js/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="dist/js/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet">
<script src="dist/js/owlcarousel/owl-carousel/owl.carousel.js"></script>
<!-- jQuery 2.2.3 -->
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="plugins/iCheck/icheck.min.js"></script>
<!-- Highchart -->
<script type="text/javascript" src="dist/js/highchart/highcharts.js"></script>
<script type="text/javascript" src="dist/js/highchart/highcharts-more.js"></script>
<script type="text/javascript" src="dist/js/highchart/exporting.js"></script>
<!-- GridStack -->
<link rel="stylesheet" href="dist/js/gridstack/dist/gridstack.css"/>
<link rel="stylesheet" href="dist/js/gridstack/dist/gridstack-extra.css"/>
<script src="dist/js/jquery-ui.js"></script>
<script src="dist/js/lodash.min.js"></script>
<script src="dist/js/gridstack/dist/gridstack.js"></script>
<script src="dist/js/gridstack/dist/gridstack.jQueryUI.js"></script>
<!-- Owl Carousel Assets -->
<link href="dist/js/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="dist/js/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet">
<script src="dist/js/owlcarousel/owl-carousel/owl.carousel.js"></script>
<style type="text/css">
.grid-stack {
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
}
</style>
</head>
<body>
<div id="carousel-example-generic-v1" class="carousel slide widget-carousel" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
$count_circle=0;
$data_circle = mysqli_query($con,"select * from dasboard where active_data='Yes' order by sorting_data asc");
while($circle=mysqli_fetch_object($data_circle))
{ ?>
<li data-target="#carousel-example-generic-v1" data-slide-to="<?php echo $count_circle; ?>"
class="circle <?php if($count_circle==0){ echo "active"; }?>">
</li>
<?php
$count_circle++;
} ?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<?php
$count_data=0;
$data_dash = mysqli_query($con,"select * from dasboard where active_data='Yes' order by sorting_data asc");
while($dash=mysqli_fetch_object($data_dash))
{ ?>
<div class="item <?php if($count_data==0){ echo "active"; }?>">
<div id="grid_<?php echo $count_data ?>" class="widget-gradient widget-gradient-body grid-stack">
</div>
<script type="text/javascript">
LoadPage();
function LoadPage()
{
var options = {
float: false
};
$('#grid_<?php echo $count_data ?>').gridstack(options);
new function () {
this.serializedData = <?php echo $dash->data_show.";" ?>
this.grid = $('#grid_<?php echo $count_data ?>').data('gridstack');
this.loadGrid = function () {
this.grid.removeAll();
var items = GridStackUI.Utils.sort(this.serializedData);
_.each(items, function (node, i) {
this.grid.addWidget($('<div id="induk"><div class="grid-stack-item-content">' + node.content + '</div></div>'),
node.x, node.y, node.w, node.h);
this.grid.movable('.grid-stack-item', false);
this.grid.resizable('.grid-stack-item', false);
}, this);
return false;
}.bind(this);
this.loadGrid();
};
var str = '<?php echo $dash->data_gen ?>';
var str_array = str.split(',');
for(var i = 0; i < str_array.length; i++) {
call_data(i);
}
function call_data(i){
str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
var widget = $("#data_"+str_array[i]).val();
var convert_data = str_array[i];
$("#del_"+convert_data).remove(); //remove delete icon
$("#label_"+convert_data).remove(); //remove label
var height_div_parent = $('#wg_'+convert_data).closest('.grid-stack-item-content').height();
var width_div_parent = $('#wg_'+convert_data).closest('.grid-stack-item-content').width();
var formData = 'id_tr=<?php echo $dash->id_tr_halaman_dasboard ?>&id_tr_dt='+str_array[i]+'&id_tr_widget='+widget+'&width='+width_div_parent+'&height='+height_div_parent;
$.ajax({
type: "POST",
dataType: "html",
url: "element/get_data_dashboard.php",
data: formData,
success: function(msg){
if(msg == ''){
$("#wg_"+convert_data).empty();
$("#wg_"+convert_data).html("");
}
else{
$("#wg_"+convert_data).empty();
$("#wg_"+convert_data).html(msg);
}
}
});
}
}
</script>
</div>
<?php
$count_data++;
} ?>
</div>
</div>
</body>
</html>
element/get_data_dashboard.php
in Pastebin click here
<?php
include "connection.php";
$id_tr = $_REQUEST['id_tr']; //header dashboard
$id_tr_widget = $_REQUEST['id_tr_widget']; //id tr widget
$id_tr_dt = $_REQUEST['id_tr_dt']; //id tr detail
$width = $_REQUEST['width']; //width
$height = $_REQUEST['height']; //height
$mw_wg = mysqli_fetch_object(mysqli_query($con,"select * from tr_widget where id_tr_widget='".$id_tr_widget."'"));
$my_konek = mysqli_fetch_object(mysqli_query($con,"select * from connection where id_con='".$mw_wg->id_con."'"));
$sql_view = mysqli_fetch_object(mysqli_query($con,"SELECT query from sql_view where id_sql_view='".$mw_wg->id_sql_view."'"));
$id_type_widget = $mw_wg->id_type_widget;
if($my_konek->port=="" or $my_konek->port==null)
{
$mydb = new mysqli($my_konek->host,$my_konek->username,$my_konek->pwd,$my_konek->database_name);
if($mydb->connect_errno > 0){
die('Unable to connect to database' . $mydb->connect_error);
}
}
else
{
$mydb = new mysqli($my_konek->host,$my_konek->username,$my_konek->pwd,$my_konek->database_name,$my_konek->port);
if($mydb->connect_errno > 0){
die('Unable to connect to database' . $mydb->connect_error);
}
}
// Image Slider
if($id_type_widget=="9"){
$RandomAccountNumber = uniqid();
?>
<center><div id="owl-demo_<?php echo $id_tr?>_<?php echo $id_tr_dt?>_<?php echo $RandomAccountNumber ?>" class="owl-carousel">
<?php
$list_value = $mw_wg->file_name;
$var=explode('***zzz****',$list_value);
$count = count($var);
foreach($var as $row) {
if (--$count <= 0) {
break;
}
?>
<div class="item"><img onerror="this.onerror=null;this.src='images/no_image.png';" style="height:<?php echo $height?>px; width:<?php echo $width?>px" src="images/images_video/<?php echo $row?>"></div>
<?php } ?>
</div></center>
<script>
$(document).ready(function() {
$("#owl-demo_<?php echo $id_tr?>_<?php echo $id_tr_dt?>_<?php echo $RandomAccountNumber ?>").owlCarousel({
autoPlay : true,
navigation : false,
singleItem : true,
pagination: false
});
});
</script>
<?php }
// Video
else if($id_type_widget=="7"){
$ext_file = end((explode(".",$mw_wg->file_name)))
?>
<head>
<link href="dist/js/videojs/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="dist/js/videojs/videojs-ie8.min.js"></script>
</head>
<body>
<video controls loop autoplay preload="auto" id="my-video" class="video-js" controls preload="auto" style="height:<?php echo $height?>px; width:<?php echo $width?>px" data-setup="{}" poster="images/fff.png">
<source src="images/images_video/<?php echo $mw_wg->file_name; ?>" type='video/<?php echo $ext_file?>'>
</video>
<script src="dist/js/videojs/video.js"></script>
</body>
<?php } ?>
See this link click here
I'm confused to remove whitespace when fullscreen mode.
Help Me Thank's

JavaScript not working while submitting form [duplicate]

This question already has answers here:
JS & jQuery can't detect html elements, and say's they are undefined
(4 answers)
Closed 7 years ago.
I am writing a HTML code in which there is a form with different radio buttons and the form will automatically be submitted on a click of any radio button and the form data will be submitted to a php file for database querying and the resulting data from the php file will be displayed in an empty div declared below. The problem is, javascript is not executing at all. When i dubmit the form via redirection i.e writing method and action, it is working fine. But as soon as javascript is used, it doesnt work. Moreover, if i write a simple javascript script, that is working. But this script is not.
<!DOCTYPE html>
<?php
include_once 'connection-script.php';
session_start();
if(!isset($_SESSION['email']))
{
header('Location: index.php');
}
?>
<html>
<head>
<meta charset="utf-8">
<title>Competitions</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script>
$("#queryform").submit(function(event) {
event.preventDefault();
alert("In the query");
var posting = $.post("previous-grades-student-script.php", $("#queryform").serialize());
posting.done(function(data) {
alert("In the success function");
var content = $(data).find('#showprevioussubmissions');
$("#showprevioussubmissions").html(data);
});
});
</script>
</head>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='//www.google.com/fonts#UsePlace:use/Collection:Bree+Serif' rel='stylesheet' type='text/css'>
</head>
<body style="background-color:whitesmoke;">
<div id="header" class="header" style="background-color:#6ccecb;">
<?php
$mail=$_SESSION['email'];
$query="SELECT * from student where semail='$mail'";
$result=mysql_query($query);
$row=mysql_fetch_array($result);
$filename=$row['studentid']."_dp";
?>
<ul><p>NAME</p>
<?php
if(file_exists('pictures/'.$filename.'.jpg'))
{
echo '<li style="margin:-3% 1% 1% 0%;"><img src="pictures/'.$filename.'.jpg" ><p class="usrname">'.$row['fname'].'</p>';
}
else if(file_exists('pictures/'.$filename.'.gif'))
{
echo '<li style="margin:-3% 1% 1% 0%;"><img src="pictures/'.$filename.'.gif" ><p class="usrname">'.$row['fname'].'</p>';
}
else if(file_exists('pictures/'.$filename.'.png'))
{
echo '<li style="margin:-3% 1% 1% 0%;"><img src="pictures/'.$filename.'.png" ><p class="usrname">'.$row['fname'].'</p>';
}
else
{
echo '<li style="margin:-3% 1% 1% 0%;"><img src="icons/user.png"><p class="usrname">'.$row['fname'].'</p>';
}
?>
<ul>
<li>My Profile</li>
<li>My submissions</li>
</ul>
</li>
<li style=" margin:-3% 1% 1% 0%;">Log Out</li>
</ul>
</div>
<div id="compete" class="compete" style="position:relative; top:5%;">
<div id="table-wrapper" class="table-wrapper">
<h2> Selct a course </h2>
<?php
echo '<form id="queryform" name="queryform" action="/" method="post">';
$result1=mysql_query("SELECT * from `student-course` WHERE studentid='$row[studentid]'");
while($row1=mysql_fetch_assoc($result1))
{
$sql="SELECT * from courses where courseid='$row1[courseid]'";
$answer=mysql_query($sql);
$row2=mysql_fetch_assoc($answer);
echo '<input type="radio" name="courses" value="'.$row2['courseid'].'" onchange="this.form.submit()">'.$row2['coursename'];
}
?>
</form>
</div>
</div>
<div id="showprevioussubmissions">
</div>
</body>
</html>
The above is my file. Plz Help.
EDIT
<!DOCTYPE html>
<?php
include_once 'connection-script.php';
session_start();
if(!isset($_SESSION['email']))
{
header('Location: index.php');
}
?>
<html>
<head>
<meta charset="utf-8">
<title>Competitions</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
</head>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='//www.google.com/fonts#UsePlace:use/Collection:Bree+Serif' rel='stylesheet' type='text/css'>
</head>
<body style="background-color:whitesmoke;">
<div id="header" class="header" style="background-color:#6ccecb;">
<?php
$mail=$_SESSION['email'];
$query="SELECT * from student where semail='$mail'";
$result=mysql_query($query);
$row=mysql_fetch_array($result);
$filename=$row['studentid']."_dp";
?>
<ul><p>NAME</p>
<?php
if(file_exists('pictures/'.$filename.'.jpg'))
{
echo '<li style="margin:-3% 1% 1% 0%;"><img src="pictures/'.$filename.'.jpg" ><p class="usrname">'.$row['fname'].'</p>';
}
else if(file_exists('pictures/'.$filename.'.gif'))
{
echo '<li style="margin:-3% 1% 1% 0%;"><img src="pictures/'.$filename.'.gif" ><p class="usrname">'.$row['fname'].'</p>';
}
else if(file_exists('pictures/'.$filename.'.png'))
{
echo '<li style="margin:-3% 1% 1% 0%;"><img src="pictures/'.$filename.'.png" ><p class="usrname">'.$row['fname'].'</p>';
}
else
{
echo '<li style="margin:-3% 1% 1% 0%;"><img src="icons/user.png"><p class="usrname">'.$row['fname'].'</p>';
}
?>
<ul>
<li>My Profile</li>
<li>My submissions</li>
</ul>
</li>
<li style=" margin:-3% 1% 1% 0%;">Log Out</li>
</ul>
</div>
<div id="compete" class="compete" style="position:relative; top:5%;">
<div id="table-wrapper" class="table-wrapper">
<h2> Selct a course </h2>
<?php
echo '<form id="queryform" name="queryform">';
$result1=mysql_query("SELECT * from `student-course` WHERE studentid='$row[studentid]'");
while($row1=mysql_fetch_assoc($result1))
{
$sql="SELECT * from courses where courseid='$row1[courseid]'";
$answer=mysql_query($sql);
$row2=mysql_fetch_assoc($answer);
echo '<input type="radio" name="courses" value="'.$row2['courseid'].'" onchange="this.form.submit()">'.$row2['coursename'];
}
?>
</form>
</div>
</div>
<div id="showprevioussubmissions">
</div>
<script>
$("#queryform").submit(function(event) {
event.preventDefault();
alert("In the query");
var posting = $.post("previous-grades-student-script.php", $("#queryform").serialize());
posting.done(function(data) {
alert("In the success function");
var content = $(data).find('#showprevioussubmissions');
$("#showprevioussubmissions").html(data);
});
});
});
</script>
</body>
</html>
You will need to write jQuery code inside of $(function(){ /code goes here/ });
<script>
$(function(){
$("#queryform").submit(function(event) {
event.preventDefault();
alert("In the query");
var posting = $.post("previous-grades-student-script.php", $("#queryform").serialize());
posting.done(function(data) {
alert("In the success function");
var content = $(data).find('#showprevioussubmissions');
$("#showprevioussubmissions").html(data);
});
});
});
</script>
Combine section as single element.
<head>
<meta charset="utf-8">
<title>Competitions</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='//www.google.com/fonts#UsePlace:use/Collection:Bree+Serif' rel='stylesheet' type='text/css'>
</head>
You are running the code to add the event handler in the head of the page, before any forms exist. Therefore $("#queryform") will be an empty collection of elements and no handlers will be added. You should either put the code at the end of the body, or wrap it in a document ready, so that it will be executed after the form element has been created:
<head>
<script>
// call the function on document ready
$(function() {
$("#queryform").submit(function(event) {
// code as before
});
})
</script>
</head>

Whenever I try and load my JSON data into my listview or select menu, nothing shows up

So basically, when I load my data from the server script (retrieve.php), it shows up the in the showlist.html using $('#result').html(data). But whenever I try to load my listview or selectbox with that data..nothing happens. PLEASE ADVICE what I might be doing wrong
//SERVER-SIDE SCRIPT - retrieve.php
<?php
$pdo = new PDO('mysql:host=localhost;dbname=sports_rush;charset=utf8', 'root', '');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
try {
$query = "SELECT eid,event_title FROM event_table";
$result = $pdo->prepare($query);
$result->execute();
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
echo json_encode($row);
}
$db_connection = null;
} catch (PDOException $e) {
echo $e->getMessage();
}
//I found this recursive function online to enable me force convert to UTF-8 all the strings contained in an array
function utf8ize($d) {
if (is_array($d)) {
foreach ($d as $k => $v) {
$d[$k] = utf8ize($v);
}
} else {
return utf8_encode($d);
}
return $d;
}
?>
//FILE THAT SHOWS MY DATA FROM SERVER-SIDE SCRIPT - Showlist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>SHOW LIST</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.4.2.min.css" />
<script src="jquery-mobile/jquery-1.9.1.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="home_page">
<div data-role="header" data-theme="a">
<h1>Header</h1>
</div>
<div data-role="content">
<select name="zip" id="zip" onChange="initializeRetrieve()"></select>
<div id="result"></div>
<ul data-role="listview" data-inset="true" id="postallist"></ul>
</div>
</div>
<script>
$(function(){
$.ajax({
url : 'retrieve.php',
type : "POST",
success : function(data){
var output = '';
$('#result').html(data); //This is just a test to see my data
$.each(data, function (index, value) {
output += '<li>' + value.eid + '</li>';
});
$('#postallist').html(output).listview("refresh");
}
});
});
function initializeRetrieve(){
var $select5 = $('#zip');
//request the JSON data and parse into the select element
$.getJSON("retrieve.php", function(data){
//iterate over the data and append a select option where eid is in the json file
$.each(data, function(key, value){
$select5.append('<option>' + value.eid + '</option>');
});
});
}
</script>
</body>
</html>
Have you tried using the GET method
Try putting your request to $(document).ready
$(document).ready(function(){
$.getJSON('retrieve.php', function(data) {
$('#result').html(data);
})
});
//FINALLY GOT IT WORKING. The problem was in my showlist.html. Needed to change up my initialization when my page opens
<html>
<meta charset="utf-8" />
<title>SHOW LIST</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h1>Sports Rush Events</h1>
</div>
<div data-role = "content">
<div class="content-primary">
<ul id="list" data-role="listview" data-filter="true"></ul>
</div>
<div id="result"></div>
</div>
<script type="text/javascript">
$(document).on('pagebeforeshow', '#index', function(){
$.ajax({
url : 'retrievelist.php',
type : "POST",
dataType: 'json',
success : function(data){
$.each(data,function(i,dat){
$("#list").append("<li><b>ID: </b>"+i+"</br><b> Name: </b>"+dat.event_title+"</li>");
});
$("#list").listview('refresh');
}
});
});
</script>
<div data-role="footer" data-position="fixed">
</div>
</div>

Categories