リフレッシュページには、クリックし

Question

my UI (image)

こんにちは、私のUI（上記の画像リンク）に私は何かを編集し、[キャンセル]をクリックし、データベースからの情報と更新フォームを持っていますボタンを押すと、編集した情報が消去され、元の情報が再びデータベースから表示されます。 （以下のJavaScriptコード）

<script type="text/javascript"> 
     function reset() 
     { 
      document.getElementById("1").innerHTML='<?php echo $data["Firstname"] ?>'; 
      document.getElementById("2").innerHTML='<?php echo $data["Middlename"] ?>'; 
      document.getElementById("3").innerHTML='<?php echo $data["Lastname"] ?>'; 
      document.getElementById("4").innerHTML='<?php echo $data["Address"] ?>'; 
      document.getElementById("5").innerHTML='<?php echo $data["PhoneNumber"] ?>'; 
      document.getElementById("6").innerHTML='<?php echo $data["Birthdate"] ?>'; 
      document.getElementById("7").innerHTML='<?php echo $data["Gender"] ?>'; 
     } 
    </script> 

または私は保存ボタンをクリックした場合、それは、それが正常にページをリロードせずにデータベースに自分の情報を更新し、AJAXを使用して、変更を保存します。

$(document).ready(function(){ 
//check if btnUpdate is clicked 
$("#save").click(function() 
{ 
    var fname = $("#11").val(); 
    var mname = $("#22").val(); 
    var lname = $("#33").val(); 
    var add = $("#44").val(); 
    var phonenumber = $("#55").val(); 
    var bdate = $("#66").val(); 
    var gen = $("#77").val(); 


    $.ajax(
      { 
       url:"AdminBasicInfoUpdate.php", 
       type:"POST", 
       data:{"f":fname,"m":mname,"l":lname,"a":add, "p":phonenumber,"b":bdate,"g":gen }, 
       success:function(e) 
       {console.log(e) 

        if(e == 1) 
        { 
         alert("No Changes Have Been Detected!"); 
        } 
        else 
        { 
         $("#fullname").html(fname+ " " + lname); 
         alert("Personal Information Has Been Updated Success!"); 
         $("#note").slideUp(500); 
        } 
       } 
      } 
     ); 
}); 

}）。

問題は、キャンセルボタンを再度クリックしたときに変更を保存した後も、新しい更新情報ではなく更新前の情報が表示されます。それを修正する方法を理解する。私はバックグラウンドでページを更新するか、またはbutotnを保存した後にSQLクエリを更新する必要があると思うが、私は方法を知らない。私は助けが必要です。前もって感謝します。

<php session_start(); 

include("connection.php"); 
$username=$_SESSION['Username']; 
$sql = "SELECT * FROM table WHERE Username='$username'"; 
$res=mysqli_query($con,$sql); 
$data=mysqli_fetch_assoc($res); ?> 

Answer 1

あなたはしかし、1つのマイナーチェンジで、あなたが今持っているアプローチを使用することができます。 reset()関数でページ要素を放出値に設定する代わりに、それらを変数に設定するようにしてください。

var currentFirstName = '<?php echo $data["Firstname"] ?>'; 
var currentMiddleName = '<?php echo $data["Middlename"] ?>'; 
// etc. 

function reset() 
{ 
    document.getElementById("1").innerHTML = currentFirstName; 
    document.getElementById("2").innerHTML = currentMiddleName; 
    // etc. 
} 

（注記：このような何か。おそらく、単一の構造化されたオブジェクトに変数を組み合わせることにより、少しこれをクリーンアップすることができますあなたはおそらくスコープを少し改善し、ウィンドウの範囲で物事を置くことができない存在いつも改善がなされていますが、ここで尋ねる内容の外にあります）。

次に、AJAX操作に従って、データがサーバーサイドで正常に更新されたら、それらの変数を更新できます。このような何か：

success: function(e) { 
    // the rest of the code you have, and then... 

    currentFirstName = fname; 
    currentMiddleName = mname; 
    // etc. 
} 

（おそらく、他の関数にリファクタリングをそのをカプセル化し、しかし、あなたが合うクリーンアップすることができます。）

それらのトップレベルの状態を運ぶ変数（current*）が更新されると、 reset()に電話をするたびに、ページ要素をそれらの変数の現在の状態に設定します。したがって、基本的にページが読み込まれると、その時点でレコードの状態にこれらの変数が設定されます。ページが使用されると、フォームをリセットするために現在の状態を格納する変数が更新されます。

もちろん、他の方法もあります。あなたは単にページをリロードすることができます（おそらく理想的ではないかもしれません）。あるいは、あなたのreset()関数でサーバーからレコードを再フェッチすることができます。それを行うには多くの方法があります。