Question

我正在尝试使用模式对话框中显示的表单中的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);
      }
    });
}

我知道ajax调用始终有效（我检查了控制台，但我从未收到警报），但#test div有时不会更新。它是随机发生的。开头的load（）方法调用实际加载表单的REST服务，然后使用ajax从另一个URL中提取一些数据。 #test div也在一个bootstrap轮播中。这是我想要更新的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。

感谢。

Answer 1

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

正如Chris所指出的，你调用jQuery load的方式假设它立即（同步）加载，而不是。您需要按照jQuery docs实施.load()，并且只有在加载完成后才能继续使用.dialog()和.ajax()。即通过在加载的“完整”回调参数中放入/触发所有代码。注意，尽管.load()隐式地异步设置了div的内容，但是在div加载之前仍然可以进行后续的ajax调用。
将数据类型指定为JSON时，您不需要将.ajax()响应解析为JSON。 .ajax() JQuery docs说：

成功（data，textStatus，jqXHR） - 该函数传递了三个 arguments：从服务器返回的数据，格式为 dataType参数......

和

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

我还会实现其他成功参数，以便您在看到错误时可以看到是否有任何有趣的内容。

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

1 个答案: