Javascript 延迟使用ajax填充模态体

我有一个动态模式，通过在模式加载上执行Ajax GET来填充数据。有趣的是，除非我首先发出警报，否则不会提取数据或将数据附加到模态体

我的概要如下

<div class="modal hide fade all-opps-updates">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">X</a>
        <h4 class="modal-title"></h4>
    </div>
    <div class="modal-body"> </div>
    <div class="modal-footer"></div>
</div>

X

这是我的jQuery

$(function(){
    $('.all-opps-updates').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // whatever that triggered the modal
        var my_id = button.data('myid') // Extract info from data-* attributes
        var url = "some url/"+my_id;
        var update_form = '';
        $.ajax({
            type: 'GET',
            url: url,
            success: function(resp){
               update_form = resp;                  
            }
        });
        alert('i have to alert something!!!!!');
        var modal = $(this);
        modal.find('.modal-title').text("title");
        modal.find('.modal-body').html(update_form);
        modal.find('.modal-footer').html("<h5>some content</h5>");
        });
    });

$（函数（）{
$（'.all opps updates'）。on（'show.bs.modal'，函数（事件）{
var button=$（event.relatedTarget）//触发模式的任何内容
var my_id=button.data（'myid'）//从数据中提取信息-*属性
var url=“some url/”+我的id；
var更新形式=“”；
$.ajax({
键入：“GET”，
url:url，
成功：功能（resp）{
更新_form=resp；
}
});
警惕（‘我必须警惕一些事情！’）；
var modal=$（本）；
modal.find（'.modal title'）。文本（“title”）；
modal.find（'.modal body'）.html（更新表单）；
modal.find（'.modal footer'）.html（“某些内容”）；
});
});

---

这可能是什么原因造成的？我尝试过使用setTimeout函数，但仍然不起作用。我意识到，除非我发出警报，否则不会调用GET函数。

这是因为AJAX调用是异步执行的。这意味着JavaScript的执行不会被阻止，因为它正在等待服务器的响应。当

modal.find（'.modal body'）.html（更新表单）时，您的服务器尚未响应

您需要更新先前使用
$.ajax
函数传递的
success
回调函数中的模式内容。
这是因为ajax调用是异步执行的。这意味着JavaScript的执行不会被阻止，因为它正在等待服务器的响应。当
modal.find（'.modal body'）.html（更新表单）时，您的服务器尚未响应

您需要在先前使用
$函数传递的
success
回调函数中更新模式的内容。ajax是异步的。将模态体内容更新零件移动到成功回调中

$(function(){
    $('.all-opps-updates').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // whatever that triggered the modal
        var my_id = button.data('myid') // Extract info from data-* attributes
        var url = "some url/"+my_id;
        var update_form = '';
        $.ajax({
            type: 'GET',
            url: url,
            success: function(resp){
               update_form = resp;                  
               var modal = $(this);
                modal.find('.modal-title').text("title");
               modal.find('.modal-body').html(update_form);
               modal.find('.modal-footer').html("<h5>some content</h5>");
            });
            }
        });


    });

success: function(resp){

    //----> this will be executed delayed until the response is returned from server
                   update_form = resp;  
                   modal.find('.modal-body').html(update_form);                
                }

$（函数（）{
$（'.all opps updates'）。on（'show.bs.modal'，函数（事件）{
var button=$（event.relatedTarget）//触发模式的任何内容
var my_id=button.data（'myid'）//从数据中提取信息-*属性
var url=“some url/”+我的id；
var更新形式=“”；
$.ajax({
键入：“GET”，
url:url，
成功：功能（resp）{
更新_form=resp；
var modal=$（本）；
modal.find（'.modal title'）。文本（“title”）；
modal.find（'.modal body'）.html（更新表单）；
modal.find（'.modal footer'）.html（“某些内容”）；
});
}
});
});
Ajax是异步的。将模态体内容更新零件移动到成功回调中

$(function(){
    $('.all-opps-updates').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // whatever that triggered the modal
        var my_id = button.data('myid') // Extract info from data-* attributes
        var url = "some url/"+my_id;
        var update_form = '';
        $.ajax({
            type: 'GET',
            url: url,
            success: function(resp){
               update_form = resp;                  
               var modal = $(this);
                modal.find('.modal-title').text("title");
               modal.find('.modal-body').html(update_form);
               modal.find('.modal-footer').html("<h5>some content</h5>");
            });
            }
        });


    });

success: function(resp){

    //----> this will be executed delayed until the response is returned from server
                   update_form = resp;  
                   modal.find('.modal-body').html(update_form);                
                }

$（函数（）{
$（'.all opps updates'）。on（'show.bs.modal'，函数（事件）{
var button=$（event.relatedTarget）//触发模式的任何内容
var my_id=button.data（'myid'）//从数据中提取信息-*属性
var url=“some url/”+我的id；
var更新形式=“”；
$.ajax({
键入：“GET”，
url:url，
成功：功能（resp）{
更新_form=resp；
var modal=$（本）；
modal.find（'.modal title'）。文本（“title”）；
modal.find（'.modal body'）.html（更新表单）；
modal.find（'.modal footer'）.html（“某些内容”）；
});
}
});
});
默认情况下，Ajax是异步的

$(function(){
    $('.all-opps-updates').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // whatever that triggered the modal
        var my_id = button.data('myid') // Extract info from data-* attributes
        var url = "some url/"+my_id;
        var update_form = '';

//----> this will be executed first
        $.ajax({
            type: 'GET',
            url: url,
            success: function(resp){

//----> this will be executed delayed until the response is returned from server
               update_form = resp;                  
            }
        });

//----> and then this will be executed immediately
        alert('i have to alert something!!!!!');
//----> putting the alert actually introduce the delay and the success callback is executed.
        var modal = $(this);
        modal.find('.modal-title').text("title");

//----> here you are using the *update_form* which will be empty until the success callback is executed.
        modal.find('.modal-body').html(update_form);
        modal.find('.modal-footer').html("<h5>some content</h5>");
        });
    });

默认情况下，Ajax是异步的

$(function(){
    $('.all-opps-updates').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // whatever that triggered the modal
        var my_id = button.data('myid') // Extract info from data-* attributes
        var url = "some url/"+my_id;
        var update_form = '';

//----> this will be executed first
        $.ajax({
            type: 'GET',
            url: url,
            success: function(resp){

//----> this will be executed delayed until the response is returned from server
               update_form = resp;                  
            }
        });

//----> and then this will be executed immediately
        alert('i have to alert something!!!!!');
//----> putting the alert actually introduce the delay and the success callback is executed.
        var modal = $(this);
        modal.find('.modal-title').text("title");

//----> here you are using the *update_form* which will be empty until the success callback is executed.
        modal.find('.modal-body').html(update_form);
        modal.find('.modal-footer').html("<h5>some content</h5>");
        });
    });

实际情况是，“更新表单”在不使用警报时不包含任何数据。啊？这是因为ajax调用是异步的。
以下是正在发生的事情：


代码运行
ajax调用已发出
代码在ajax调用后继续运行

modal.find('.modal-title').text("title");
modal.find('.modal-body').html(update_form);
modal.find('.modal-footer').html("<h5>some content</h5>");



所以当
modal.find（'.modal body'）.html（update_form）时运行代码“更新表单”不包含任何值

为什么当你发出警报时它会工作？因为警报使其他代码等待，同时ajax调用已经完成并设置了“update_form”的值。
让它工作的不是警报，而是警报让ajax调用有时间在其他代码执行之前完成

要解决此问题，您需要放置代码

    modal.find('.modal-title').text("title");
    modal.find('.modal-body').html(update_form);
    modal.find('.modal-footer').html("<h5>some content</h5>");

modal.find（'.modal title'）.text（“title”）；
modal.find（'.modal body'）.html（更新表单）；
modal.find（'.modal footer'）.html（“某些内容”）；

像这样进入成功的世界

$(function(){
    $('.all-opps-updates').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // whatever that triggered the modal
        var my_id = button.data('myid') // Extract info from data-* attributes
        var url = "some url/"+my_id;
        var modal = $(this);
        $.ajax({
            type: 'GET',
            url: url,
            success: function(resp){
                modal.find('.modal-title').text("title");
                modal.find('.modal-body').html(resp);
                modal.find('.modal-footer').html("<h5>some content</h5>");             
            }
        });
        alert('i have to alert something!!!!!');
    });
});

$（函数（）{
$（'.all opps updates'）。on（'show.bs.modal'，函数（事件）{
var button=$（event.relatedTarget）//触发模式的任何内容
var my_id=button.data（'myid'）//从数据中提取信息-*属性
var url=“some url/”+我的id；
var modal=$（本）；
$.ajax({
键入：“GET”，
url:url，
成功：功能（resp）{
modal.find（'.modal title'）。文本（“title”）；
modal.find（'.modal body'）.html（resp）；
modal.find（'.modal footer'）.html（“某些内容”）；
}
});
警惕（‘我必须警惕一些事情！’）；
});
});
实际发生的情况是，“更新表单”在不使用警报时不包含任何数据。啊？这是因为ajax调用是异步的。
以下是正在发生的事情：


代码运行
ajax调用已发出
代码在ajax调用后继续运行

modal.find('.modal-title').text("title");
modal.find('.modal-body').html(update_form);
modal.find('.modal-footer').html("<h5>some content</h5>");



所以当
modal.find（'.modal body'）.html（update_form）