Passing form data with Ajax

Question

I have a page which opens a thickbox of another page which contains a form within it. However, upon that form being submitted (it writes the data to the DB) I need the parent page of the thickbox to update certain rows of the form (the values that have been changed).

I have been reading online, but I have never really attempted doing anything like this with Ajax before (i just normally use jQuery load()). Essentially my theory is that I could use the jQuery .submit() funciton and have a callback function which takes the post values and passes them to the previous page. I am unsure however to pass the values from the form caught in the callback function to the previous page as the form although being shown on the page in a thickbox is a different page.

Any help would be greatly appreciated!

Just to help visulaise what the page looks like:

The form showing details is under the thickbox, and once the update buttons is clicked I would like to have a way of passing the new details back to that form without having to refresh the entire page.

Many thanks,

Answer 1

Well there are several ways you could do it one could be to find the div that the thickbox opens then find the iframe in there which would in theory show the returned data from the server depending on how you are returning it and then using jQuery you could extract the data and update the original page.

Another way would be to just retrieve the updated data manually through the main page on the onClose event of the thickbox which IMO is a waste of a call if the iframe returns it.

That all depends on how your server returns the data to the form though.

Answer 2

You can do two things, first you might want to use the form submit event to trigger an update of the form on the page:

$('#myThickboxForm').submit(function() {

    // take the data in one of the form fields
    var fieldInputData = $('#someThickboxFormField').val();

    // now update the other form using this value
    $('#pageForm').find('#aPageFormField').val(fieldInputData);

});

Your thickbox also triggers an "unload" event when it gets closes, you can listen to that event like this:

$('#TB_window').on('unload', someFunction);

var someFunction = function() {

    // do something when the thickbox closes

}