がどのようにデータやコンテンツを知っている要素

Question

にロードされた私は、多くのJavaScript依存関係を持っていると私はAJAX呼び出し<form>デフォルトsubmissionがにそれらのほとんどがcdnあり、preventedあり、そしてsuccess message負荷そこから知っていない状況がありますa <p id="contentLoadsHereFirst"></p>。

ここでは、demoにはsetTimeout()を使用しました。reallyは、ajax callが終了する時期を知りません。私に

ヒント（AJAX終了）：contentは私の質問は、私はデモだけためsetTimeout()を使用しているdataがここ<p id="contentLoadsHereFirst"></p>にロードされたときに$('#message').text('');を作成する方法である<p id="contentLoadsHereFirst"></p>

にロードされます。ここで

は、コードスニペットとJSFiddleです：

$('#submit').click(function(e){ 
 
    e.preventDefault(); 
 
    $('#message').text('Please wait.........'); 
 
    setTimeout(function(){ 
 
    $('#contentLoadsHereFirst').text('Message Has Been Sent Successfully'); 
 
    },1500); 
 
    //my pseudo code 
 
    
 
/*if($('#contentLoadsHereFirst').html() != ''){ 
 
    $('#message').text(''); 
 
    }*/ 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="submit" name="submit" value="Update" id="submit"> 
 

 
<p id="contentLoadsHereFirst"></p> 
 

 
<p style="color:red;" id="message"></p>

Answer 1

jQuery ajax methodはあなたがロードメッセージを非表示にすることができ、成功コールバックを持っています。

スニペットでは、メッセージを非表示にするコードブロックをsetTimeout関数内に追加できます。

$('#submit').click(function(e){ 
 
    e.preventDefault(); 
 
    $('#message').text('Please wait.........'); 
 
    setTimeout(function(){ 
 
    $('#contentLoadsHereFirst').text('Message Has Been Sent Successfully'); 
 
    if($('#contentLoadsHereFirst').html() != ''){ 
 
    $('#message').text(''); 
 
    } 
 
    },1500); 
 
    //my pseudo code 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="submit" name="submit" value="Update" id="submit"> 
 

 
<p id="contentLoadsHereFirst"></p> 
 

 
<p style="color:red;" id="message"></p>

別の解決策は、以下のコードフォーマットを試してみてください

$(document).ajaxComplete(function(event, xhr, settings) { 
    if (settings.url === "ajax/test.html") {//a way to filter the responses 
    $('#message').text(''); //here you ca hide your div 
    } 
}); 

Answer 2

（詳細はこちらhttps://api.jquery.com/ajaxComplete/）アヤックスにグローバルハンドラをアタッチすることです：

$('#submit').click(function(e){ 
e.preventDefault(); 
    $.ajax({ 
     url: 'Your Action Link', 
     data: {},//additional data 
     type: "POST", 
     beforeSend: function() { 
      $('#message').text('Please wait......'); 
     }, 
     success: function (response) { 
      $('#contentLoadsHereFirst').text(response.message); 
     }, 
     error: function (xhr, textStatus, error) { 
     console.log(error.messge); 
     } 
    }); 
});