在使用JQuery/Javascript中出现数值问题

Question

我有一个从Mysql中填充的PHP表格，并且我正在使用JQuery来监听是否单击了一个按钮，如果单击了，它将获取与他们单击的相关名称的注释。它全部都很好地工作，只有一个问题。有时候当你单击它并且对话框（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>

- David Biga

---

如果您可以发布您的HTML代码或使用jsfiddle提供一个问题示例，那可能会有助于社区。 - Ruben Infante

只是一个小提示：var i = setInterval(function(){ $("#dialog-container").dialog("close"); clearInterval(i); }, 500);与setTimeout(function(){ $("#dialog-container").dialog("close"); }, 500)是相同的。 - Andreas

可能是PHP错误/问题，你是否检查了服务器上的错误日志以查看是否有任何异常？ - jeroen

@rubeninfante，这里有大量的HTML。 - David Biga

是的，该对话框打开了包含＃notes_msg div的文件。 - David Biga

Answer 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()
    }
  });
}

- jeroen

---

@David Biga 可能返回的数据就是完整的响应；如果是这样，你的数据可以在 data1[2].responseText 和 data2[2].responseText 中找到，只需执行 console.log(data1, data2); 来确保。 - jeroen

让我们在聊天中继续这个讨论。 - David Biga

@David Biga 不好意思，我得走了，但数据在那儿，只需使用 console.log 就可以看到如何访问它。 - jeroen

当它打开成功显示时，这是导致它的原因。 - David Biga

或许 data1 不仅仅是你的 HTML，你只需要其中的一部分，比如像另一个变量一样使用 data1[0]。这看起来很合理，因为两个返回变量的结构应该是相同的。 - jeroen

Answer 2

有几种方法可以链接您的ajax调用，以使sendUserOfNotes()在ShowUrlInDialog()完成之前不会完成。尝试使用.ajaxComplete()

jQuery.ajaxComplete

另一种您可以使用的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");
}

James说得对。ShowUrlInDialog（）设置对话框的HTML，sendUserOfNotes（）更改对话框中元素的内容。每次sendUserOfNotes（）返回后，ShowUrlInDialog（）都会清除注释。Jeroen提供的promise示例也应该有效。

- Curtis Kelsey

---

jQuery.when 表示返回的参数为：["success", statusText, jqXHR]。 - Curtis Kelsey

我该如何去掉“success”？我正在按照上面的方法操作，虽然它有效，但每次都会在我的页面上显示“success”。 - David Biga

很可能是你的代码中有显示“success”值的部分。如果没有看到你的代码实现，很难确定。 - Curtis Kelsey

Answer 3

这很难确定，特别是没有标记的情况下，但showUrlInDialog和sendUserfNotes都是异步操作。如果showUrlInDialog在sendUserfNotes之后完成，那么showUrlInDialog将用返回的数据覆盖对话框容器的内容。这可能会覆盖sendUserfNotes放置在＃notes_msg中的内容-这取决于标记的布局方式。如果是这种情况，则解释了为什么笔记有时会不出现，看起来是随机的。这是一种竞争条件。

- James Tracy

---

我认为你是对的，我需要确保先调用showUr...()函数，然后再调用其他函数。 - David Biga

我该怎么做...设置一个计时器？ - David Biga

处理这个问题最简单的方法是使用回调函数。您可以将一个函数回调传递到showUrlInDialog中。当showUrlInDialog完成时，它会调用您的回调函数，然后再调用sendUserfNotes。这样就能保证正确的顺序始终得以维护。 - James Tracy

或者，在ShowUrlInDialog()函数中的ajax请求完成后，直接调用sendUserfNotes()函数 - crushedGrass的回答。 - James Tracy

我在使用它时遇到了显示“成功”的问题？ - David Biga

它可以工作，只是每次在屏幕角落显示成功。 - David Biga