2017-08-15 177 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