jquery plugins - template - plugin de forma jquery, sin manejo de errores

jquery plugin template

Question

Parece que no hay facilidad de manejo de errores en el complemento Jquery.Form, lo cual es muy frustrante. Aunque la documentación dice que podemos usar las opciones $ .ajax, todavía no puedo usar 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 su 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 descubrir que el complemento jquery.form no maneja el error del servidor, porque no tiene acceso a los encabezados de respuesta debido a la forma en que la etiqueta ''entrada de archivo'' maneja la carga del archivo. Así que creo que el W3C necesita revisar esa etiqueta problemática que no solo no le permite personalizarla con CSS, sino que también facilita el manejo de la respuesta del servidor.

Debe haber una manera de evitarlo ...

Avíseme si dije algo mal y hágame 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 llamada de activación en caso de error. El complemento simplemente se cuelga cuando obtienes un 500 o un 404. El éxito solo se basa en el ''éxito'', así que eso es todo lo que tenemos por ahora.

Answer 3

JQuery Form Plugin maneja los errores y la documentation es correcta al indicar que puede usar las opciones $ .ajax . Sin embargo, hay dos modos en los que el complemento se ejecutará: normal y carga de archivos. El problema que tiene es que está realizando una carga de archivos . (No dice esto, pero tiene "#uploadImg" y "#polygonUploadForm" y, razonamiento recursivo, tiene este problema.)

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

Así que eso es - la carga no es una solicitud AJAX. Lo mejor que puedes 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, realmente puede activar la devolución de llamada ''error'' llamando a xhr.abort() . En lugar de hacer "if (good response) {yay!} Else {oh no!}", Llamar a abort () y desencadenar ''error'' hace que el código sea un poco más limpio y comprensible. 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 de 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 ''completa'' se ejecuta dos veces, ¿alguien? Una última cosa, lea este hilo si está preguntando por qué jQuery o el complemento Form no pueden simplemente leer los encabezados HTTP del iframe.

Answer 4

Jquery Form Plugin maneja el estado de respuesta del servidor con éxito (código 200), creo que la información es suficiente.

A partir de eso puedes crear tu servidor de estado de respuesta.

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

por supuesto, returnJson es una función para enviar los datos Json (puede crear uno o hacerlo dentro de su método)

en la interfaz, en caso de éxito (se dispara 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

            }


    }

Answer 5

Para cualquier persona que aún necesite esto, esta es una manera de hacerlo funcionar.

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