Populating a select list based on an index from another select list using jQuery and xml

Question

I've been trying to fix a problem i've been having all afternoon and was hoping someone might be kind enough to help me spot my error.I've only started learning jQuery this morning and was trying to get this function working but its proving a bit of a pain in the proverbial...

I'm trying to populate a model select list based on a value from a make select list

My jQuery function looks like this:

$(document).ready(function()
{
    $('#make').change(function(){
      alert('Changing');
      $('#model option').remove();
      $('#model').attr('disabled',true);             
      $.ajax(
      {
          type: "GET",
          url: "../xmlsource/models/model-"+$('#make option:selected').val()+".xml",
          dataType: "xml",
          success: function(xml) 
          {
              alert('XML');
              $(xml).find('model').each(function()
              {
                  var name = $(this).attr('name');
                  var value = $(this).attr('value');
                  $('#model').append("<option value='"+value+"'>"+name+"</option");
                  alert('Cycling');
              });
          }
      });                 
      $('#model').removeAttr('disabled');   
    });
});

My test xml file looks like this:

<?xml version="1.0" encoding="utf-8" ?>
<models>
<model name="--Please Select--" value="0">
<model name="A1" value="1">
<model name="A2" value="2">
</models>

My HTML looks like this:

<form method="post" action="seller.php">
<table border="0">
    <tr>
        <td>Make</td>
        <td>
            <select name='make' id="make">
            <?php 
                $manufacturers = simplexml_load_file('../xmlsource/makes.xml');
                foreach($manufacturers->xpath('//manufacturer') as $manufacturer)
                {
                    if(isset($trimmed['make']))
                    {
                        if ($trimmed['make'] == "$manufacturer->value")
                        {
                        ?>
                        <option value="<?php echo "$manufacturer->value";?>" selected="selected"><?php echo "$manufacturer->name"?></option>
                        <?php
                        }
                        else
                        {           
                        ?>
                        <option value="<?php echo "$manufacturer->value";?>"><?php echo "$manufacturer->name"?></option>
                        <?php
                        }
                    }
                    else
                    {
                    ?>
                    <option value="<?php echo "$manufacturer->value";?>"><?php echo "$manufacturer->name"?></option>
                    <?php
                    }
                }
            ?>      
            </select>
        </td>
    </tr>
    <tr>
        <td>Model</td>
        <td>
            <select name="model" id="model">                                
            </select>
        </td>
    </tr>
</table>
<div align="center"><input id="button" type="submit" value="Create My Listing"></div>

I've tested out the function as best as possible and it is loading the xml file successfully, but only hitting the first alert,it doesn't seem to enter the success conditional code.My apologies if this seems naive,but as I say i've got little experience on the matter

Any help would be greatly appreciated

Kind regards Herbie

Answer 1

I was able to get it working in this jsFiddle (note the url and data parameters are specific to jsFiddle -- use your own URL and remove the data node).

Here's the jQuery I used:

$('#make').change(function() {
    $('#model option').remove();
    $('#model').attr('disabled', true);
    $.ajax({
        type: "POST",
        url: "/echo/xml/",
        data:{
            xml:'<?xml version="1.0" encoding="utf-8" ?><models><model name="--Please Select--" value="0" /><model name="A1" value="1" /><model name="A2" value="2" /></models>'},
        dataType: "xml",
        success: function(xml) {
            $(xml).find('model').each(function() {
                var name = $(this).attr('name');
                var value = $(this).attr('value');
                $('#model').append("<option value='" + value + "'>" + name + "</option");
            });
                $('#model').removeAttr('disabled');
        }
    });
});

Note that I use POST instead of GET. I also had to self close all your XML model nodes.