Problem using value in jQuery / javascript

Question

Hi guys, I have a filled-in PHP table from Mysql, and I use JQuery to listen if a button is clicked, and if I click it, it will capture notes by the name they clicked. Everything works great, there is only one problem. Sometimes, when you click on it and a dialog box opens (JQuery UI), there is nothing in the text area. If you click it again, a popup will appear. So it seems, sometimes, maybe the value is thrown away? I am not sure and can 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:

Main layout

 <div> <div> other stuff... the table </div> </div> 

Answer 1

Assuming that #notes_msg is in #dialog-container , you need to make sure that the actions are performed in the correct order.

The best way to do this is to wait for both ajax calls to complete and continue them. You can do this with the promises / jqXHR objects returned by ajax calls, see this section of the manual .

You code would look somehow (you need to check 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 call should simply return the result of the ajax call and do nothing:

 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 markup, but both showUrlInDialog and sendUserfNotes are asynchronous actions. If showUrlInDialog is finished after sendUserfNotes, then showUrlInDialog overwrites the contents of the dialog container with the returned data. This may or may not overwrite what sendUserfNotes is placed inside #notes_msg - depending on how the markup is laid out. If this is the case, then this explains why notes sometimes do not appear, apparently randomly. This is a race condition.

Answer 3

There are several ways to bundle your ajax calls to complete sending sendUserOfNotes () before ShowUrlInDialog (). Try using .ajaxComplete ()

jQuery.ajaxComplete

Another way to bind ajax that you can use is to put the next call in return of the first. The following snippet should be in the know:

 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 is right. ShowUrlInDialog () sets the html dialog and sendUserOfNotes () changes the contents of the element in the dialog box. Each time sendUserOfNotes () returns first, ShowUrlInDialog () erases the notes. A promising example from jeroen should work too.