Ajax beforeSend関数が機能していないようです。

Question

データを処理するサーバに小さなテキストファイルを送信するフォームがPHPです。結果はカラーボックスで表示されます。それはうまく動作しますが、データがアップロードされて処理されている間（数秒かかる）小さなメッセージが表示され、結果が表示された後に再び表示されます。しかし、何らかの理由でそのメッセージ(span#ajaxloading)が表示されません。

HTML：

<button type="button" id="fixit">Fix it!</button><span id="ajaxloading" style="display:none;">Your data is being processed...</span> 

jQueryの：それはもちろん示し、（それが必要のような）カラーボックスがポップアップ表示後に隠しルールません：私は "どれも表示" を削除

jQuery("#fixit").click(function() { 
    if(form.valid() == true) { 
     var formData = new FormData(jQuery('#ajastaja')[0]); 
     jQuery.ajax({ 
      beforeSend: function(){ 
       jQuery('#ajaxloading').show(); // <- Not working! 
      }, 
      url: '/path/to/my.php', 
      type: 'POST', 
      data: formData, 
      async: false, 
      success: function (data) { 
       jQuery('#ajaxloading').hide(); // <- Works here 
       jQuery('#answerbox').html(data); 
      }, 
      cache: false, 
      contentType: false, 
      processData: false 
     }); 
     jQuery.colorbox({ 
      inline:true, 
      href:'#answerbox', 
      width:'500px', 
      closeButton:false 
     }); 
     return false; 
    } 
}); 

。だから私は間違っているの？前もって感謝します！

編集：私は混乱のために申し訳ありません、コードは実際には、jQuery（document）.ready（function（）{{}}）の間にラップされます; - それは私が持っている問題に影響を与えるべきではないJQuery検証プラグインメソッド、ルールなどの多くを含んでいます。

Answer 1

beforeSend機能は、あなたのクリック機能をこのように呼び出す試して動作しない場合..

のjQuery：

jQuery("#fixit").click(function() { 
    jQuery('#ajaxloading').show(); 
    if (form.valid() == true) { 
     var formData = new FormData(jQuery('#ajastaja')[0]); 
     jQuery.ajax({ 
      url: '/path/to/my.php', 
      type: 'POST', 
      data: formData, 
      async: false, 
      success: function (data) { 
       jQuery('#ajaxloading').hide(); // <- Works here 
       jQuery('#answerbox').html(data); 
      }, 
      error:function(data) 
      { 
       jQuery('#ajaxloading').hide(); 
      }, 
      cache: false, 
      contentType: false, 
      processData: false 
     }); 
     jQuery.colorbox({ 
      inline: true, 
      href: '#answerbox', 
      width: '500px', 
      closeButton: false 
     }); 
     return false; 
    } 
    else { 
     jQuery('#ajaxloading').hide(); 
    } 
}); 

Answer 2

私は、フォームがスニペットで定義されていなかった、あなたのコードは大丈夫だったが、beforeSend私はdocument.readyでそれをラップしていた他の回答のように

Works for me

、それは既に持っていることがあります。ここで働いていますあなたのスニペットの外で行われましたか？

var formData = new FormData(jQuery('#ajastaja')[0]); 
    jQuery.ajax({ 
     beforeSend: function(){ 
      console.log('beforeSend') 
      jQuery('#ajaxloading').show(); // <- Not working! 
     }, 
     url: '/path/to/my.php', 
     type: 'POST', 
     data: formData, 
     async: false, 
     success: function (data) { 
      jQuery('#ajaxloading').hide(); // <- Works here 
      jQuery('#answerbox').html(data); 
     }, 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 

Answer 3

あなたのクリック機能をラップしてください：あなたは}最後に、あなたのfunctinをcolenを逃した

$(document).ready(function() { 
    $("#fixit").click(function() { 
     ... 
    }); 
});