CODEWITHSUNDEEP
phpjqueryxmlparsing
MacMan
MacMan

Reputation: 933

Jquery Parse XML File

I've got the following code from another example on this site. This is reading the XML data from with in the same script.

How would I move the XML to an external page and have this script read that in ? Both php and XML files will be in the same location on the server.

Everything I've tried has resulted in Uncaught Error: Invalid 'test.xml' messages.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready(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');
});
</script>

<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>
    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>

Thanks

Upvotes: 1

Views: 3510

Answers (3)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Save your xml data only in test.xml and then try this,

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

        select.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');   
    }

    $.get('test.xml',function(data){/// get the xml data from test.xml
        xml = $($.parseXML(data));// parse the data to xml
        plans= xml.find('plan');// find plans from xml
        renderData(xml,plans);//  call renderdata function to render elements
    });
});

Upvotes: 3

ThW
ThW

Reputation: 19482

Just use the Ajax methods:

$.get(url)
  .done(
    function (xml) {
      var $xml = $(xml);
      var plans = $xml.find('plan');
      ...
    }
  );

If the webserver delivers the file as XML (Content-Type) jQuery will return it in an DOM document. Wrap it into a jQuery object and use the CSS selectors to extract data.

Upvotes: 1

Volkan Ulukut
Volkan Ulukut

Reputation: 4218

You can use ajax to load external xml file (let's say data.xml) into your document then read it with javascript. add this line into $(document).ready(function() {:

$('#result').load('data.xml');

and add this to your html body

<div id='result'></div>

Upvotes: 0

Related Questions