JQuery partial page refresh after form submission

Question

When using jQuery to submit a form, can I place the resulting page (after submitting) inside another HTML element?

I will try to make this clearer. So far, I have used callback methods that, among others, performed

document.forms['form'].submit(); 

whenever the form is updated with new information and needs to be updated. However, this leads to a full page refresh. I am implementing Partial page Refresh using jQuery and was thinking of using something like

 var newContent = jQuery('#form').submit(); jQuery('#div').load(newContent); 

However, this does not work as the page is still completely refreshed. The content is correct, but the behavior is similar to what it was before, so I'm not sure if what I want is really possible with jQuery. Any hints and pointers will be helpful.

Thanks.

Answer 1

What you need to do is use one of the ajax methods to publish your form and paste the output into the element in the success callback. For instance:

 $("#submit").click(function() { $.post($("#form").attr("action"), $("#form").serialize(), function(html) { $("div.result").html(html); }); return false; // prevent normal submit }); 

Take a look at $.post and $.ajax

Answer 2

The question is not clear. Spend more time understanding jquery ajax api to find a better way to update your dom element with jquery ajax.

If you are talking about event bindings that do not work after changing dom due to ajax call. Refer to jQuery live / die methods in api events.