Jquery 在模式对话框表单中使用ajax/json更新div会随机失败

我试图用模式对话框中显示的getJSON格式更新div控件（#test）。每当用户单击定义的链接时，都会显示该对话框。以下是名为：

// Displays modal dialog with a form
function job_description(job_id) {
    $('<div id="server-form"></div>').load('/description_form').dialog(
        {
            position: { 
                my: 'top top',
                at: 'top top',
                offset: '0 100',
                of: $('body')
            },
            width: 650,
            modal:true,
            resizable: false,
            title: 'Job description details',
            buttons: { 
                "close": {
                class: "btn btn-primary",
                text: "Close",
                click: 
                    function() {
                        $( this ).remove();
                    }
                }
            },
            close: function(event,ui) {
                $(this).remove();
            }
    });
    var response = $.ajax({
      type: 'GET',
      url: '/descriptions_list/'+job_id,
      cache: false,
      datatype: 'json',
      success: function(response){
               var obj = $.parseJSON(response); 
               //console.log(obj.description.title);
               $('#test').html(obj.description.title);
          },
      error: function(msg) {
                alert('error: '+msg);
      }
    });
}

//显示带有窗体的模式对话框
功能作业描述（作业id）{
$（''）.load（'/description_form'）。对话框(
{
位置：{
我的‘顶’，
在“顶上”，
偏移量：“0 100”，
共：$（“正文”）
},
宽度：650，
莫代尔：是的，
可调整大小：false，
标题：“工作描述详细信息”，
按钮：{
“结束”：{
类别：“btn btn主”，
文本：“关闭”，
点击：
函数（）{
$（this.remove（）；
}
}
},
关闭：功能（事件、用户界面）{
$（this.remove（）；
}
});
var响应=$.ajax({
键入：“GET”，
url:'/descriptions\u list/'+job\u id，
cache:false，
数据类型：“json”，
成功：功能（响应）{
var obj=$.parseJSON（响应）；
//控制台日志（对象描述、标题）；
$（'#test'）.html（obj.description.title）；
},
错误：函数（msg）{
警报（'错误：'+消息）；
}
});
}

我知道ajax调用总是有效的（我检查了控制台，但从未收到警报），但是#test div有时不会得到更新。这是随机发生的。开始时的load（）方法调用一个实际加载表单的REST服务，然后使用ajax从另一个url提取一些数据。#test div也位于引导转盘中。下面是我尝试更新的div部分：

<div id="wrapper">
<div id="description-editor" class="carousel slide" style="padding-left: 20%;padding-right: 20%">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <form>
      <div class="item well" style="height: 500px">
        <h3>Title</h3><br/>
        <div id="test" style="width: 300px; height: 200px">I should get updated...</div>
      </div>
      <div class="item well" style="height: 500px">
        <h3>Some other info</h3><br/>
        <p>To be completed</p>
      </div>
    </form>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#description-editor" data-slide="prev" data-interval="">&lsaquo;</a>
  <a class="carousel-control right" href="#description-editor" data-slide="next" data-interval="">&rsaquo;</a>
</div>
</div>

标题

我应该得到更新。。。
其他一些信息

待完成

我正在绞尽脑汁试图弄明白为什么在调用成功时（总是如此），test div并不总是得到更新。我尝试使用async:false，但也没有用……我使用的是jquery 1.7.1

---

谢谢。

我发现您的代码有两个问题：

正如Chris所指出的，调用jQuery load的方式假定它立即（同步）加载，而实际上并没有。您需要按照实现

.load（）

，并且仅在加载完成后继续执行

.dialog（）

和

.ajax（）

。也就是说，将所有代码放入/触发load的“complete”回调参数。请注意，尽管

.load（）

确实以异步方式隐式设置了div的内容，但后续的ajax调用仍可能在加载div之前发生

将数据类型指定为JSON时，不需要将

.ajax（）

响应解析为JSON。

.ajax（）

说：

成功（数据、文本状态、jqXHR）- 函数通过了三次 参数：从服务器返回的数据，根据 数据类型参数

及

dataType-“json”：将响应计算为json并返回一个JavaScript对象

---

我还将实现成功的其他参数，这样当您看到错误时，您可以看到这些参数中是否有任何有趣的地方。

您是否使用chrome控制台或其他嗅探器确认返回了什么？在某些情况下，可能返回了无效的json。此外，在第一次加载成功之前，可能不应该触发第二次ajax调用？正如您和Chris建议的那样，我将代码移到了load（）中的回调函数中，到目前为止，没有出现任何错误。谢谢大家！