Issue with using a value in JQuery/Javascript

Question

I have a PHP populated table from Mysql and I am using JQuery to listen if a button is clicked and if clicked it will grab notes on the associated name that they clicked. It all works wonderful, there is just one problem. Sometimes when you click it and the dialog(JQuery UI) window opens, there in the text area there is nothing. If you are to click it again it will pop back up. So it seems sometimes, maybe the value is getting thrown out? I am not to sure and could use a hand.

Code:

$(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);

    }

Let me know if you need anything else!

UPDATE:

The basic layout is

<div>
   <div>
     other stuff...

     the table
   </div>
</div>

Answer 1

Assuming that #notes_msg is located in #dialog-container, you would have to make sure that the actions happen in the correct order.

The best way to do that, is to wait for both ajax calls to finish and continue then. You can do that using the promises / jqXHR objects that the ajax calls return, see this section of the manual.

You code would look something like (you'd have to test it...):

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

The functions you are calling, should just return the result of the ajax call and do not do anything else:

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

Answer 2

It's hard to tell from this, especially without the mark up, but both showUrlInDialog and sendUserfNotes are asynchronous actions. If showUrlInDialog finished after sendUserfNotes, then showUrlInDialog overwrites the contents of the dialog container with the data returned. This may or may not overwrite what sendUserfNotes put inside #notes_msg - depending on how the markup is laid out. If that is the case, then it would explains why the notes sometimes do not appear, seemingly randomly. It's a race condition.

Answer 3

There are several ways you can chain your ajax calls to keep sendUserOfNotes() from completing before ShowUrlInDialog(). Try using .ajaxComplete()

jQuery.ajaxComplete

Another ajax chaining technique you can use is to put the next call in the return of the first. The following snippet should get you on track:

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 has it right. ShowUrlInDialog() sets the dialog's html and sendUserOfNotes() changes an element's content within the dialog. Everytime sendUserOfNotes() comes back first ShowUrlInDialog() wipes out the notes. The promise example by jeroen should work too.