Databases
StackOverflow2013
Postsdbo
POIssue with Django form when submitted using jQuery form plugin
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIssue with Django form when submitted using jQuery form plugin
    text
    copied!<p>when submitting my form using jQuery form plugin, the request received by the target view is different than that received when the form is submitted in the standard way (with no javascript), and my Django template does not render as expected. When submitted in the standard way, the template renders the form errors (the "form.[field_name].errors), while it doesn't when submitted via javascript. Using the javascript submit, how can I get a request allowing to render the template as it does using the standard submit? The code and the diff between the request objects received in both cases are shown below.</p> <p>thanks jul </p> <p>javascript code:</p> <pre><code>var is_geocoded = false; var interval; $(function(){ $("#submit").click(function() { var options = { beforeSubmit: getPosition, // pre-submit callback success: showResponse // post-submit callback }; // bind form using 'ajaxForm' $('#addresto').ajaxForm(options); }); }); function getPosition() { var geocoder = new GClientGeocoder(); var country = $("#id_country").val(); var city = $("#id_city").val(); var postal_code = $("#id_postal_code").val(); var street_number = $("#id_street_number").val(); var street = $("#id_street").val(); var address = street_number+", "+street+", "+postal_code+", "+city+", "+country; geocoder.getLatLng( address, function(point) { if (point) { $("#id_latitude").val(point.lat()) $("#id_longitude").val(point.lng()) is_geocoded = true; } else { is_geocoded = true; } }); interval = setInterval("doSubmit()", 500); return false; } function doSubmit() { if (is_geocoded) { $("#addresto").ajaxSubmit(); clearInterval(interval); } } </code></pre> <p>Django template code:</p> <pre><code>&lt;form id="addresto" action="" method="POST"&gt; &lt;p&gt;&lt;label for="id_name"&gt;Name:&lt;/label&gt;{{form.name.errors}} {{ form.name }} &lt;/p&gt; &lt;p&gt;&lt;label for="id_country"&gt;Country:&lt;/label&gt;{{form.country.errors}} {{ form.country }} &lt;/p&gt; &lt;!-- more stuff --&gt; &lt;p style="clear: both;"&gt;&lt;input type="Submit" id="submit" value="Submit" /&gt;&lt;/p&gt; &lt;/form&gt; </code></pre> <p>Here's the difference between the requests received by the view with standard submit and with javascript submit:</p> <pre><code>xxx@xxx:~$ diff javascript_submit standard_submit 7c7 &lt; 'CONTENT_TYPE': 'application/x-www-form-urlencoded; charset=UTF-8', --- &gt; 'CONTENT_TYPE': 'application/x-www-form-urlencoded', 24c24 &lt; 'HTTP_ACCEPT': '*/*', --- &gt; 'HTTP_ACCEPT': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8', 28d27 &lt; 'HTTP_CACHE_CONTROL': 'no-cache', 33d31 &lt; 'HTTP_PRAGMA': 'no-cache', 36d33 &lt; 'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest', 70c67 &lt; 'wsgi.input': &lt;socket._fileobject object at 0x891d064&gt;, --- &gt; 'wsgi.input': &lt;socket._fileobject object at 0x898b09c&gt;, </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload