jQuery partial page refresh after form submit

Question

When using jQuery to submit a form is it possible to place the resulting page (after the submit) inside another HTML element?

I'll try to make this clearer. Up to now I've been using Callback methods that among others do a

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

whenever a form has been updated with new information and needs to be refreshed. However, this results in a full page refresh. I'm implementing Partial Page Refresh using jQuery and thought of using something like

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

However, that does not seem to work as the page is still fully refreshed. The content is correct, however the behaviour seems to be exactly the same as before - so I'm not really sure if what I want is actually possible with jQuery. Any hints and pointers would be helpful.

Thanks.

Answer 1

What you would need to do is use one of the ajax methods to post your form, and inject the output into an element within the success callback. For example:

$("#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

Question is not clear. Spend more time understanding the jquery ajax api to find better way of updating dom element using jquery ajax.

If you are talking about event bindings not working after dom change due to ajax call. Refer Jquery live/die methods in events api.