如何修復返回Ajax在一個div沒有返回false

Question

我正在一個Web應用程序，我有一個問題，返回的Ajax。

我可以看到AJAX返回的結果，但我的問題是這個結果出現然後消失。我發現一個返回false的解決方案，問題是，一旦顯示完成，我返回false，我的div仍然在頁面上，但我不能重複使用我的onclick按鈕（調用我的JavaScript函數等ajax調用）。

如果有人有解決方案。

這是代碼：

<input class="Admin-Bouton" type="submit" onclick="affOtp();return false" value="Générer" form="formParametres" /> 

<div id="syntheseOTP"></div> 

function affOtp() { 
    $(function(){ 
     $.ajax({ 
      url: 'vue/ressources/affOtp.php', 
      type: 'POST', 
      dataType: 'html', 
      data: { idEmploye: nom }, 
      success: function(msg) { 
       console.log(msg); 
       document.getElementById("syntheseOTP").innerHTML = msg; 
      }, 
      error: function(resu, statut, erreur) { 
       console.log(erreur); 
       alert("papa"); 
      } 
     }); 
    }); 
}; 

Answer 1

這種情況發生，因爲形式將所需提交和頁面刷新，你能避免通過使用類型button代替submit：

<input id="Admin-Bouton" class="Admin-Bouton" type="button" onclick="affOtp();return false" value="Générer" form="formParametres" /> 

我建議附加事件點擊js代碼而不是內聯事件onclick：

$('#Admin-Bouton').on('click', affOtp); 

HTML將是這樣的：

<input id="Admin-Bouton" class="Admin-Bouton" type="button" value="Générer" form="formParametres" /> 

希望這有助於。

Answer 2

編輯：在affOtp（）之前遺漏「返回」;

<input class="Admin-Bouton" type="submit" onclick="return affOtp();" value="Générer" form="formParametres" /> 

<div id="syntheseOTP"></div> 

function affOtp() { 
     $(function(){ 
      $.ajax({ 
       url: 'vue/ressources/affOtp.php', 
       type: 'POST', 
       dataType: 'html', 
       data: { idEmploye: nom }, 
       success: function(msg) { 
        console.log(msg); 
        document.getElementById("syntheseOTP").innerHTML = msg; 
       }, 
       error: function(resu, statut, erreur) { 
        console.log(erreur); 
        alert("papa"); 
       } 
      }); 
    }); 
    return false; 
}; 

Answer 3

由於沒有一個答案給你還在工作，我會建議你做如下更改（記住，你不想改變type="submit"）。

<input id="AjaxButton" class="Admin-Bouton" type="submit" value="Générer" form="formParametres" /> 
<!-- remove onlick attribute and add a Id attribute in above line --> 

<div id="syntheseOTP"></div> 

現在確保您在腳本中添加了單擊事件處理程序。

$('#AjaxButton').on('click',affOtp); 

function affOtp(e) { // add e as input parameter 
         // removed unnecessary wrapper 
    e.preventDefault(); // this will now stop the click event. 

    $("#syntheseOTP").html("Loading...."); // add loading text into div 
     $.ajax({ 
      url: 'vue/ressources/affOtp.php', 
      type: 'POST', 
      dataType: 'html', 
      data: { idEmploye: nom }, 
      success: function(msg) { 
       console.log(msg); 
       $("#syntheseOTP").html(msg); //refactored to use jquery syntax 
      }, 
      error: function(resu, statut, erreur) { 
       console.log(erreur); 
       alert("papa"); 
      } 
     }); 
};