'Loading data from MySQL and populating dropdown select with jQuery Mobile, PHP

I am developing a PhoneGap application that gets some information from MySQL Database. I am struggling when I try to open a HTML page that contains two select input that need to be populated on page load, each one with data from two different tables. I don't why, but they are not getting populated. Please, any help will be very welcome.

HTML CODE

<div data-role="content">
  <p></p>
  <form id="cname" align="left" action="post" data-ajax="false" >
    <label for "id">Employee's Name:</label><br/>
    <select name="id" id="id"></select><br/>
    <label for "job_id">Job's Name:</label><br/>
    <select name="job_id" id="job_id"></select><br/>
    <input type="hidden" name="latitued" id="latitued" value="">
    <input type="hidden" name="longitude" id="longitude" value="" >
    <input type="hidden" name="goo_map_api" id="goo_map_api" value="">
    <input type="submit" value="Clock-In" id="enviar_in" data-inline="true">
  </form>
</div

Jquery Script both SELECTS

<script type="text/javascript">
$(document).ready(function(e){
  var items="";
  $.getJSON("get_emp.php",function(data){
    $.each(data,function(index,item) 
    {
      items+="<option value='"+item.id+"'>"+item.fullName+"</option>";
    });
    $("#id").html(items); 
  });
});
</script>


<script type="text/javascript">
$(document).ready(function(e){
  var items="";
  $.getJSON("get_job.php",function(data){
    $.each(data,function(index,item) 
    {
      items+="<option value='"+item.id+"'>"+item.job_name+"</option>";
    });
    $("#job_id").html(items); 
  });
});
</script>

PHP file get_emp.php

<?php
$mysqli = new mysqli($mysql_hostname,$mysql_user, $mysql_password, $mysql_database);
$q = "select id, fullName from employees";
$sql = $mysqli->query($q);
$data = array();
while($row = mysqli_fetch_array($sql, true)){
    $data[] = $row; 
};
echo json_encode($data);
?>

PHP file get_job.php

<?php
$mysqli = new mysqli($mysql_hostname,$mysql_user, $mysql_password, $mysql_database);
$q = "select id, job_name from jobs";
$sql = $mysqli->query($q);
$data = array();
while($row = mysqli_fetch_array($sql, true)){
    $data[] = $row; 
};
echo json_encode($data);
?>

One more time, I appreciate your time taking a look at this code trying to give me a hand. Thank you.

phpmysqljquery-mobile


Solution 1:[1]

Code looks okay to me. Have you set the correct header?

header('Content-Type: application/json');
echo json_encode($data);

Solution 2:[2]

At first glimpse the code looks all right. What did you have in the console? Is all the json data there? Otherwise try

$.each(data,function(index,item) 
{
    $('<option>').val(item.id).html(item.job_name).appendTo("#job_id");
});

Updates: can you please try adding

error_log(print_r($data,1));

before

echo json_encode($data);

in get_emp.php and check the php_error.log to see if the data is populated on the server side when you load the page

Solution 3:[3]

I think it has todo with timing between DOM ready and executing the Jquery script.

In this case your script executes before the DOM is ready. If some objects you are refering to, arent ready yet in the DOM, thus JQuery cant find the object, then JQuery simply stops executing.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 idmean
Solution 2
Solution 3 user3107120

Related Questions