AJAX Beitrag Loader und Nachricht wird nicht funktionieren

Question

Das ist mein Problem, Ajax funktioniert super, Verarbeitung aller Daten, aber aus irgendeinem Grund, die ich im Moment ignoriere, zeigt es nicht den Lader und das Erfolgs div.

Mein html ist so etwas wie

<form id="msform" action="#"> 
    <fieldset> 
    <!-- some fields --> 
    <input type="submit" Value="submit"> 
    </fieldset> 
</form> 

<div id="processing" class="row" style="display:none"></div> 

<div id="apf-response" class="row" style="display:none"></div> 

Meine jQuery/AJAX ist eng, wie:

$(document).ready(function(){ 
    $('#msform').submit(function(event){ 
    event.preventDefault(); 
    apfaddpost(); 
    }) 
}) 

function apfaddpost() { 
    var fd = new FormData($('#msform')[0]); 
    fd.append("main_image", $('#main_image')[0].files[0]); 
    fd.append("action", 'apf_addpost');  

    //Append here your necessary data 
    jQuery.ajax({ 
    type: 'POST', 
    url: apfajax.ajaxurl, 
    data: fd, 
    processData: false, 
    contentType: false, 
    beforeSend: function(){ 
     //here should be the issue. I'm hiding the form and showing the loader div 
     $('#msform').hide(); 
     $('#processing').show(); 
    }, 
    success: function(data, textStatus, XMLHttpRequest) { 
     //when it's completed hide loader and show success message 
     $('#processing').hide(); 
     $('#apf-response').show(); 
     var id = '#success'; 
     jQuery(id).html(''); 
     jQuery(id).append(data); 
     resetvalues($('#msform')); 
    }, 
    error: function(MLHttpRequest, textStatus, errorThrown) { 
     alert(errorThrown); 
    } 
    }); 
} 

Ist dies der richtige Weg? Was mache ich falsch?

EDIT Ist das möglich, dass dieses Problem durch event.preventDefault(); oder action="#" gegeben werden könnte?

Gelöst

ich meine jQuery-Code in

function apfaddpost() { 
    var fd = new FormData($('#msform')[0]); 
    fd.append("main_image", $('#main_image')[0].files[0]); 
    fd.append("action", 'apf_addpost'); 

    $('#form-container').hide(); 
    $('#processing').show(); 
    var postProject = $.ajax({ 
     type: 'POST', 
     url: apfajax.ajaxurl, 
     data: fd, 
     processData: false, 
     contentType: false, 
    }); 

    postProject.done(function(data, textStatus, XMLHttpRequest) { 
      $('#processing').hide(); 
      $('#apf-response').show(); 
      var id = '#success'; 
      jQuery(id).html(''); 
      jQuery(id).append(data); 
      resetvalues($('#msform')); 
    }); 

    postProject.fail(function(MLHttpRequest, textStatus, errorThrown) { 
      alert(errorThrown); 
    }); 
} 

Es funktionierte geändert haben!

Answer 1

Wenn Sie die loader in Formular-Tag hinzufügen, wird es richtig

<form id="msform"> 
    <fieldset> 
    <!-- some fields --> 
    <input type="submit" Value="submit"> 
    </fieldset> 

    <div id="processing" class="row" style="display:none"></div> 
    <div id="apf-response" class="row" style="display:none"></div> 
</form>