web-dev-qa-db-fra.com

Pourquoi mon appel ajax actualise-t-il la page?

J'essaie de télécharger un fichier audio via le formulaire AJAX.

Voici mon code HTML dans le modèle de modification de profil.

<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="upload audio file" name="submit" id="my_audio_submit">                                      
  <div id="my_error_report"></div>                                  
</form>

Voici mon 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 + 'no track selected' + 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 ) {
          /* You win! */
          alert('ajax was called success');
      }).fail( function( data ) {
          /* You lose, show error */
          alert('ajax was called failure');
    });
    return false;  
});

Enfin, voici mon code de plugin:

add_action('wp_ajax_my_track_upload', 'my_track_upload');
function my_track_upload()
{
  die('hello');
}

Problème (plus à venir): Pourquoi la page est-elle rafraîchissante? Je retourne false dans l'événement 'submit' de jQuery.

************************MODIFIER********************

J'ai changé mon code pour le suivant et cela fonctionne maintenant, bien que je ne sois pas vraiment sûr du problème.

... ... ...

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("Upload Audio File", function() {
    jQuery(this).prop('disabled', false);
  });
});

return false;
pluginsplugin-developmentjqueryajax
1
Keenan Diggs

Il me manquait une ligne cruciale dans ma requête AJAX. Sans cette option, l'appel échoue et les pages sont actualisées.

processData: false,
1
Keenan Diggs

Essayez d’utiliser preventDefault(), c’est une fonction jQuery pour empêcher les actions par défaut appelées par le navigateur.

Vous devez d’abord appeler un gestionnaire d’événements en allumant votre émetteur. Vous pouvez le faire comme suit:

$('#my_upload_form').submit(function (event) {

Après avoir intercepté un envoi et lui avoir associé un événement, vous devez empêcher l'actualisation par défaut d'un navigateur:

event.preventDefault();

Maintenant, votre code ressemblera à ceci:

$('#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 track selected' + 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 ) {
          /* You win! */
          alert('ajax was called success');
      }).fail( function( data ) {
          /* You lose, show error */
          alert('ajax was called failure');
    });
});

BTW: Toujours essayer de placer preventDefault() au-dessus de la fonction, cela devrait empêcher l'action par défaut avant toute autre opération.

3
Jeffrey Ponsen