Why is this dynamic select box not working with jQuery 1.9.1?

Question

I found out that this chained select box that uses PHP / MySQL / AJAX / jQuery isn't functioning with jQuery1.9.1. The first select box works fine, but when I select the second one, which uses type_list.php to retrieve data from sql, it fails to pull any data even though the php file is triggered. Anyone know why it isn't working with jQuery 1.9.1?

jQuery 1.9.1: Example - not working.

jQuery 1.7.2: Example - works fine.

type_list.php:

<?php
// list of printer types for specific manufacturer
include("dbconfig.inc.php");

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

$manid = $_POST['man'];

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

JS Code:

<script>
jQuery().ready(function($){

$('#loading')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;



// Ajax Called When Page is Load/Ready (Load Manufacturer)
jQuery.ajax({
                      url: 'man_list.php',
                      global: false,
                      type: "POST",
                      dataType: "xml",
                      async: false, 
                      success: populateComp
                }); 



//Ajax Called When You Change  Manufaturer
$("#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
                }); 
    });

//Ajax Called When You Change Type of Printer
$("#printertype").change(function () 
    {

        var data = { 
        man :$('#manufacturer').val(),
        typ : $(this).attr('value')
        };
    jQuery.ajax({
                      url: 'model_list.php',
                      type: "POST",
                      dataType: "xml",
                      data:data,
                      async: false, 
                      success: populateModel
                }); 
    });

//Do What You Want With Result .......... :)
    $("#printermodel").change(function () 
    {

//'you select Model='+$('#manufacturer').val()+'type='+$('#printertype').val()+'And Model='+$('#printermodel').val()
alert('you select Model = '+$('#manufacturer option:selected').text()+' ,type= '+$('#printertype option:selected').text()+' And Model = '+$('#printermodel option:selected').text()
);
    });



                    }); 
    </script>

Answer 1

Anyone know why it isn't working with jQuery 1.9.1?

Well first of all, if you had done a little debugging yourself (why haven't you?), you would have seen that no value for man parameter is passed in the AJAX POST request to the server.

Using the JavaScript debugger in FireBug, it becomes obvious quickly, that this line is at fault:

var data = { man :$(this).attr('value') };

And the documentation for .attr tells you, that this should only be used to query values that where explicitly set – which is not the case for the select element.

So use .val() instead.

Answer 2

try this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>