AJAXリクエスト後にSelect2データを提供

Question

AJAXコール後にSelect2ドロップダウンにデータを提供しようとしています。ただし、AJAX呼び出しが完全に機能し、期待される結果が返されても、ドロップダウンでデータが取得されないようです。ここにコードがあります。ドロップダウンは#dialog-create-circleと呼ばれるJQuery UIのモーダルの内側にあり、Select2の要素はボタン#createCircleをクリックしてモーダルを開いたときにのみ作成されることに注意してください。 AJAXコールが終了するのに十分な時間を与えてもモーダルを開いても、データはまだドロップダウンボックスSelect2にロードされていないことがわかりました。私は本当にこれについていくつかの助けに感謝します。

var availableTags=[]; 

$.ajax({ 
    'url': '{{site.uri.public}}/getUserList', 
    'type': 'GET', 
    'dataType': 'json', 
    'data': {}, 
    'success': function(data) { 
     availableTags=data;     
    }, 
    'error': function(data) { 
    } 
}); 

$("#createCircle").click(function() { 

     $("#dialog-create-circle").dialog("open"); 


     $("#dropdown").select2({ 
     data: availableTags 
     }); 

}); 

Answer 1

@Lucas Costaで提案されているように、関数にajaxをラップし、必要に応じて呼び出しを1つのオプションにします。このようにして、他の要素やURLのように何かを渡すこともできます：

function fillSelect2(){ 
    $.ajax({ 
    'url': '{{site.uri.public}}/getUserList', 
    'type': 'GET', 
    'dataType': 'json', 
    'data': {}, 
    'success': function(data) { 
     $("#dropdown").select2({ 
      data: data 
     }); 
    }, 
    'error': function(data) { 
    } 
    }); 
}); 

$("#createCircle").click(function() { 
    $("#dialog-create-circle").dialog("open"); 
    fillSelect2(); /* dialog now open, $('#dropdown') should be good to fill */ 
});