AJAX Postローダとメッセージが表示されない

Question

これは私の問題です.Ajaxはすごくうまく動作していますが、何らかの理由ですべてのデータを処理していますが、現時点で無視しているローダーと成功divは表示されません。

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

これが正しい方法です：

マイHTMLは

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

私のjQueryの/ AJAXのようなものは次のように見ているのですか？私は間違っているの？

EDIT は、この問題がevent.preventDefault();かaction="#"によって与えられることができることがその可能ですか？

が

を解決し、私はそれが働い

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); 
    }); 
} 

に私のjQueryのコードを変更しました！

Answer 1

フォームタグでloaderを追加した場合には、適切

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