Perché la mia chiamata ajax sta aggiornando la pagina?

25 gen 2016, 21:21:11
Visualizzazioni: 37.8K
Voti: 2

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;
8
Commenti

Hai controllato la tua console JavaScript console.log utilizzando gli strumenti per sviluppatori nel caso ci siano errori JavaScript? Hai provato a restituire false all'inizio del tuo listener di invio per restringere il problema?

Howdy_McGee Howdy_McGee
25 gen 2016 21:24:31

L'errore è: Uncaught TypeError: Illegal invocation Potrebbe essere che la chiamata AJAX si aspetti una stringa nel parametro some_data? Ho visto molti esempi che utilizzano lo stesso metodo che ho usato sopra.

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

Verifica nuovamente che $ sia impostato come jQuery. Di default non lo è.

jgraup jgraup
25 gen 2016 21:30:51

Grazie per il tuo commento jgraup. Apro il mio file js con 'jQuery(document).ready(function($) {', quindi non credo che sia l'errore. Ho anche un'altra funzione che disabilita il pulsante di invio quando viene cliccato.

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

Ah sì, mi sono imbattuto nello stesso problema recentemente. Non ha nulla a che fare con WordPress (quindi è fuori tema qui) ma il problema è che devi aggiungere la tua azione all'oggetto formData() in modo che l'unica cosa che viene passata in data sia: data: formData. Niente parentesi, nessun identificatore di nome, proprio così. Puoi aggiungere la tua azione esattamente come stai aggiungendo music. Spero che funzioni per te!

Howdy_McGee Howdy_McGee
25 gen 2016 21:35:28

Sì, ho provato il metodo di McGee, e in più ho aggiunto processData: false alle mie opzioni prima che funzionasse.

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

Tuttavia, la risposta ajax ora restituisce 0.

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

Questo è un problema con l'hook. Prova ad aggiungere nopriv e magari stampa nel log degli errori prima di terminare.

Howdy_McGee Howdy_McGee
26 gen 2016 03:30:32
Mostra i restanti 3 commenti
Tutte le risposte alla domanda 2
1

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.

27 gen 2016 09:53:53
Commenti

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

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

Mi mancava una riga cruciale nella mia query AJAX. Senza questa opzione, la chiamata fallisce e la pagina si ricarica.

processData: false,
28 gen 2016 01:44:34
Commenti

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.

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