wake-up-neo.com

Warum aktualisiert mein Ajax-Aufruf die Seite?

Ich versuche, eine Audiodatei über das Formular AJAX hochzuladen.

Hier ist mein HTML-Code in der Profilbearbeitungsvorlage.

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

Hier ist meine 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;  
});

Zum Schluss ist hier mein Plugin-Code:

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

Problem (weitere werden folgen): Warum wird die Seite aktualisiert? Ich gebe im jQuery-Ereignis 'submit' false zurück.

************************BEARBEITEN********************

Ich habe meinen Code wie folgt geändert und er funktioniert jetzt, obwohl ich nicht genau weiß, wo das Problem lag.

... ... ...

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

In meiner Abfrage AJAX fehlte eine wichtige Zeile. Ohne diese Option schlägt der Anruf fehl und die Seiten werden aktualisiert.

processData: false,
1
Keenan Diggs

Versuchen Sie es mit preventDefault(), eine jQuery-Funktion zum Verhindern von Standardaktionen, die vom Browser aufgerufen werden.

Rufen Sie zuerst einen Event-Handler auf, indem Sie Ihren Submitter starten. Sie können dies wie folgt tun:

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

Nachdem Sie eine Übermittlung abgefangen und ein Ereignis damit ausgelöst haben, sollten Sie die Standardaktualisierung eines Browsers verhindern:

event.preventDefault();

Nun sieht Ihr Code wie folgt aus:

$('#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');
    });
});

Übrigens: Versuchen Sie immer, preventDefault() über der Funktion zu platzieren. Sie sollte die Standardaktion verhindern, bevor etwas anderes getan wird.

3
Jeffrey Ponsen