How do I refresh a page following JQuery dialogue form post and display response.
Hi,
I have the following JQuerty dialogue which posts form data to the processing page "save_applicantnote.php" and retrieves
the response which is then assigned to the <p> tag with id errors.
This works fine but I can't get the page to refresh and display the response. It either displays the response or refreshes but not both. Using location.reload(true); reloads the page but then I loose my response from the post.
Is there anyway to reload the page and display any error response returned from the post?
Thank you
I have the following JQuerty dialogue which posts form data to the processing page "save_applicantnote.php" and retrieves
the response which is then assigned to the <p> tag with id errors.
This works fine but I can't get the page to refresh and display the response. It either displays the response or refreshes but not both. Using location.reload(true); reloads the page but then I loose my response from the post.
Is there anyway to reload the page and display any error response returned from the post?
Thank you
$( "#dialog-window" ).dialog({
autoOpen: true,
maxWidth:550,
maxHeight: 900,
width: 550,
height: 900,
draggable: true,
modal: true,
buttons: {
"Save": function () {
$.post("save_applicantnote.php", $("#mainForm").serialize(), function(response)
{
$("p#errors").html(response);
});
$(this).dialog("destroy");
},
"Cancel": function () {
$(this).dialog("destroy");
}
}
});ASKER
Hi Julian,
I have a page which displays journal notes retrieved from a MYSQL database. At the top of the page is a "Add Note" button which when clicked displayed a modal dialogue box form for users to add a new note. After clicking save the new note is added to the database. The dialogue form is part of the same page code and the displayed notes but hidden until the dialogue box is opened.
Basically, after the user clicks "Save" I wanted the page to refresh so the user can see the new note added and for a message to pop up saving "new note added successfully"
The "New note added successfully" is a response from the processing page. In the event of an error an error response is returned.
Can I not show the new note and also have a message? perhaps I could display the message directly on the page rather than collecting is a response?
Thanks
I have a page which displays journal notes retrieved from a MYSQL database. At the top of the page is a "Add Note" button which when clicked displayed a modal dialogue box form for users to add a new note. After clicking save the new note is added to the database. The dialogue form is part of the same page code and the displayed notes but hidden until the dialogue box is opened.
Basically, after the user clicks "Save" I wanted the page to refresh so the user can see the new note added and for a message to pop up saving "new note added successfully"
The "New note added successfully" is a response from the processing page. In the event of an error an error response is returned.
Can I not show the new note and also have a message? perhaps I could display the message directly on the page rather than collecting is a response?
Thanks
The standard ways of accomplishing what you want to do is
You return the list of notes from the AJAX request and re-populate the list
OR
You append the new note with JavaScript
You can return multiple values from your Server request using JSON
Option 1 above
Send your data to the server with AJAX
Server script processes and adds to the databse
Server script requests list of notes from the server as an array
Then either
On the server render out the list elements with the data retrieved above and send back the already rendered HTML which you can then replace into page
OR
Send back a JSON encoded array and use JavaScript to create each of the list entries for each note
Which you choose is up to you
Option 2
Send the note to the server
Server adds note to database and sends back a status (true / false)
Based on the return the AJAX call back you add the new item to the list leaving the other items intact.
I will try and put some code together to show how it is done.
You return the list of notes from the AJAX request and re-populate the list
OR
You append the new note with JavaScript
You can return multiple values from your Server request using JSON
Option 1 above
Send your data to the server with AJAX
Server script processes and adds to the databse
Server script requests list of notes from the server as an array
Then either
On the server render out the list elements with the data retrieved above and send back the already rendered HTML which you can then replace into page
OR
Send back a JSON encoded array and use JavaScript to create each of the list entries for each note
Which you choose is up to you
Option 2
Send the note to the server
Server adds note to database and sends back a status (true / false)
Based on the return the AJAX call back you add the new item to the list leaving the other items intact.
I will try and put some code together to show how it is done.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you Julian this is brilliant. Thanks for your time on this, excellent solution.
You are most welcome.
Why do you want to refresh? Either you are doing AJAX or you are doing a complete Post back - why do you want to mix them?
Theoretically you could get the response - append it to the page URL and refresh the page and have either the server render out the page or use javascript on the page to pull the value from the URL - this is possible but not really practical.
The principle with AJAX is you submit data to the server while keeping the same page - you then update the page (or parts of it) with data the server sends back as part of the AJAX call.
Can you explain why you want to mix the two approaches?