从XML填充jquery表单

Question

I am attempting to populate a jquery form with data from an XML where the XML has an id that will populate a dropdown in the form and upon selection of an id other form fields will be populated. BTW I will not be using PHP

My XML

<XMLReview>
<plan>
 <planNumber>773</planNumber> 
 <Area>Upper Missouri</Area> 
 <ID>MISSOURI-NUT</ID> 
 <Name>Missouri River</Name> 
 <code>10030101</code> 
 <County>Broadwater</County> 
 <Station_ID>M09MISSR05</Station_ID> 
</plan>
<plan>
 <planNumber>774</planNumber> 
 <Area>Columbia</Area> 
 <ID>FLAT-STILL-TPA-2013</ID> 
 <Name>Sheppard Creek</Name> 
 <Description>- 3A</Description> 
 <code>17010210</code> 
 <County>Flathead</County> 
 <Station_ID>C09SHEPC04</Station_ID> 
</plan>
</XMLReview>

The HTML

<form>
 <input type="button" id="btnxml" value="XML" onclick="getXML()" />

   ID <input type="text" name="ID" id="ID">       
   planNumber<input type="text" name="Name" id="planNumber"> 
   area<input type="text" name="Area" id="Area">
   Name:  <input type="text" name="Name" id="Name">
   Description:  <input type="text" name="Description" id="Description">
   Station ID  <input type="text" name="Station_ID" id="Station_ID">
   <label class="Code-label" for="code">HUC</label>
    <select class="select_code" id="code" name="code" data-iconpos="left" data-icon="grid">
      <option></option>
      <option>  10010001</option>
      <option>  10010002</option>
      <option>  10020001</option>
    </select>
   <label class="county-label" for="County">County</label>
    <select class="select_county" id="County" name="County" data-iconpos="left" data-icon="grid">
     <option></option>
     <option>   Beaverhead </option>
     <option>   Big Horn    </option>
     <option>   Blaine  </option>
    </select>
</form>

The script

<script>
  function getXML()
 {
 $.get("XMLReview.xml", function(data) {
  $.ajax({
    type: "GET",
    url: "XMLReview.xml",
    dataType: "xml",
    success: function (xml) {
      var select = $('#ID');
        $(xml).find('plan').each(function () {
        var ID = $(this).find('ID').text();
        select.append("<option>" + ID + "</option>");
        $("#ID").change(function () {
            var selectedIndex = $('#ID option').index($('#ID option:selected'));
            var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
                var value = $(this).text();
            });
         });
      }
    }); 
  alert(data);});
 }

</script> 

Unfortunataly this is not working and I don't know why. Can anyone help me please

Answer 1

One or two things:

You are specifying the onclick event inline:

<input type="button" id="btnxml" value="XML" onclick="getXML()" />

Why not keep everything in one place -- since you already are using quite a bit of jQuery. Just add it to the javascript block like this:

<input type="button" id="btnxml" value="XML" />

and

$('#btnxml').click(function() {
    getXML();
});

---

Without checking your javascript/ajax code, this construction is wrong:

function getXML(){
    $.get("XMLReview.xml", function(data) {   <<======= REMOVE
        $.ajax({
            type: "GET",
            url: "XMLReview.xml",
            dataType: "xml",
            success: function (xml) {
                var select = $('#ID');
                $(xml).find('plan').each(function () {
                    var ID = $(this).find('ID').text();
                    select.append("<option>" + ID + "</option>");
                    $("#ID").change(function () {
                        var selectedIndex = $('#ID option').index($('#ID option:selected'));
                            var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
                            var value = $(this).text();
                        }); //END $(xml).find.eq.find.each
                    }); //END #ID.change
                }); //END $(xml).find.each
                alert(data);
            } //END AJAX.success fn
        }); //END $.ajax
    }); //END $.get  <<=================================== REMOVE
}

It should look like this:

function getXML(){
    $.ajax({
        type: "GET",
        url: "XMLReview.xml",
        dataType: "xml",
        success: function (xml) {
            var select = $('#ID');
            $(xml).find('plan').each(function () {
                var ID = $(this).find('ID').text();
                select.append("<option>" + ID + "</option>");
                $("#ID").change(function () {
                    var selectedIndex = $('#ID option').index($('#ID option:selected'));
                        var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
                        var value = $(this).text();
                    }); //END $(xml).find.eq.find.each
                }); //END #ID.change
            }); //END $(xml).find.each
            alert(data);
        } //END AJAX.success fn
    }); //END $.ajax
}

The extra $.get() wrapper is unnecessary.

Note that $.ajax() and $.get() and $.post() do the same thing. You are using the more structured $.ajax() construction, which is (IMHO) easier to keep things straight.

$.get() simply hard-codes the type="GET" and $.post() hard-codes the type="POST"

---

Also, I haven't done much with the XML dataType, but I strongly suspect that xml -- in the success function of your AJAX code block, in this context:

success: function (xml) {
    //post ajax code here, for eg.
    alert(xml);
}

Is a variable that will contain whatever has been ECHOed/printed/etc from the server side script? I don't believe it's an XML object ...

Answer 2

Ok there are kind of a lot of things going on here so I figured a fresh implementation would be easier to understand than a series of corrections (I'll try and note places where your understanding of JavaScript might need some work) First a demo . Now the JavaScript:

$('#btnxml').on('click', function() {
    var select = $('#ID'),
        xml = $($.parseXML($('#XMLData').text())),
        plans = xml.find('plan');

    plans.each(function () {
        var ID = $(this).find('ID').text();
        select.append("<option>" + ID + "</option>");
    });

    $("#ID").change(function () {
        var selectedIndex = $('#ID option').index($('#ID option:selected')),
            plan = $(plans[selectedIndex]);

        $('#planNumber').val(plan.find('planNumber').text());
        $('#Area').val(plan.find('Area').text());
        $('#Name').val(plan.find('Name').text());
        $('#Description').val(plan.find('Description').text());
        $('#Station_ID').val(plan.find('Station_ID').text());

        $('#code').val(plan.find('code').text());
        $('#County').val(plan.find('County').text());
    }).trigger('change');
});

And then the HTML

<script type='text/xml' id='XMLData'>
  <XMLReview>
    <plan>
      <planNumber>773</planNumber> 
      <Area>Upper Missouri</Area> 
      <ID>MISSOURI-NUT</ID> 
      <Name>Missouri River</Name> 
      <code>10030101</code> 
      <County>Broadwater</County> 
      <Station_ID>M09MISSR05</Station_ID> 
    </plan>
    <plan>
      <planNumber>774</planNumber> 
      <Area>Columbia</Area> 
      <ID>FLAT-STILL-TPA-2013</ID> 
      <Name>Sheppard Creek</Name> 
      <Description>- 3A</Description> 
      <code>17010210</code> 
      <County>Flathead</County> 
      <Station_ID>C09SHEPC04</Station_ID> 
    </plan>
  </XMLReview>
</script>
<form>
    <input type="button" id="btnxml" value="XML" /><br/>
    ID <select type="text" name="ID" id="ID"></select><br/>
    planNumber<input type="text" name="Name" id="planNumber"><br/>
    area<input type="text" name="Area" id="Area"><br/>
    Name:  <input type="text" name="Name" id="Name"><br/>
    Description:  <input type="text" name="Description" id="Description"><br/>
    Station ID  <input type="text" name="Station_ID" id="Station_ID"><br/>
    <label class="Code-label" for="code">HUC</label>
    <select class="select_code" id="code" name="code" data-iconpos="left" data-icon="grid">
      <option></option>
      <option>10010001</option>
      <option>10010002</option>
      <option>10020001</option>
      <option>10030101</option>
      <option>17010210</option>
    </select>
    <br/>
    <label class="county-label" for="County">County</label>
    <select class="select_county" id="County" name="County" data-iconpos="left" data-icon="grid">
     <option></option>
     <option>Beaverhead</option>
     <option>Big Horn</option>
     <option>Blaine</option>
    </select>
</form>

First, I made these changes to make this easier to demonstrate in JSFiddle, but they don't necessarily match what your final code will be:

• I faked the AJAX request (the other answer here gives you a clear explanation of how to properly use jQuery's excellent AJAX helper methods). When rolling this answer into yours you can just assume that all of this is wrapped in a $.get() that fetches your XML remotely.
• I also bound the click handled in JavaScript to $('#btnxml') (this is cleaner, but also because JSFiddle doesn't like onclick attributes that point to named functions), this is not strictly wrong it's just cleaner.

Now for the substantive changes:

• You are really trying to do two things, populate your $('#ID') selector (which was originally a <input type='text'> which is incorrect, in this code I updated to to a <select> , and then after it's populated you are trying to bind a change event handler. You had these steps inside each other, and I separated them back out. Also programmaticly changing a <select> doesn't trigger a change event automatically, so I appended a .trigger('change') at the end.
• It also appears that you are attempting to take the child nodes of the selected plan and update the corresponding input with the same name. You could use the .childNodes property but this will include TextNodes for all of the white-space between XML nodes, and rather than trying to filter them out I thought it would be cleaner to just map them individually. This may not work for you if your HTML and XML are constantly being updated but the next point I'm going to make possibly would prevent a totally automatic approach anyways.
• Selecting an option based on a value presents some challenges. jQuery is very smart. If you have a <select> element with a set of options that don't have value attributes and you try and set that <select> element's .val() by a string of one of those <option> s inside that element it will do the right thing. However if there are no elements that match that value then it will silently pass over it. Your XML has code and County values that do not appear in your HTML. I added the missing code values to show you that it is working, but I didn't add them to the County <select> . If you know all of your possible codes and county's and you can update your HTML then this won't be a problem, if instead you want new values to be appended while old values are just selected, then your code will get a little trickier.