De ce apelul meu AJAX reîmprospătează pagina?

25 ian. 2016, 21:21:11
Vizualizări: 37.8K
Voturi: 2

Î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;
8
Comentarii

Ai verificat consola JavaScript console.log folosind instrumentele de dezvoltator pentru a vedea dacă există erori JavaScript? Ai încercat să returnezi false la începutul listener-ului de trimitere pentru a identifica problema?

Howdy_McGee Howdy_McGee
25 ian. 2016 21:24:31

Eroarea este: Uncaught TypeError: Illegal invocation Este posibil ca apelul AJAX să aștepte un string în parametrul some_data? Am văzut multe exemple care folosesc aceeași metodă ca cea de mai sus.

Keenan Diggs Keenan Diggs
25 ian. 2016 21:28:39

Verifică dacă $ este setat pe jQuery. În mod implicit, nu este.

jgraup jgraup
25 ian. 2016 21:30:51

Mulțumesc pentru comentariul tău, jgraup. Deschid fișierul meu js cu 'jQuery(document).ready(function($) {', deci nu cred că asta e problema. Am și o altă funcție care dezactivează butonul de submit când este apăsat.

Keenan Diggs Keenan Diggs
25 ian. 2016 21:32:23

Ah da, am întâlnit recent aceeași problemă. Nu are nicio legătură cu WordPress (deci e off topic aici), dar problema este că trebuie să adaugi acțiunea ta la obiectul formData(), astfel încât singurul lucru care să fie transmis în data este: data: formData. Fără paranteze, fără identificator de nume, exact așa. Poți adăuga acțiunea exact cum adaugi music. Sper să funcționeze pentru tine!

Howdy_McGee Howdy_McGee
25 ian. 2016 21:35:28

Da, am încercat metoda lui McGee și, în plus, am adăugat processData: false la opțiunile mele înainte să funcționeze.

Keenan Diggs Keenan Diggs
25 ian. 2016 22:11:32

Cu toate acestea, răspunsul ajax returnează acum 0.

Keenan Diggs Keenan Diggs
25 ian. 2016 22:14:19

Aceasta este o problemă cu hook-ul. Încearcă să adaugi nopriv și poate afișează în jurnalul de erori înainte de a opri execuția.

Howdy_McGee Howdy_McGee
26 ian. 2016 03:30:32
Arată celelalte 3 comentarii
Toate răspunsurile la întrebare 2
1

Î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.

27 ian. 2016 09:53:53
Comentarii

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

Keenan Diggs Keenan Diggs
28 ian. 2016 01:14:56
1

Îmi lipsea o linie crucială în interogarea mea AJAX. Fără această opțiune, apelul eșuează și pagina se reîncarcă.

processData: false,
28 ian. 2016 01:44:34
Comentarii

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.

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