refresh page in background or sql query using ajax on button click

Question

Hi, in my UI ( image link above ) i have an update form with information from the database, when i edit something and click cancel button it will erase the edited information and display the original information from the database again. (javascript code below)

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

Or if i click save button it will save the changes using ajax, it successfully updated my information in the database without reloading the page.

$(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);
                    }
                }
            }
        );
});

});

The Problem is after saving the changes when i click cancel button again it display the information before the update not the new updated information. Cant figure out how to fix it. i think i have to refresh the page in the background or update the sql query after clicking save butotn but i don't know how. I need help. Thanks in advance.

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

It is because your $data object is still the same since you did not fetch the data again after your save ... — hallleron
– hallleron, Commented Aug 15, 2017 at 13:29

David · Accepted Answer · 2017-08-15 13:29:22Z

You can use the approach you have now, but with one minor change. Instead of having your reset() function set the page elements to emitted values, have it set them to variables. Something like this:

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.
}

(Side note: You can probably clean this up a bit by combining the variables into a single structured object. You can likely improve scope a bit and not put things on the window scope. There are always improvements to be made, but that's somewhat outside what's being asked here.)

Then following your AJAX operation, when the data has been successfully updated server-side, you can update those variables. Something like this:

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

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

(You can probably encapsulate that into another function, refactor and clean up however you see fit.)

Once those top-level state-carrying variables (current*) are updated, any time you call reset() it will set the page elements to whatever is the current state of those variables. So basically when the page loads it sets those variables to the state of the record at that time. As the page is used, it updates those variables to store the current state for the purpose of resetting the form.

Other approaches exist of course. You could simply reload the page (maybe not ideal), or perhaps you could re-fetch the record from the server in your reset() function instead of using values which were emitted to the page, and so on. There are many ways to do it.

Collectives™ on Stack Overflow

refresh page in background or sql query using ajax on button click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related