使用ajax填充表單時遇到的問題獲取

Question

我嘗試（仍）使用遠程XML填充jQuery移動表單，方法是從「Project_ID」字段創建一個選擇並使用該字段根據XML填充其他表單字段。

我認爲問題出在我試圖填充選擇的方式與JQuery移動彈出窗口創建，我認爲可能需要刷新？此外，當我嘗試調試「對象不支持此屬性或方法」時，出現錯誤：Workplans = xml.find（'Workplan'）;

我的腳本

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

function getXML() { 
    $.ajax({ 
    type: "GET", 
    url: "WorkplanReview.xml", 
    dataType: "xml", 
    success: function (xml) { 

     var select = $('#Project_ID'), 
      Workplans = xml.find('Workplan'); 

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

     $("#Project_ID").change(function() { 
      var selectedIndex = $('#Project_ID option').index($('#Project_ID option:selected')), 
       Workplan = $(Workplans[selectedIndex]); 

      $('#WorkplanRecordNumber').val(Workplan.find('WorkplanRecordNumber').text()); 
      $('#Area').val(Workplan.find('Area').text()); 
      $('#Station_Name').val(Workplan.find('Station_Name').text()); 
      $('#Station_Description').val(Workplan.find('Station_Description').text()); 
      $('#Station_ID').val(Workplan.find('Station_ID').text()); 
      $('#Latitude').val(Workplan.find('Latitude').text()); 
      $('#Longitude').val(Workplan.find('Longitude').text()); 
      $('#HUC_8_Digit').val(Workplan.find('HUC_8_Digit').text()); 
      $('#County').val(Workplan.find('County').text()); 
     }).trigger('change'); 

    } 
    }); 
} 

我的HTML

<input type="button" id="btnxml" value="XML" />Workplan Number 
<input type="text" name="WorkplanRecordNumber" id="WorkplanRecordNumber">Area 
<input type="text" name="Area" id="Area">Project ID 
<select id="Project_ID" name="Project_ID"> 
    <option>Loading</option> 
</select>Station Name: 
<input type="text" name="Station_Name" id="Station_Name">Station Description: 
<input type="text" name="Station_Description" id="Station_Description">Station ID 
<input type="text" name="Station_ID" id="Station_ID"> 
<label class="huc-label" for="HUC_8_Digit">HUC</label> 
<select class="select_huc" id="HUC_8_Digit" name="HUC_8_Digit" data-iconpos="left" data-icon="grid"> 
    <option>Select</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>County</option> 
</select>Latitude: 
<input type="number" id="Latitude" name="Latitude" value="">Longitude: 
<input type="number" id="Longitude" name="Longitude" value=""> 

我知道你們這些人能幫助我，我感謝你在前進！

Answer 1

jQuery將方法如find擴展到jQuery對象。 xml是一個字符串，並且尚未轉換爲jQuery對象。你需要做這樣的事情：

$(xml).find('Workplan'); 

或者我建議這樣的對象重新使用：

success: function(xml) { 
    var $xml = $(xml); 
    ... 
    $xml.find('Workplan'); 

---

讓我們看看我們還有什麼可以做的：

$(function() { // Make sure all of this is wrapped in document-ready 

    var Workplans; // this isn't global, but is referenced in other methods 

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

    // Event handlers should only ever be set up once. 
    $("#Project_ID").change(function() { 
     var selectedIndex = $('#Project_ID option').index($('#Project_ID option:selected')), 
      Workplan = $(Workplans[selectedIndex]); 

     $('#WorkplanRecordNumber').val(Workplan.find('WorkplanRecordNumber').text()); 
     $('#Area').val(Workplan.find('Area').text()); 
     $('#Station_Name').val(Workplan.find('Station_Name').text()); 
     $('#Station_Description').val(Workplan.find('Station_Description').text()); 
     $('#Station_ID').val(Workplan.find('Station_ID').text()); 
     $('#Latitude').val(Workplan.find('Latitude').text()); 
     $('#Longitude').val(Workplan.find('Longitude').text()); 
     $('#HUC_8_Digit').val(Workplan.find('HUC_8_Digit').text()); 
     $('#County').val(Workplan.find('County').text()); 
    }); 

    function getXML() { 
     $.ajax({ 
     type: "GET", 
     url: "WorkplanReview.xml", 
     dataType: "xml", 
     success: function (xml) { 

      Workplans = $(xml).find('Workplan'); // modifies a higher scope 

      Workplans.each(function() { 
       var Project_ID = $(this).find('Project_ID').text(); 
       $("#Project_ID").append("<option>" + Project_ID + "</option>"); 
      }); 

      $("#Project_ID").trigger('change'); 

     } 
     }); 
    } 
});