jQuery form plugin, pas de gestion des erreurs

le Plugin jQuery Form gérer les erreurs et les documentation a raison de dire qu'il peut utiliser le $.options ajax. Cependant, il y a deux modes dans lesquels le plugin s'exécute - normal et File upload. Le problème que vous avez est que vous effectuez un téléchargement de fichiers. (Vous ne dites pas cela mais vous avez " # uploadingImg "et" #polygonUploadForm " et, raisonnement récursif, vous avez ce problème.)

C'est en d'autres termes, mais vous ne pouvez pas télécharger un fichier avec AJAX. Cette solution consiste à utiliser une iframe. Form submit affiche une requête HTTP normale et charge la réponse du serveur dans l'iframe. Le plugin saisit la réponse et voilà. parce que cela se produit comme une requête HTTP normale, les règles et les comportements de $.ajax ne s'applique pas (car il n'est pas utilisé). La seule chose que Form plugin peut faire est de traiter tout ce qu'il obtient comme un succès. En termes de code, le téléchargement de fichier ne déclenchera jamais l '"erreur" attribut assigné à ajaxForm() ou ajaxSubmit(). Si vous voulez vraiment prouver que ce n'est pas une requête AJAX, attachez un handler ajaxComplete() au formulaire (c'est-à-dire complètement indépendant des méthodes du plugin de formulaire). Il ne sera pas déclenché. Ou regardez le panneau Net->XHR de Firebug.

Donc, c'est que le téléchargement n'est pas une requête AJAX. Le mieux que vous puissiez faire est de travailler avec les callbacks 'success' ou 'complete' d'ajaxForm()/ajaxSubmit(). Vous êtes limité sans accès au Code de réponse HTTP, mais vous pouvez examiner la réponse. Si la réponse est vide ou non ce que vous attendez, vous pouvez déclencher le "erreur" de rappel en appelant xhr.abort(). Au lieu de faire " si (bonne réponse) {yay!} else {oh non!} ", appeler abort () et déclencher 'error' rend le code un peu plus propre et plus compréhensible IMHO. Voici un exemple de code:

$("#uploadForm").ajaxForm({
    success: function(response, textStatus, xhr, form) {
        console.log("in ajaxForm success");

        if (!response.length || response != 'good') {
            console.log("bad or empty response");
            return xhr.abort();
        }
        console.log("All good. Do stuff");
    },
    error: function(xhr, textStatus, errorThrown) {
        console.log("in ajaxForm error");
    },
    complete: function(xhr, textStatus) {
        console.log("in ajaxForm complete");
    }
});

une réponse de mauvaise volonté va l'imprimer dans le journal de la console:

[jquery.form] state = uninitialized
"NetworkError: 404 NOT FOUND - http://server/fileupload/"
[jquery.form] state = loading
[jquery.form] isXml=false
in ajaxForm success
bad or empty response
[jquery.form] aborting upload... aborted
in ajaxForm error
in ajaxForm complete
in ajaxForm complete

je ne sais pas pourquoi le "complet" rappel est exécuté deux fois par quelqu'un? Une dernière chose, lire ce fil si vous demandez pourquoi jQuery ou le plugin Form ne peuvent pas simplement lire les en-têtes HTTP de l'iframe.

Viens de découvrir que le jquery.form plugin lui-même ne gère pas l'erreur du serveur, car il n'a pas accès aux en-têtes de réponse en raison de la façon dont la balise "file input" gère le téléchargement de fichiers. Donc je pense que le W3C doit revoir cette balise gênante qui non seulement ne vous permet pas de la coiffer avec CSS mais ne rend pas la gestion de la réponse du Serveur Facile.

Il doit y avoir un moyen de contourner cela...

Laissez-moi savoir si j'ai dit quelque chose de mal, et laissez-moi savoir votre réflexions sur cette balise 'file input'...

jQuery form Plugin gérer le succès de l'état de la réponse du serveur (code 200), je pense que l'information est suffisante.

à partir de cela, vous pouvez créer votre côté serveur de statut de réponse

            return $this->returnJson(array(
                'response' => 'success',//error or whatever
                'data' => 'Succesfully saved in the database'
            ));

bien sûr returnJson est une fonction pour envoyer les données Json (vous pouvez en construire une ou faire à l'intérieur de votre méthode)

dans la poignée frontend on success (est déclenché lorsque la réponse est 200), vous avez juste besoin de vérifier votre champ status (dans ce cas 'response'), exemple ci-dessous:

  var options = {
        dataType : 'json',
        success: handleResponse
    };


    function handleResponse (responseText, statusText, xhr, $form){

          if(responseText.response == 'success') {
                  //do something

                }else if(responseText.response == 'error'){
                    //do something

            }


    }

dans options

var options = { 
    target:        '#output2',    
    beforeSubmit:  showRequest,   
    success:       showResponse,  
timeout:    1000
}; 

il n'y a pas de déclenchement d'appel en cas d'erreur. Le plugin se bloque quand vous obtenez un 500 ou un 404. Le succès ne consiste qu'à agir sur le "succès", c'est donc tout ce que nous avons pour le moment.

Pour tout le monde encore besoin de cela, c'est une façon de la faire fonctionner

function submitForm()
{
    var isSuccess   = false,
        options = {
            url         : "posturl.php",
            type        : 'POST',
            dataType    : 'json',
            success:function(msg) {
                //set the variable to true
                isSuccess = true;

                //do whatever
            },
            complete: function () {
                if (isSuccess === false) {
                    //throw the error message
                }
            }
        };

    //Ajax submit the form
    $('#your_form').ajaxSubmit(options);

    // always return false to prevent standard browser submit and page navigation
    return false;
 }