Perché la mia chiamata ajax sta aggiornando la pagina?
Sto cercando di caricare un file audio tramite form AJAX.
Ecco il mio HTML nel template 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="carica file audio" name="submit" id="my_audio_submit">
<div id="my_error_report"></div>
</form>
Ecco il mio jQuery:
$('#my_upload_form').submit(function () {
// Definizione stili CSS per il messaggio di errore
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 + 'nessuna traccia selezionata' + 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 ) {
/* Hai vinto! */
alert('chiamata ajax completata con successo');
}).fail( function( data ) {
/* Hai perso, mostra errore */
alert('chiamata ajax fallita');
});
return false;
});
Infine ecco il codice del mio plugin:
add_action('wp_ajax_my_track_upload', 'my_track_upload');
function my_track_upload()
{
die('ciao');
}
Problema (altro a seguire): Perché la pagina si sta aggiornando? Ho inserito return false nell'evento jQuery 'submit'.
************************MODIFICA********************
Ho modificato il mio codice come segue e ora funziona, anche se non sono sicuro esattamente dove fosse il problema.
... ... ...
var theTrack = fileArray[0];
formData.append('action', 'musistic_track_upload');
formData.append("music", theTrack);
enter code here
... ... ...
$.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("Carica File Audio", function() {
jQuery(this).prop('disabled', false);
});
});
return false;

Prova a usare preventDefault()
, è una funzione jQuery che previene le azioni predefinite chiamate dal browser.
Per prima cosa dovresti chiamare un gestore di eventi attivando il tuo submitter. Puoi farlo così:
$('#my_upload_form').submit(function (event) {
Dopo aver catturato un submit e avergli passato un evento, dovresti prevenire il refresh predefinito del browser:
event.preventDefault();
Ora il tuo codice apparirà così:
$('#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 + 'nessuna traccia selezionata' + 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 ) {
/* Successo! */
alert('chiamata ajax riuscita');
}).fail( function( data ) {
/* Errore, mostra messaggio */
alert('chiamata ajax fallita');
});
});
BTW: Cerca sempre di posizionare preventDefault()
all'inizio della funzione, dovrebbe prevenire l'azione predefinita prima che venga eseguito qualsiasi altro codice.

Buon suggerimento. Ho semplicemente armeggiato con la chiamata AJAX finché non ha funzionato. Con mia vergogna, ancora non capisco appieno il perché.
Per chi fosse interessato ad approfondire preventDefault e 'return false', questo è un buon thread: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false

Ho provato tutto il resto, ma questo ha FUNZIONATO immediatamente. Avevo un'azione di form e una chiamata Ajax in ascolto per l'evento 'click'. Era un software di terze parti e quando ho provato a cambiare in 'submit' nulla veniva inviato. Impostare processData: false ha magicamente risolto tutto.
