complemento de formulario jquery, sin manejo de errores

Question

Parece que no hay ningún recurso de manejo de errores en el complemento Jquery.Form, lo que es muy frustrante. Aunque la documentación dice que podemos usar las opciones $ .ajax, todavía no puedo utilizar la opción 'error' cuando el servidor devuelve un error, especialmente las series 500 y 400. ¿Es que este complemento no puede manejar ningún error del servidor o es un error, etc.? ¿Puede alguien decirme cómo puedo manejar los errores (400, 500, etc.) con este complemento? Necesito tu ayuda ... Todo lo que quiero es un simple manejo de errores ... Gracias.

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

acabo de enterar que el jquery.form propio plugin no maneja error del servidor, ya que no tiene acceso a las cabeceras de respuesta debido a la forma etiqueta 'archivo de entrada' maneja la carga de archivos. Así que creo que el W3C necesita revisar esa etiqueta problemática que no solo no le permite diseñarla con CSS sino que además no facilita el manejo de la respuesta del servidor.

Tiene que haber una manera de evitarlo, aunque ...

Avisadme si he dicho algo malo y que me haga saber sus pensamientos sobre esta etiqueta 'de entrada de archivo' ...

Answer 2

En opciones

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

no hay una llamada de activación en caso de error. El complemento simplemente se cuelga cuando obtienes 500 o 404. El éxito solo está actuando sobre el 'éxito', así que eso es todo lo que tenemos por ahora.

Answer 3

El Formulario jQuery Plugin hace errores mango y el documentation lo cierto al afirmar que puede utilizar las opciones de $ .ajax. Sin embargo, hay dos modos en los que se ejecutará el complemento: normal y carga de archivos. El problema que tiene es porque está realizando una carga de archivo . (No dice esto pero tiene "#uploadingImg" y "#polygonUploadForm" y, en razonamiento recursivo, tiene este problema)

Esto se afirma comúnmente, pero no se puede cargar un archivo con AJAX . Esta solución alternativa es usar un iframe. El formulario envía las solicitudes POST una solicitud HTTP normal y carga la respuesta del servidor en el iframe. El complemento agarra la respuesta y voila. Como esto sucede como una solicitud HTTP normal, las reglas y el comportamiento de $ .ajax no se aplican a (porque no se está utilizando). Lo único que puede hacer el complemento de Formulario es tratar lo que sea como un éxito. En términos de código, la carga de archivos nunca activará el atributo 'error' asignado a ajaxForm() o ajaxSubmit(). Si realmente desea probar que esto no es una solicitud AJAX, adjunte un controlador ajaxComplete() al formulario (es decir, completamente independiente de los métodos del complemento Formulario). No se activará tampoco. O mira el panel Net-> XHR de Firebug.

Así que eso es todo: la carga no es una solicitud de AJAX. Lo mejor que puede hacer es trabajar dentro de las devoluciones de llamada 'exitosas' o 'completas' de ajaxForm()/ajaxSubmit(). Está limitado sin acceso al código de respuesta HTTP real, pero puede examinar la respuesta. Si la respuesta está vacía o no es lo que esperaba, puede desencadenar la devolución de llamada de 'error' llamando al xhr.abort(). En lugar de hacer "si (buena respuesta) {¡yay!} Else {oh no!}", Llamar a abort() y desencadenar "error" hace que el código sea un poco más claro y más comprensible en mi humilde opinión.Aquí hay un ejemplo de código:

$("#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 respuesta mala voluntad imprimirá esto en el registro de la consola:

[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 

No sé por qué la devolución de llamada 'completo' se ejecuta dos veces - cualquier persona? Una última cosa, lea this thread si está preguntando por qué jQuery o el complemento de formulario no puede simplemente leer los encabezados HTTP del iframe.

Answer 4

Para cualquiera que todavía necesitan esto, esta es una manera de conseguir que funcione

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

Formulario plugin de jQuery manejar el éxito de estado de respuesta del servidor (código 200), creo que la información es suficiente.

Desde que se puede crear usted RESPUESTA lado del servidor de estado

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

de returnJson curso es una función para enviar los datos JSON (se puede construir uno o haciendo dentro de su método)

en el frontend en el control de éxito (se activa cuando la respuesta es 200) solo necesita verificar su campo de estado (en este caso 'respuesta'), ejemplo a continuación:

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 

      } 


    }