¿Por qué mi llamada ajax está recargando la página?
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;

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.

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

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.
