Submit a form without updating / redirecting 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 final results to be similar to how Facebook comment works.

I am currently using jQuery Form to create Ajax. However, this does not give me the user experience that I want, because:

• After submitting using the jQuery form, the URL of the address bar is updated to the form I submitted.

• He updated the page. I especially do not like it, say, I was at the bottom of the page scrolling to the maximum. After submitting the form, she refreshed the page and the focus was redirected to the top of the page.

I hope I made my point on what I want. I need something like a Facebook comment system. Someone commented and then the comment was sent without any page refresh 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(); }); 

Thus, python code will have to redirect the page from its code on the server side to handle sending, so redirect the page to this URL, 'main_URL.com'

With jQuery codes shown, the results are:

• The URL appeared in the address bar: main_URL.com/form_action_url <--- This is the form action that I set to submit the form.

• The page is redirected to the page that I installed on the server side.

I am confused by this Ajax experience.

Answer 1

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

jsFiddle

This will not refresh the page, as the message comes through an AJAX call. This allows you to run the function after the message has passed and you want (if the message returns data, it will be available here ... if you want to do another GET or POST after this success was successful, you can do it here ... so on, etc.)

Answer 2

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

Are you submitting a form using the submit button? If so, then the jQuery form should handle everything and DO NOT refresh the page.

If you submit the form in JavaScript, your code should look like jQuery form examples:

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

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

In order for your system to work, you need to make it 2-phase:

• Submit Comment
• add a comment to the remaining comments (or get new comments from the server, and then add)

What does your current installation look like?

Answer 3

I have a very dynamic site that uses this technology everywhere. We use Dojo, but the principles are the same. Like the above posters, your form should have onsubmit = "return false"; as an attribute (or as an object that it represents), so that the page does not reload.

On the server side, we do not use redirection, but respond using JSON (or XML or something else) and pass the response handler (jQuery, Dojo, etc.) what to do next.

In most cases, the process:

• Submit a form calling xhrPOST
• Work on the server
• Return JSON / xml / text
• Refer to this return value and determine what to do javascript

A specific example looks something like this:

• The user sends vitality to the patient
• The server checks and returns {success: "Received Vitals".} Or {error: "Invalid number"}
• The javascript xhr callback handler determines what to do next (closing the dialog box, updating the form for a new record, or drawing attention to the missing field)

Edit: Link to some Python web frameworks: link

Link to the basic tutorial on returning JSON in Django (with jQuery) link

One more note: when you use JSON, this is technically no longer AJAX, since X stands for XML.