De ce apelul meu AJAX reîmprospătează pagina?
Încerc să încarc un fișier audio prin intermediul unui formular AJAX.
Iată codul meu HTML din șablonul 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="încarcă fișier audio" name="submit" id="my_audio_submit">
<div id="my_error_report"></div>
</form>
Iată codul meu 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 + 'nicio pistă selectată' + 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 ) {
/* Ai câștigat! */
alert('apelul ajax a fost realizat cu succes');
}).fail( function( data ) {
/* Ai pierdut, afișează eroare */
alert('apelul ajax a eșuat');
});
return false;
});
În final, iată codul plugin-ului meu:
add_action('wp_ajax_my_track_upload', 'my_track_upload');
function my_track_upload()
{
die('hello');
}
Problema (vor urma mai multe): De ce se reîmprospătează pagina? Am returnat false în evenimentul jQuery 'submit'.
************************EDITARE********************
Mi-am modificat codul după cum urmează și acum funcționează, deși nu sunt sigur exact unde era problema.
... ... ...
var theTrack = fileArray[0];
formData.append('action', 'musistic_track_upload');
formData.append("music", theTrack);
introdu codul aici
... ... ...
$.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("Încarcă Fișier Audio", function() {
jQuery(this).prop('disabled', false);
});
});
return false;

Încearcă să folosești preventDefault()
, este o funcție jQuery care preîntâmpină acțiunile implicite inițiate de browser.
Mai întâi, ar trebui să apelezi un gestionar de evenimente prin declanșarea formularului tău. Poți face asta astfel:
$('#my_upload_form').submit(function (event) {
După ce ai capturat trimiterea formularului și ai furnizat un eveniment cu aceasta, ar trebui să preîntâmpini reîmprospătarea implicită a browserului:
event.preventDefault();
Acum codul tău va arăta astfel:
$('#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 + 'nu a fost selectată nicio piesă' + 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 ) {
/* Succes! */
alert('apelul ajax a avut succes');
}).fail( function( data ) {
/* Eșec, afișează eroarea */
alert('apelul ajax a eșuat');
});
});
Apropo: Întotdeauna încearcă să plasezi preventDefault()
la începutul funcției, ar trebui să preîntâmpine acțiunea implicită înainte de orice altă operațiune.

Sugestie bună. Am tot încercat cu apelul AJAX până când a funcționat. Spre rușinea mea, încă nu înțeleg pe deplin de ce.
Pentru cei interesați de lecturi suplimentare despre preventDefault și 'return false', acesta este un fir de discuție util: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false

Am încercat totul, dar acest lucru a FUNCȚIONAT imediat. Aveam o acțiune de formular și un apel Ajax care asculta evenimentul 'click'. Acesta era un software de la terți și când am încercat să schimb pe 'submit', nimic nu se trimitea. Setarea processData: false, a rezolvat totul ca prin magie.
