return Aughを返さずにdivに返すAjaxを修正する方法

Question

Webアプリケーションで作業していますが、Ajaxの返品に問題があります。

私はAJAXの返品の結果を見ることができますが、私の問題は、この結果が現れて消えてしまうことです。私はfalseを返す解決策を見つけました。問題は、表示が完了してfalseを返すことです。私のdivはページに残りますが、私がonclickを作成したボタンを再利用することはできません（javascript関数などajax呼び出し）。

誰かが解決策を持っている場合。

これはコードです：フォームはsubmitedとページの更新されますので、起こる

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

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

・ホープ、このことができます：

HTMLは次のようになります。

Answer 2

編集：affOtp（）;の前に "return"を残してください。

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