comportement étrange en utilisant $ ('. Ajax_form'). AjaxForm();

Question

Il est ma première fois d'appliquer jquery ajaxForm sur une classe comme les suivantes

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

Maintenant, après appel Ajax est terminé, je reçois toujours dans la section d'erreur bien que Firebug n'a pas signalé de réponse de toute erreur ne sais pas ce J'ai mal fait.

Answer 1

Je pense que vous auriez besoin d'un type d'URL et de message pour que le formulaire envoie les données quelque part?

c'est la façon dont ils le mettre en place sur jquery.com:

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

Answer 2

@ c.sokun: Utilisation d'une classe ne doit pas être un problème, tant qu'il n'y a que 1 formulaire en utilisant la classe. Deux formes avec la même classe sur la même page va certainement provoquer un accident de parcours (voir votre code ... ou est-ce une faute de frappe?)

Avez-vous essayé d'utiliser FireBug et vérifié les paramètres passés et les valeurs renvoyées ? Cela devrait être le premier!

Answer 3

ajaxErrorHandler est défini ailleurs? J'ai essayé votre code, et cela a fonctionné parfaitement. Quelle version de jQuery et de formulaire jQuery utilisez-vous?

C'est le code que j'ai essayé. Avec un fichier nommé « test.json » contenant « {test: « bonjour »} » dans le même répertoire que ce test:

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

<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

Eh bien, je l'ai vérifié dans l'API et ne trouve aucune référence au champ d'options appelé "erreur", donc probablement c'est la raison. Vérifiez here.

Answer 5

Le problème provient de vos données json. Ceux-ci ne sont probablement pas bien formés et ne peuvent pas être analysés. Dans ce cas, la fonction de réussite ne sera pas appelée.

Vous pouvez vérifier cela si vous imprimez les messages du rappel d'erreur. Utilisez le code suivant:

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); 
        }}); 

L'une des impressions doit ressembler à "erreur d'analyseur".

Answer 6

Cela peut ou non être approprié dans ce cas, mais je vais le fournir car il m'aurait été utile lorsque je cherchais la réponse à un problème similaire. Si vous envoyez un formulaire "multipart/form-data" avec le téléchargement de fichiers dans Firefox, jquery.form utilisera un iframe pour envoyer le formulaire. Si le type de contenu de vos données de retour est text/plain, iframe encapsulera le texte résultant en < pré > tags qui verront l'analyseur jquery json et vous donneront une erreur d'analyseur même si Firebug affiche la réponse et même le json correctement . Cela m'a causé pas mal de maux de tête avant que je l'ai compris (avec l'aide de ce fil: http://www.extjs.com/forum/archive/index.php/t-17248.html).

La réponse dans mon cas était de s'assurer que la réponse Content-Type était "text/html" (ce qui était contre-intuitif, au moins pour moi).