¿Por qué mi llamada ajax está recargando la página?

25 ene 2016, 21:21:11
Vistas: 37.8K
Votos: 2

Estoy intentando subir un archivo de audio mediante un formulario AJAX.

Aquí está mi HTML en la plantilla profile-edit.

<form method="post" id="my_upload_form" action="" enctype="multipart/form-data">
  <input type="file" name="file" id="my_file_input" accept="audio/*">                                      
  <input type="submit" class="btn-submit btn-sumary" value="subir archivo de audio" name="submit" id="my_audio_submit">                                      
  <div id="my_error_report"></div>                                  
</form>

Aquí está mi jQuery:

$('#my_upload_form').submit(function () {

    var css = 'font:Helvetica; color:red; font-size:1.5em; padding:inherit;';
    var html = '<strong><em> ' + '<p style="' + css + '">' + '*';
    var endHtml = '</p></em></strong>';

    var formData = new FormData();
    var fileArray = jQuery('#my_file_input').prop('files');

    if(fileArray.length > 0) {
        var theTrack = fileArray[0];
        formData.append("music", theTrack);
    } else {
      jQuery('#my_error_report').html( html + 'ninguna pista seleccionada' + endHtml );
      return false;
    }

    $.ajax({
      url: '/wp-admin/admin-ajax.php',
      type: 'POST',
      // async: false,
      data: {
          action      : 'my_track_upload',
          some_data   : formData
      },
      // dataType: 'text'
      }).success( function( data ) {
          /* ¡Ganaste! */
          alert('ajax fue llamado exitosamente');
      }).fail( function( data ) {
          /* Perdiste, mostrar error */
          alert('ajax falló en la llamada');
    });
    return false;  
}); 

Finalmente aquí está mi código del plugin:

add_action('wp_ajax_my_track_upload', 'my_track_upload');
function my_track_upload()
{
  die('hola');
}

Problema (más por venir): ¿Por qué se está recargando la página? Retorno false en el evento 'submit' de jQuery.

************************EDICIÓN********************

Cambié mi código al siguiente y ahora funciona, aunque no estoy seguro específicamente dónde estaba el problema.

... ... ...

var theTrack = fileArray[0];
        formData.append('action', 'musistic_track_upload');
        formData.append("music", theTrack);
ingresar código aquí

... ... ...

$.ajax({
  url: '/wp-admin/admin-ajax.php',
  type: 'POST',
  data: formData,
  enctype: 'multipart/form-data',
  contentType: false,
  processData: false,
  datatype: "script",
  beforeSend: function() {
    jQuery('#my_error_report').html('');
  }
}).complete(function( data ) {
  jQuery('#my_error_report').html( html + data.responseText + endHtml );
  jQuery('#my_audio_submit').val("Subir Archivo de Audio", function() {
    jQuery(this).prop('disabled', false);
  });
});

return false;
8
Comentarios

¿Has revisado tu console.log de JavaScript usando las herramientas de desarrollador en caso de que haya errores de JavaScript? ¿Has intentado retornar false al inicio de tu escuchador de envío para reducir el problema?

Howdy_McGee Howdy_McGee
25 ene 2016 21:24:31

El error es: Uncaught TypeError: Illegal invocation ¿Podría ser que la llamada AJAX espera un string en el parámetro some_data? He visto muchos ejemplos usando el mismo método que tengo arriba.

Keenan Diggs Keenan Diggs
25 ene 2016 21:28:39

Verifica nuevamente que $ esté configurado como jQuery. Por defecto no lo está.

jgraup jgraup
25 ene 2016 21:30:51

Gracias por tu comentario jgraup. Abro mi archivo js con 'jQuery(document).ready(function($) {', así que no creo que ese sea el error. También tengo otra función que deshabilita el botón de enviar cuando se hace clic en él.

Keenan Diggs Keenan Diggs
25 ene 2016 21:32:23

Ah sí, me encontré con este mismo problema recientemente. No tiene nada que ver con WordPress (así que está fuera de tema aquí) pero el problema es que necesitas agregar tu acción a tu objeto formData() para que lo único que se pase a data sea: data: formData. Sin corchetes, sin identificador de nombre, exactamente así. Puedes agregar tu acción exactamente como estás agregando music. ¡Espero que eso funcione para ti!

Howdy_McGee Howdy_McGee
25 ene 2016 21:35:28

Sí, probé la forma de McGee, y además agregué processData: false a mis opciones antes de que funcionara.

Keenan Diggs Keenan Diggs
25 ene 2016 22:11:32

Sin embargo, la respuesta ajax ahora está devolviendo 0.

Keenan Diggs Keenan Diggs
25 ene 2016 22:14:19

Esto es un problema con el hook. Prueba añadiendo nopriv y quizás imprime en el registro de errores antes de finalizar.

Howdy_McGee Howdy_McGee
26 ene 2016 03:30:32
Mostrar los 3 comentarios restantes
Todas las respuestas a la pregunta 2
1

Prueba usando preventDefault(), es una función de jQuery para prevenir las acciones por defecto llamadas por el navegador.

Primero deberías llamar un manejador de eventos activando tu submitter. Puedes hacerlo así:

$('#my_upload_form').submit(function (event) {

Después de capturar el submit y pasarle un evento, deberías prevenir el refresco por defecto del navegador:

event.preventDefault();

Ahora tu código se verá así:

$('#my_upload_form').submit(function (event) {

    event.preventDefault();

    var css = 'font:Helvetica; color:red; font-size:1.5em; padding:inherit;';
    var html = '<strong><em> ' + '<p style="' + css + '">' + '*';
    var endHtml = '</p></em></strong>';

    var formData = new FormData();
    var fileArray = jQuery('#my_file_input').prop('files');

    if(fileArray.length > 0) {
        var theTrack = fileArray[0];
        formData.append("music", theTrack);
    } else {
      jQuery('#my_error_report').html( html + 'no se seleccionó ninguna pista' + endHtml );
      return false;
    }

    $.ajax({
      url: '/wp-admin/admin-ajax.php',
      type: 'POST',
      // async: false,
      data: {
          action      : 'my_track_upload',
          some_data   : formData
      },
      // dataType: 'text'
      }).success( function( data ) {
          /* ¡Ganaste! */
          alert('ajax fue llamado con éxito');
      }).fail( function( data ) {
          /* Perdiste, muestra error */
          alert('ajax fue llamado con fallo');
    });
});

Por cierto: Siempre intenta colocar preventDefault() al inicio de la función, debería prevenir la acción por defecto antes de que se haga cualquier otra cosa.

27 ene 2016 09:53:53
Comentarios

Buena sugerencia. Simplemente estuve jugando con la llamada AJAX hasta que funcionó. Para mi vergüenza, todavía no entiendo completamente por qué.

Para aquellos interesados en leer más sobre preventDefault y 'return false', este es un buen hilo: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false

Keenan Diggs Keenan Diggs
28 ene 2016 01:14:56
1

Me faltaba una línea crucial en mi consulta AJAX. Sin esta opción, la llamada falla y la página se recarga.

processData: false,
28 ene 2016 01:44:34
Comentarios

Probé todo lo demás, pero esto funcionó inmediatamente. Tenía una acción de formulario y una llamada Ajax escuchando el evento 'click'. Era un software de terceros y cuando intenté cambiarlo a 'submit', no se enviaba nada. Al establecer processData: false, mágicamente se resolvió todo.

Mo Alsaedi Mo Alsaedi
24 oct 2018 21:39:31