заполнить форму jquery из XML

Question

Я пытаюсь заполнить форму jquery данными из XML, где XML имеет идентификатор, который будет заполнять раскрывающийся список в форме и после выбора идентификатора других полей формы будет заполнен. Кстати, я не буду использовать PHP

Мой 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> 

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> 

Сценарий

<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 это не работает, и я не знаю, почему , Может кто-нибудь мне помочь, пожалуйста

Answer 1

одну или две вещи:

Вы задающие инлайн OnClick событие:

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

Почему бы не держать все в одном месте - так как вы уже используете совсем немного jQuery. Просто добавьте его в яваскрипта блок, как это:

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

и

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

---

Без проверки кода JavaScript/AJAX, эта конструкция не так:

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 
} 

Он должен выглядят так:

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 
} 

Дополнительную оболочку $ .get() не нужно.

Отметьте, что $.ajax() и $.get() и $.post() сделать то же самое. Вы используете более структурированную конструкцию $.ajax(), которая является (ИМХО) проще держать вещи прямо.

$.get() просто жесткая кода type="GET" и $.post() HARD-коде type="POST"

---

Кроме того, я не сделал много с XML DATATYPE, но я сильно подозреваю, что xml - в функции успеха ваш блок кода AJAX, в этом контексте:

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

переменные, которая будет содержать все, что было вторит/распечатано/и т.д. со стороны сервера сценария? Я не верю, что это XML object ...

Answer 2

Хорошо, здесь есть что-то вроде того, что я понял, что новая реализация будет понятнее, чем серия исправлений (я попробую и обратите внимание на места, где ваше понимание JavaScript может потребовать некоторой работы) Сначала a demo.Теперь 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'); 
}); 

И тогда 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> 

Во-первых, я сделал эти изменения, чтобы сделать это легче продемонстрировать в JSFiddle, но они не обязательно соответствуют тому, что ваш окончательный код будет :

• Я подделал запрос AJAX (другой ответ здесь дает вам четкое объяснение того, как правильно использовать превосходные методы помощника JQuery AJAX). Когда вы переносите этот ответ в свой, вы можете просто предположить, что все это завернуто в $.get(), который извлекает ваш XML удаленно.
• Я также связал click, обработанный в JavaScript до $('#btnxml') (это чище, но также потому, что JSFiddle не любит атрибуты onclick, указывающие на именованные функции), это не совсем неправильно, это просто чище.

Теперь для существенных изменений:

• Вы действительно пытаетесь сделать две вещи, заполнить ваш $('#ID') селектор (который был первоначально <input type='text'> что неправильно в этом коде я обновленный до к <select> , а затем после его заполнения вы пытаетесь связать обработчик событий change. У вас были эти шаги внутри друг друга, и я отделил их обратно. Кроме того, программное изменение <select> не вызывает событие изменения автоматически, поэтому я добавил .trigger('change') в конце.
• Также кажется, что вы пытаетесь взять дочерние узлы выбранного плана и обновить соответствующее имя input с тем же именем. Вы можете использовать свойство .childNodes, но это будет включать TextNodes для всего пробела между узлами XML, и вместо того, чтобы пытаться отфильтровать их, я подумал, что было бы проще просто отображать их отдельно. Это может не сработать для вас, если ваш HTML и XML постоянно обновляются, но следующий момент, который я собираюсь сделать, возможно, предотвратит полностью автоматический подход.
• Выбор опции, основанной на значении, представляет некоторые проблемы. jQuery очень умный. Если у вас есть элемент <select> с набором опций, которые не имеют атрибутов value, и вы пытаетесь установить <select> элемент .val() на строку из одного из этих <option> s внутри этого элемента, он будет правильно. Однако, если нет элементов, которые соответствуют этому значению, то он будет молча проходить через него. В вашем XML есть код и значения окружения, которые не отображаются в вашем HTML-коде. Я добавил недостающие значения кода, чтобы показать вам, что он работает, но я не добавил их в округ <select>. Если вы знаете все свои возможные коды и графства, и вы можете обновить свой HTML, это не будет проблемой, если вместо этого вы хотите добавить новые значения, когда старые значения будут выбраны, то ваш код станет немного сложнее.