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

Question

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 1

I think you would need a url and post type for the form to send the data somewhere?

this is how they set it up on jquery.com:

$("#myform").ajaxForm({
   url: "mypage.php",
   type: "POST"
 });

Answer 2

@c.sokun: Using a class shouldn't be a problem here, as long as there's only 1 form using the class. Two forms with the same class on the same page will definitely cause a hiccup (refer to your code... or is it a typo?)

Have you tried using FireBug and checked the parameters passed and the values returned? That should be the first!

Answer 3

Is ajaxErrorHandler defined elsewhere? I tried your code, and it worked perfectly. What version of jQuery and jQuery form are you using?

This is the code I tried. With a file named 'test.json' containing "{test:'hello world'}" in the same directory as this test:

<script type="text/javascript" src="http://malsup.com/jquery/jquery-1.2.6.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://malsup.com/jquery/form/jquery.form.js?2.28"&gt;&lt;/script&gt;

<form class="ajax_form" action="test.json" method="post"><input type="text" name="q" /><input type="submit" /></form>
<br/>
<form class="ajax_form" action="test.json" method="post"><input type="text" name="q" /><input type="submit" /></form>

<script>
$('.ajax_form').ajaxForm({
  dataType: 'json',
  error: function() {alert("error");},
  success: function(response) {alert(response.test);}
});
</script>

Answer 4

Well, I've checked in API and didn't find any reference to options field called "error", so probably thats the reason. Check here.

Answer 5

The problem is with your json data. These are probably not well formed and can't be parsed. In that case the success function won't be called.

You can verify this if you print the messages of the error callback. Use the following code:

url = url + "?" + $(".ajaxForm").serialize();
$(".ajaxForm").ajax({url: url, dataType: "json", type : "post",
                    success: function(response) {},
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log(textStatus);
                        console.log(errorThrown);
                    }});

One of the print-outs should be something like "parser error".

Answer 6

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).