6

Mysql から PHP が入力されたテーブルがあり、JQuery を使用して、ボタンがクリックされた場合にリッスンします。クリックすると、クリックした関連する名前に関するメモが取得されます。すべてがうまく機能しますが、問題は 1 つだけです。それをクリックしてダイアログ（JQuery UI）ウィンドウが開いたときに、テキスト領域に何もないことがあります。もう一度クリックすると、ポップアップが表示されます。それで、時々、値が捨てられているように見えますか？確信が持てず、手を使うことができました。

コード：

$(document).ready(function () {
    $(".NotesAccessor").click(function () {
        notes_name = $(this).parent().parent().find(".user_table");
      run();
    });

});
function run(){
    var url = '/pcg/popups/grabnotes.php';
    
    showUrlInDialog(url);
    sendUserfNotes();
    
    
}
    function showUrlInDialog(url)
    {
      var tag = $("#dialog-container");
      $.ajax({
        url: url,
        success: function(data) {
          tag.html(data).dialog
          ({
              width: '100%',
                modal: true
          }).dialog('open');
        }
      });
    }
    function sendUserfNotes()
    {
        
        $.ajax({
        type: "POST",
        dataType: "json",
        url: '/pcg/popups/getNotes.php',
        data:
        {
            'nameNotes': notes_name.text()
            
        },
        success: function(response) {
            $('#notes_msg').text(response.the_notes)
        }
    });
    
    }
    function getNewnotes(){
        new_notes = $('#notes_msg').val();
        update(new_notes);  
    }
    // if user updates notes
    function update(new_notes)
    {
    
            $.ajax({
        type: "POST",
        //dataType: "json",
        url: '/pcg/popups/updateNotes.php',
        data:
        {
            'nameNotes': notes_name.text(),
            'newNotes': new_notes   
        },
        success: function(response) {
            alert("Notes Updated.");
            var i;
             $("#dialog-container").effect( 'fade', 500 );
            
            i = setInterval(function(){
             $("#dialog-container").dialog( 'close' );
            clearInterval(i);
            }, 500);
            
            }
    });
        
    }
    /******is user closes notes ******/
    function closeNotes()
    {
        var i;
         $("#dialog-container").effect( 'fade', 500 );
        
        i = setInterval(function(){
         $("#dialog-container").dialog( 'close' );
        clearInterval(i);
        }, 500);

    }

他に何か必要な場合はお知らせください。

アップデート：

基本的なレイアウトは

<div>
   <div>
     other stuff...

     the table
   </div>
</div>
4

3 に答える 3

1

#notes_msgが にあると仮定すると#dialog-container、アクションが正しい順序で発生することを確認する必要があります。

これを行う最善の方法は、両方の ajax 呼び出しが終了してから続行するのを待つことです。ajax 呼び出しが返す promises / jqXHR オブジェクトを使用してそれを行うことができます。マニュアルのこのセクションを参照してください。

コードは次のようになります (テストする必要があります...):

function run(){
    var url = '/pcg/popups/grabnotes.php';
    var tag = $("#dialog-container");

    var promise1 = showUrlInDialog(url);
    var promise2 = sendUserfNotes();

    $.when(promise1, promise2).done(function(data1, data2) {
      // do something with the data returned from both functions:
      // check to see what data1 and data2 contain, possibly the content is found
      // in data1[2].responseText and data2[2].responseText

      // stuff from first ajax call
      tag.html(data1).dialog({
          width: '100%',
          modal: true
        }).dialog('open');

      // stuff from second ajax call, will not fail because we just added the correct html
       $('#notes_msg').text(data2.the_notes)
    });
}

呼び出している関数は、ajax 呼び出しの結果を返すだけで、他には何もしません。

function showUrlInDialog(url)
{
  return $.ajax({
    url: url
  });
}
function sendUserfNotes()
{
  return $.ajax({
    type: "POST",
    dataType: "json",
    url: '/pcg/popups/getNotes.php',
    data: {
        'nameNotes': notes_name.text()
    }
  });
}
于 2013-02-12T21:45:50.147 に答える
1

特にマークアップがないと、これから判断するのは困難ですが、showUrlInDialog と sendUserfNotes はどちらも非同期アクションです。sendUserfNotes の後に showUrlInDialog が終了した場合、showUrlInDialog はダイアログ コンテナの内容を返されたデータで上書きします。これは、sendUserfNotes が #notes_msg 内に置いたものを上書きする場合と上書きしない場合があります (マークアップのレイアウト方法によって異なります)。その場合、メモがランダムに表示されないことがある理由を説明できます。競合状態です。

于 2013-02-12T21:22:04.520 に答える
1

ShowUrlInDialog() の前に sendUserOfNotes() が完了しないように ajax 呼び出しを連鎖させる方法はいくつかあります。.ajaxComplete() を使用してみてください

jQuery.ajaxComplete

使用できるもう 1 つの ajax チェーン手法は、最初の呼び出しの戻り値に次の呼び出しを配置することです。次のスニペットは、あなたを軌道に乗せるはずです:

function ShowUrlInDialog(url){
    $.get(url,function(data){
        tag.html(data).dialog({width: '100%',modal: true}).dialog('open');
        sendUserOfNotes();
    });
}

function sendUserOfNotes(){
    $.post('/pcg/popups/getNotes.php',{'nameNotes': notes_name.text()},function(response){
        $('#notes_msg').text(response.the_notes)
    },"json");
}

ジェームズはそれを正しく持っています。ShowUrlInDialog() はダイアログの html を設定し、sendUserOfNotes() はダイアログ内の要素のコンテンツを変更します。sendUserOfNotes() が戻ってくるたびに、最初に ShowUrlInDialog() がメモを消去します。jeroen による promise の例も機能するはずです。

于 2013-02-12T22:44:36.127 に答える