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.

Solution 1

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)

Solution 2

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?

Solution 3

I have a very dynamic site that uses this technology all over the place. We use Dojo but the principles are the same. Like the above posters said, your form needs to have onsubmit="return false;" as an attribute (or in the form object it submits) so that the page is not reloaded.

On the server side, we don't use a redirect, but reply with JSON (or XML, or whatever) and tell the response handler (jQuery, Dojo, etc) what to do next.

Most of the time, the process is:

1. Post a form with an xhrPOST call
2. Do work on the server
3. Return JSON/xml/text
4. Handle that return value and have javascript determine what to do

A concrete example is something like this:

1. User submits patient vitals
2. Server validates and returns {success:"Vitals received."} or {error:"Invalid number"}
3. The javascript xhr callback handler determines what to do next (close a dialog, refresh the form for a new entry or call attention to a missing field)

Edit: Link to some Python web frameworks: link

Link to a basic tutorial on return JSON in Django (with JQuery) link

One other note: When you are using JSON, it is technically no longer AJAX, as the X stands for XML.

Comments

[MrCooL]

Thanks a lot man ! This is exactly what I want. So far, I've tested this with Google Chrome only.

[MrCooL]

Hi @Nick, do you know how to return JSON/xml/text from server side using Python? Any quick example that you can show? Thanks in advance !

[Nicholas Orlowski]

well, We're using Django so a different python (or ruby, w/e) framework would look different, but in Django it would be something like: `def myview(response): ...do some work answer="{success:'Vitals received'}" return HttpResponse(answer) ' This is the most basic way to return JSON with Django, and the principle is the same, you just return stuff in '{}' to your response stream. In a real environment you would probably use the json module that comes with Python (or whatever language you are using).