間歇jQuery.append（）與$ .ajax和$ .getJSON

我有兩個選擇列表。我正在做一個ajax調用來使用.append（）填充它們，並嘗試使用$ .ajax和$ .getJson來評估同步和異步選項。無論是使用呼叫類型，我可以得到的，在同一個會話與和withouth的瀏覽器刷新：

兩個填充
一個而不是其他
無論是

服務器響應回來與有效的JSON。

下面是帶循環的ajax調用。我沒有控制檯錯誤，單步通過服務器端很好。我不知道如何進一步調試，尋找一些指導。

$.ajax({ 
    url: "/Programs/GetAll", 
    contentType: "json", 
    method: "GET", 
    success: function (data) { 
     //iterate over the data and append a select option 
     $.each(data, function (key, val) { 
      $('#programId').append('<option id="' + val.id + '">' + val.name + '</option>'); 
     }) 
    } 
});

如果在ajax調用中出現問題或者更好的練習，我也會熱衷於學習。

謝謝大家。

編輯

已經包裹在$ Ajax調用（選擇）。長度，儘管在UI可見，它返回假所以我的假設是，他們不提供給jQuery來追加。

選擇列表位於Bootstrap模式，如下所示。

BootstrapDialog.show({ 
         type: BootstrapDialog.TYPE_DANGER, 
         title: '<i class="fa fa-calendar"></i> Create Event', 
         message: '<p><i class="fa fa-clock-o"></i> ' + _when_ + '</p>' + 

             '<select required id="programId" class="calendar_event_input_add form-control"></select>' + 
             '<select required id="taskId" class="calendar_event_input_add form-control"></select>' + 
             '<input required type="text" id="apptEventTitle" class="form-control" placeholder="Short Name" />' + 
             '<textarea required type="text" id="apptEventDescription" class="calendar_event_textarea_add form-control" placeholder="Good Description" rows="3"/></textarea>' + 
             '<input type="text" class="calendar_event_input_add form-control" id="apptEventUrl" placeholder="Reference Link" />' + 
             '<input type="hidden" id="apptStartTime" value="' + start + '" />' + /** start date hidden **/ 
             '<input type="hidden" id="apptEndTime" value="' + end + '" />' + /** end date hidden **/ 
             '<input type="hidden" id="apptAllDay" value="' + allDay + '" />' + /** allday hidden **/ 

             '', 
         buttons: [ 
          { 
           label: '<i class="fa fa-check"></i> Create Event', 
           cssClass: 'btn-success', 
           hotkey: 13, // Enter. 
           action: function (dialogItself) { 
            _calendarEventAdd(); 
            dialogItself.close(); 
            _calendarInstance.fullCalendar('unselect'); 
           } 
          }, 
          { 
           label: '<i class="fa fa-times"></i> Cancel', 
           cssClass: 'btn-default', 
           action: function (dialogItself) { 
            dialogItself.close(); 
            _calendarInstance.fullCalendar('unselect'); 
           } 
          } 
         ] 
        });

來源

2016-12-14 K7Buoy

還有你的JS代碼是好的。我們需要更多的信息。如果在某些情況下沒有填充數據，那麼AJAX不會被觸發，或者它會響應一個錯誤。在這些情況下，您沒有給我們足夠的信息來幫助。 –

另請注意，只有單個'＃programId'元素將填充到您的代碼中。如果你給多個元素賦予了相同的'id'屬性，這可能是你的問題的根源。如果是，請嘗試使用常用類。 –

道歉。這只是其中一個電話的例子。有一個確切的副本，只是調用另一個控制器。在我編輯帖子之前，有什麼信息可以幫助調整堆棧，網絡或全局範圍？ – K7Buoy

所以，事件委派是關鍵，但與使用引導模式事件相結合。非常感謝canon所寫的回答here。

它到底是這樣的：

$(document).on("shown.bs.modal", "#detailedevent", function (e) { 
     $.getJSON('/Programs/GetAll', function (data) { 
      var $select = $('#programId'); 
      //clear the current content of the select 
      $select.empty(); 

      //iterate over the data and append a select option 
      $.each(data, function (key, val) { 
       $select.append('<option id="' + val.id + '">' + val.name + '</option>'); 
      }) 
     }) 

     $.getJSON('/Tasks/GetAll', function (data) { 
      var $select = $('#taskId') 
      //clear the current content of the select 
      $select.empty(); 

      //iterate over the data and append a select option 
      $.each(data, function (key, val) { 
       $select.append('<option id="' + val.id + '">' + val.name + '</option>'); 
      }) 
     }); 
    });

來源

2016-12-15 12:02:18 K7Buoy

間歇jQuery.append（）與$ .ajax和$ .getJSON

回答

相關問題