strange behavior using $('.ajax_form').ajaxForm();

jquery ajaxform
c.sokun picture c.sokun · May 26, 2009 · Viewed 7.7k times · Source

It is my first time to apply jquery ajaxForm on a class like the following

<form class="ajax_form"...><input type="text" name="q" /><input type="submit" /></form>
<form class="ajax_form"...><input type="text" name="q" /><input type="submit" /></form>

<script>
$('.ajax_form').ajaxForm({
  dataType: 'json',
  error: ajaxErrorHandler,
  success: function(response) { // do some ui update .. }
});
</script>

Now after Ajax call is completed I always get into error section although firebug didn't report any errors response not sure what I did wrong.

Answer

C Dolan picture C Dolan · Sep 17, 2009

This may or not be appropriate in this case, but I'll provide it because it would have been useful to me when I was searching for the answer to a similar problem. If you are submitting a "multipart/form-data" form with file upload in Firefox, jquery.form will use an iframe to submit the form. If the Content-Type of your return data is text/plain, the iframe will wrap the resulting text in <pre> tags which will hork the jquery json parser and give you a parser error even though Firebug shows the response and even the json correctly.

This caused me no end of headaches before I figured it out (with help from this thread: http://www.extjs.com/forum/archive/index.php/t-17248.html).

The answer in my case was to make sure the response Content-Type was "text/html" (which was counter-intuitive, at least for me).

Related questions

jquery form not working as expected. ajaxForm is not a function

I am trying to use jquery form but it sais in the concole ajaxForm is not a function. The jquery.form.js is properly included and the code is in a document ready function... This is the script: $("#apply-form").ajaxForm({ …

Read More
how to perform some action before submit form via .ajaxForm()?

i am using ajaxForm() frame work to send my data without reloading my page. $('#ReplayForm').ajaxForm({ success : function(data){ alert("Success"); } }); now, i want to check some condition before submitting the form and if the condition is false then …

Read More
ajaxForm not working

Here is my ajaxForm code var qx = $('#XText').attr('value'); $.ajax({ type: "post", url: "qsubmit.php", data: "q="+qx, success: function() { } }); And the insert code include('db-config.php'); $q = $_POST['q']; $insert_ann = sprintf("INSERT INTO med_tab (med_…

Read More