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 を呼び出す方法は、即座に (同期的に) 読み込まれることを前提としていますが、そうではありません。jQuery docs.load()に従って実装する必要があり、ロードが完了したら、andに進む必要があります。つまり、すべてのコードをロードの「完全な」コールバック パラメータに配置/トリガーすることによって。暗黙的に div のコンテンツを非同期に設定しますが、div がロードされる前に後続の ajax 呼び出しが発生する可能性があることに注意してください。.dialog().ajax().load()

  2. .ajax()データ型を JSON として指定する場合、応答を JSON に解析する必要はありません。.ajax() JQueryのドキュメントには次のように書かれています：

success(data, textStatus, jqXHR) - 関数には 3 つの引数が渡されます: サーバーから返されたデータは、dataType パラメーターに従ってフォーマットされます...

と

dataType - "json": レスポンスを JSON として評価し、JavaScript オブジェクトを返します

また、成功の他のパラメーターも実装して、エラーが表示されたときに何か面白いものが通過するかどうかを確認できるようにします。

于 2012-09-06T02:10:35.837 に答える