Foro de elhacker.net

Hola, tengo un problema al enviar información al servidor, resulta que la primera vez que hago click en el boton no se envia nada, pero a partir de la segunda vez ya se envia la petición...

Resulta que estoy usando dropzone para subir imagenes, además tengo un formulario que quiero validar con javascript (más que nada para que el usuario no tenga problema y al enviarlo al servidor todo valide). Entonces, primero inicializado dropzone y dentro del init llamo al plugin que valida "en tiempo real" los campos del formulario. En el callback (una vez el formulario este validado) es cuando proceso la cola de las imagenes y seguidamente añado los datos del formulario para que se envie todo junto.

Este es el plugin (solo la parte que llama al callback):

(function($) {
    $.fn.formly = function(callback) {
        $('a#click').on('click', function() {
            if (callback) {
 
                var clientInfo = form.find(':input').serializeArray();
 
                clientInfo.splice(-1, 1);
                clientInfo.splice(-1, 1);
 
                // Password hash function
                var p = $('#reg_pwd').val(),
                    c = $('#confirm_pwd').val(),
                    shaObj = new jsSHA('SHA-512', 'TEXT');
 
                shaObj.update(p);
                var p_hash = shaObj.getHash("HEX"),
                    shaObj = new jsSHA('SHA-512', 'TEXT');
 
                shaObj.update(c);
                var c_hash = shaObj.getHash("HEX");
 
                callback(clientInfo, p_hash, c_hash);
            }
        });
    };
})( jQuery );

Y el init de dropzone:

init: function() {
    var myDropzone = this;
 
    $('#register').formly(function(clientInfo, p_hash, c_hash) {
console.log(myDropzone);
        myDropzone.processQueue();
 
        myDropzone.on('sending', function(data, xhr, formData) {
            formData.append('client_info', JSON.stringify(clientInfo)),
            formData.append('particular', 0),
            formData.append('reg_pwd', p_hash),
            formData.append('confirm_pwd', c_hash)
        });
 
    });
 
    myDropzone.on('success', function(file, response) {
        myDropzone.removeFile(file);
        console.log( 'Error: ' + response );
    });
}

La primera vez que hago click, puedo ver en consola el objecto myDropzone, sin embargo no se envia la petición al servidor. La segunda vez, si que envia la petición y recibo respuesta.

¿Que puedo estar haciendo mal?

Gracias!

Tengo una vaga idea de porqué esta actuando de esa manera, pero no soy capaz de explicarlo correctamente (no tengo los conocimientos necesarios).

He encontrado una manera mejor de hacerlo (que espero que sea apropiada y haga de forma eficiente el trabajo):

init: function() {
 
    var myDropzone = this,
        client = {};
 
    function getClientData(clientInfo, p_hash, c_hash) {
        client.clientInfo   = clientInfo;
        client.p_hash       = p_hash;
        client.c_hash       = c_hash;
        myDropzone.processQueue();
    };
 
    $('#register').formly(function(clientInfo, p_hash, c_hash) {
 
        getClientData(clientInfo, p_hash, c_hash);
 
    });
 
    myDropzone.on('sending', function(data, xhr, formData) {
        formData.append('client_info', JSON.stringify(client.clientInfo)),
        formData.append('particular', 0),
        formData.append('reg_pwd', client.p_hash),
        formData.append('confirm_pwd', client.c_hash)
    });
 
    myDropzone.on('success', function(file, response) {
        myDropzone.removeFile(file);
        console.log( 'Error: ' + response );
    })
 
}

Basicamente, el problema era que las funciones de dropzone no deben estar dentro de un callback, por lo que las he sacado fuera (donde deben estar) y he creado una funcion para poblar(? populate) un objecto dentro del init y empezar la subida de la imagen.