fetch data from database in cascaded select box

Question

I am posting my entire code, as i was not able to find where the error is, so kindly excuse me for my long code.

i have a page that has 2 drop down list. the second list depends on the value selected from the first list.

index.php page

<head>
<script language="JavaScript" src="functionsjq.js"></script>
<script language="JavaScript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script>
jQuery().ready(function($){
$('#loading')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;
jQuery.ajax({
          url: 'man_list.php',
          global: false,//
          type: "POST",
          dataType: "xml",
          async: false, 
          success: populateComp
    }); 

$("#manufacturer").change(function () 
    {
    resetValues();  
    var data = { man :$(this).attr('value') };
    jQuery.ajax({
          url: 'type_list.php',
          type: "POST",
          dataType: "xml",
          data:data,
          async: false, 
          success: populateType
    }); 
    });
        }); 
</script>

<style>
    #loading{
    background:url('loader64.gif') no-repeat;
    height: 63px;
    }
</style>
</head>
<body >
<p>Manufacturer:<select name="manufacturer" id="manufacturer" ><option value="">Please select:</option></select>&nbsp;
Printer type: <select name="printertype" id="printertype" disabled="disabled" ><option value="">Please select:</option></select>&nbsp;</p>
<div id="loading" style="display: none;"></div>
<div id="output" ></div>
</body>

functionsjq.js

function resetValues() {
    $('#printertype').empty();
    $('#printertype').append(new Option('Please select', '', true, true));  
    $('#printertype').attr("disabled", "disabled"); 
}

function populateComp(xmlindata) {

var mySelect = $('#manufacturer');
 $('#printertype').disabled = false;
$(xmlindata).find("Company").each(function()
  {
  optionValue=$(this).find("id").text();
  optionText =$(this).find("name").text();
   mySelect.append($('<option></option>').val(optionValue).html(optionText));   
  });
}

function populateType(xmlindata) {

var mySelect = $('#printertype');
$('#printertype').removeAttr('disabled');    
$(xmlindata).find("Printertype").each(function()
  {
  optionValue=$(this).find("id").text();
  optionText =$(this).find("name").text();
   mySelect.append($('<option></option>').val(optionValue).html(optionText));   
  });
}

man_list.php

<?php
// manufacturer_list
include("dbconfig.inc.php");

header("Content-type: text/xml");
echo "<?xml version=\"1.0\" ?>\n";
echo "<companies>\n";
$select = "SELECT * FROM search_parent";
try {
    foreach($dbh->query($select) as $row) {
        echo "<Company>\n\t<id>".$row['id']."</id>\n\t<name>".$row['searchname']."</name>\n</Company>\n";
    }
}
catch(PDOException $e) {
    echo $e->getMessage();
    die();
}
echo "</companies>";
?>

type_list

<?php
include("dbconfig.inc.php");

header("Content-type: text/xml");

$manid = $_POST['man'];

echo "<?xml version=\"1.0\" ?>\n";
echo "<printertypes>\n";
$select = "SELECT id, fname FROM features WHERE parent_id = '".$manid."'";
try {
    foreach($dbh->query($select) as $row) {
        echo "<Printertype>\n\t<id>".$row['id']."</id>\n\t<name>".$row['fname']."</name>\n</Printertype>\n";
    }
}
catch(PDOException $e) {
    echo $e->getMessage();
    die();
}
echo "</printertypes>";
?>

Tabular View

search_parent

id   searchname
1      abc

features (parent_id is the id of the search_parent table)

id  fname  parent_id
1    xyz    1

When i select any value from the first drop down i get the values accordingly in my second drop down list, but the problem is that when i select the very first value from my first drop down list, i do not get any corresponding value to it in my second drop down list, no matter what the value be in the first position of my first drop down list. i do not get any value for it in second menu

hit f12 in your browser and open the network tab in the console. What do you see (if anything) sent to and received from the server when you choose the option? — andrew, Dec 05 '14 at 11:55
@andrew there is nothing written in console when i hit the option, infact at times i am not getting any value for any option — Sam, Dec 05 '14 at 12:03
sounds like the `$("#manufacturer").change` is not firing, could you edit your post, showing a sample of the data returned by `jQuery.ajax({ url: 'man_list.php',...` (as seen in the console on page load) — andrew, Dec 05 '14 at 12:06
@andrew i would like to point out one thing that i just saw in my script, when i use older version of jquery i get the problem with first option only but with a newer version i.e 1.11.1 i am not getting any value — Sam, Dec 05 '14 at 12:14

score 0 · Accepted Answer · edited May 23 '17 at 12:27

Following your last comment, I suspect the issue is arising from your use of async:false in your ajax calls which is now deprecated, see the docs

What I would do is load the manufacturer list directly in the php, as doing this with ajax is inefficient because the ajax request is putting additional load on the server

Manufacturer:<select name="manufacturer" id="manufacturer" >
                  <option value="">Please select:</option>
                  <?php
                      foreach($dbh->query($select) as $row) {
                       echo "<Company>\n\t<id>".$row['id']."</id>\n\t<name>".$row['searchname']."</name>\n</Company>\n";
                      }
                   ?>
             </select>

Using async:false is bad practice any way as it locks up the ui during the request

here is a good post on correctly handling the ajax response

fetch data from database in cascaded select box

1 Answers1