Submit a form without refreshing/redirecting of the current page (Python (Django) + jQuery + Ajax)


Question

Any way to submit a form without refreshing the current page at all using Python with jQuery Ajax? I want the end results similar to how Facebook comment works.

I'm currently using jQuery Form to do the Ajax. However, it doesn't give me the user experience that I want because:

  1. After submitting using jQuery Form, the URL on address bar refreshed to the form I submitted.

  2. It did refresh the page. I don't like it especially, let's say I was at the bottom of the page scrolled down to the maximum. After submitting the form, it refreshed the page, and the focus was redirected to the top of the page.

I hope I've made my point clear of what I want. I need something like Facebook comment system works. Someone commented, and then the comment was submitted without any refresh of the page at all.

EDIT

jQuery Code:

$('#review_submit').submit(function() { 
        var options = {};           
        $(this).ajaxSubmit(options);
        return false; 
});



    $('[name=submit_review_btn]').click(function(){                      
        $('#review_submit').submit();
    });

So, the python code to handle the submit will need to redirect a page from its server side code, so redirect the page to this URL, 'main_URL.com'

With the jQuery codes shown, results are:

  1. The URL appeared on address bar: main_URL.com/ form_action_url <--- This is the form action that I've set to submit the form.

  2. Page redirected to the page that I set in server side.

I'm confused with this Ajax experience.

1
7
10/30/2011 4:41:27 PM

Accepted Answer

You could handle this by instead of using jquery's form, use jquery's ajaxPost. This will allow you to .serialize() the form (to get the parameters) and be able to return to a JS function to do what you want after the 'form is submitted'. Check out jQuery.post()

jsFiddle

This will not refresh the page as the post happens through an AJAX call. It allows you to run a function after the post goes through and do w/e you want (if the post returns data, it will be available here... if you want to do another GET or POST after this one was a success, it can be done here... so on and so forth)

8
11/1/2011 11:56:22 AM

It would be easier to answer that if you posted your JavaScript code.

Are you submitting the form with a Submit button? If so, then jQuery Form should handle everything and NOT refresh the page.

If you're submitting the form in JavaScript, your code should look like in jQuery Form examples:

// attach handler to form's submit event 
$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});

the return false; is very important here. Otherwise, the user will be redirected.

For you system to work, you need it to do 2-phase:

  1. submit the comment
  2. append the comment to the rest of the comments (or fetch new comments from server and then append)

Is that how your current setup looks like?


Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon