断続的なjQuery.append（）と$ .ajaxと$ .getJSON

Question

私は2つの選択リストを持っています。私は、.append（）でそれらを生成するためにajaxコールを作成しています。同期オプションと非同期オプションを評価するために$ .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呼び出しやより良い実践に何か問題があるなら、私もそれを学びたいと思うでしょう。

ありがとうございます。

---

EDIT

$（セレクタ）.LENGTHでのAJAX呼び出しをラップした、UIに表示されているにもかかわらず、それは偽を返しているので、私の仮定は、彼らが使用できませんということです追加するjQuery。

選択リストは、次のようにブートストラップモーダルにあります。

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

Answer 1

So.イベントの委任がキーでしたが、ブートストラップ・モーダル・イベントの使用と組み合わされました。回答hereのおかげで、canonが書かれています。

エンドでは、このでした：あなたが示されてきたJSコードが細かい

$(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>'); 
      }) 
     }); 
    });