0

我正在尝试以模式对话框中显示的形式使用 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 也在引导轮播中。这是我要更新的 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。

谢谢。

4

1 回答 1

0

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

  1. 正如 Chris 所指出的，您调用 jQuery load 的方式假定它会立即（同步）加载，但事实并非如此。您需要.load()按照jQuery 文档实现，并且只有在加载完成后才继续使用.dialog()and 。.ajax()即通过将所有代码放入/触发加载的“完整”回调参数中。请注意，虽然.load()确实隐式地异步设置了 div 的内容，但后续的 ajax 调用仍然可以在 div 加载之前发生。

  2. .ajax()将数据类型指定为 JSON 时，您不需要将响应解析为 JSON。.ajax() JQuery 文档说：

success(data, textStatus, jqXHR) - 函数获得三个参数：从服务器返回的数据，根据 dataType 参数格式化...

和

dataType - “json”：将响应评估为 JSON 并返回一个 JavaScript 对象

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

于 2012-09-06T02:10:35.837 回答