plug-in modulo jQuery, nessun errore di gestione

Question

Sembra che non ci siano funzionalità di gestione degli errori nel plugin Jquery.Form, che è molto frustrante. Anche se la documentazione dice che possiamo usare le opzioni $ .ajax, non riesco ancora a utilizzare l'opzione 'errore' quando il server restituisce un errore, specialmente le serie 500 e 400. È che questo plugin non può gestire alcun errore dal server o è un bug, ecc? Qualcuno può dirmi come posso gestire gli errori (400, 500, ecc.) Con questo plugin? Ho bisogno del tuo aiuto ... Tutto quello che voglio è un semplice errore nella gestione ... Grazie.

$("#uploadingImg").hide(); 

var options = {//Define ajax options 
    type: "post", 
    target: "#responsePanel", 
    beforeSend: function(){ 
     $("#uploadingImg").show(); 
    }, 
    complete: function(xhr, textStatus){ 
     $("#uploadingImg").hide(); 
    }, 
    success: function(response, statusString, xhr, $form){ 
     // I know what to do here since this option works fine 
    }, 
    error: function(response, status, err){ 
     // This option doesn't catch any of the error below, 
     // everything is always 'OK' a.k.a 200 
     if(response.status == 400){ 
      console.log("Sorry, this is bad request!"); 
     } 
     if(response.status == 601){ 
      sessionTimedOut(); 
     } 
    } 
} 
$("#polygonUploadForm").submit(function(){ 
    $(this).ajaxSubmit(options); // Using the jquery.form plugin 
    return false; 
}); 

Answer 1

appena scoperto che il jquery.form plug-in se non gestire errore del server, perché non ha accesso alle intestazioni di risposta a causa del modo in cui tag 'ingresso file' gestisce upload di file. Quindi penso che il W3C abbia bisogno di rivedere quel fastidioso tag che non solo non consente di modificarlo con i CSS, ma che non semplifica la gestione delle risposte del server.

Ci deve essere un modo intorno ad esso anche se ...

Fatemi sapere se ho detto qualcosa di sbagliato e fatemi sapere i vostri pensieri su questo tag 'ingresso file' ...

Answer 2

Opzioni

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

in caso di errore non è presente alcuna chiamata di attivazione. Il plug-in si blocca solo quando ottieni un 500 o 404. Il successo sta solo agendo sul "successo", quindi è tutto ciò che abbiamo per ora.

Answer 3

Il jQuery Plugin Modulo fa errori maniglia e la documentation è corretto nel dichiarare è possibile utilizzare le opzioni di $ .ajax. Tuttavia ci sono due modalità di esecuzione del plug-in: normale e caricamento file. Il problema riscontrato è che si sta eseguendo un caricamento di file . (Non lo dici ma hai "#uploadingImg" e "#polygonUploadForm" e, ragionamento ricorsivo, stai riscontrando questo problema.)

Questo è comunemente indicato, ma non è possibile caricare un file con AJAX . Questa soluzione alternativa è utilizzare un iframe. Il modulo invia ai POST una normale richiesta HTTP e carica la risposta del server nell'iframe. Il plugin afferra la risposta e voilà. Poiché ciò accade come una normale richiesta HTTP, le regole e i comportamenti di $ .ajax non si applicano (perché non viene utilizzato). L'unica cosa che il plug-in Form può fare è trattare tutto ciò che ottiene come un successo. In termini di codice, il caricamento dei file non attiverà mai l'attributo 'error' assegnato a ajaxForm() o ajaxSubmit(). Se vuoi davvero dimostrare che questa non è una richiesta AJAX, collega un gestore ajaxComplete() al modulo (cioè completamente indipendente dai metodi del plugin del modulo). Non verrà attivato neanche. Oppure guarda il pannello Net-> XHR di Firebug.

Ecco, il caricamento non è una richiesta AJAX. Il meglio che puoi fare è lavorare all'interno dei callback 'successi' o 'completi' di ajaxForm()/ajaxSubmit(). Sei limitato senza accesso al codice di risposta HTTP effettivo, ma puoi esaminare la risposta. Se la risposta è vuota o non è quella che ci si aspetta, è possibile attivare la richiamata di 'errore' chiamando lo xhr.abort(). Invece di fare "if (good response) {yay!} Else {oh no!}", Chiamando abort() e attivando "error" rende il codice IMHO un po 'più pulito e comprensibile.Ecco un esempio di codice:

$("#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"); 
    } 
}); 

Una risposta volontà cattiva stamperà questo nel log della 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 

Non so il motivo per cui la richiamata 'completo' viene eseguito due volte - a nessuno? Un'ultima cosa, leggi this thread se ti stai chiedendo perché jQuery o il plugin del modulo non possono semplicemente leggere le intestazioni HTTP dell'iframe.

Answer 4

Per chiunque ancora bisogno di questo, questo è un modo di ottenerlo a lavorare

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

Answer 5

Jquery Modulo Plugin gestire il successo stato di risposta del server (codice 200), credo che l'informazione è sufficiente.

Da che è possibile creare voi risposta lato server stato

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

naturalmente returnJson è una funzione per inviare i dati JSON (si può costruire una o fare all'interno del vostro metodo)

nel frontend in caso di successo (viene attivato quando la risposta è 200) è sufficiente controllare il campo dello stato (in questo caso 'risposta'), esempio di seguito:

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 

      } 


    }