elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Curso de javascript por TickTack


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [solucionado] petición xhr no envia nada al primer click (dropzone)
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [solucionado] petición xhr no envia nada al primer click (dropzone)  (Leído 2,662 veces)
gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
[solucionado] petición xhr no envia nada al primer click (dropzone)
« en: 20 Enero 2017, 17:21 pm »

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):

Código
  1. (function($) {
  2.    $.fn.formly = function(callback) {
  3.        $('a#click').on('click', function() {
  4.            if (callback) {
  5.  
  6.                var clientInfo = form.find(':input').serializeArray();
  7.  
  8.                clientInfo.splice(-1, 1);
  9.                clientInfo.splice(-1, 1);
  10.  
  11.                // Password hash function
  12.                var p = $('#reg_pwd').val(),
  13.                    c = $('#confirm_pwd').val(),
  14.                    shaObj = new jsSHA('SHA-512', 'TEXT');
  15.  
  16.                shaObj.update(p);
  17.                var p_hash = shaObj.getHash("HEX"),
  18.                    shaObj = new jsSHA('SHA-512', 'TEXT');
  19.  
  20.                shaObj.update(c);
  21.                var c_hash = shaObj.getHash("HEX");
  22.  
  23.                callback(clientInfo, p_hash, c_hash);
  24.            }
  25.        });
  26.    };
  27. })( jQuery );

Y el init de dropzone:

Código
  1. init: function() {
  2.    var myDropzone = this;
  3.  
  4.    $('#register').formly(function(clientInfo, p_hash, c_hash) {
  5. console.log(myDropzone);
  6.        myDropzone.processQueue();
  7.  
  8.        myDropzone.on('sending', function(data, xhr, formData) {
  9.            formData.append('client_info', JSON.stringify(clientInfo)),
  10.            formData.append('particular', 0),
  11.            formData.append('reg_pwd', p_hash),
  12.            formData.append('confirm_pwd', c_hash)
  13.        });
  14.  
  15.    });
  16.  
  17.    myDropzone.on('success', function(file, response) {
  18.        myDropzone.removeFile(file);
  19.        console.log( 'Error: ' + response );
  20.    });
  21. }

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!


« Última modificación: 21 Enero 2017, 18:18 pm por gAb1 » En línea

gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: petición xhr no envia nada al primer click
« Respuesta #1 en: 21 Enero 2017, 18:18 pm »

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):

Código
  1. init: function() {
  2.  
  3.    var myDropzone = this,
  4.        client = {};
  5.  
  6.    function getClientData(clientInfo, p_hash, c_hash) {
  7.        client.clientInfo   = clientInfo;
  8.        client.p_hash       = p_hash;
  9.        client.c_hash       = c_hash;
  10.        myDropzone.processQueue();
  11.    };
  12.  
  13.    $('#register').formly(function(clientInfo, p_hash, c_hash) {
  14.  
  15.        getClientData(clientInfo, p_hash, c_hash);
  16.  
  17.    });
  18.  
  19.    myDropzone.on('sending', function(data, xhr, formData) {
  20.        formData.append('client_info', JSON.stringify(client.clientInfo)),
  21.        formData.append('particular', 0),
  22.        formData.append('reg_pwd', client.p_hash),
  23.        formData.append('confirm_pwd', client.c_hash)
  24.    });
  25.  
  26.    myDropzone.on('success', function(file, response) {
  27.        myDropzone.removeFile(file);
  28.        console.log( 'Error: ' + response );
  29.    })
  30.  
  31. }

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.


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines