2017-08-15 176 views
1

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); ?> 
+0

這是因爲您的$ data對象仍然是相同的,因爲您在保存後沒有再次獲取數據... – hallleron

+0

您可以顯示從數據庫獲取數據的代碼嗎? – MukulSharma

回答

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()函數中從服務器重新獲取記錄,而不是使用發送到頁面的值,等等。有很多方法可以做到這一點。

+0

我會試試這個,謝謝 – asdf

+0

它再次感謝 – asdf