CODEWITHSUNDEEP
phpjqueryhtmlmysql
Gannicus
Gannicus

Reputation: 530

Reflect changes in sql database to html in real time

Sorry if the topic title is vague but I don't know how to put this. I'm creating a website that has an Edit Profile function, wherein when the user fills in the form and clicks the Edit Profile button, it will be processed via PHP and an alert (via jquery) will be displayed when the edit is successful. I have hidden divs that show up when the user clicks on the navigation links. However, when I click on View Profile (Home), it still displays the old sql information and not the updated one because I didn't load the page in the viewing process. How can I have the website update the information without having to load the page?

This is the html/jquery code:

$("#editButton").click(function(){
    $.post("editprofile.php",
    {
        fname: $("#fnameBox").val(),
        lname: $("#lnameBox").val(),
        contact: $("#contactBox").val()
    },
    function(data){
      console.log(data)
    });
});

PHP inside HTML

<div id="profile">
    <?php echo "Name: " . $array['firstname'] . " " . $array['surname'] . "<br>Contact Number: " . $array['contactNumber'];?>
</div>

Upvotes: 1

Views: 1688

Answers (2)

aleation
aleation

Reputation: 4844

when you use $.post which is a shorthand for $.ajax, the function(data) is what happens when the ajax succeded.

Instead of having just console.log(data) you could have code in that function to update your #profile div. The ideal way would be to have your editprofile.php return the fname lname and contact sanitized to the ajax call (data) as a json string (which is quite easy, there's an example below) and use it to populate #profile div.

editprofile.php: After your database logic, make it return a json string:

<?php
    //Make sure this is the onlything echoed in the php file.
    //Sanitize your $_POST first im not doing it here but you should be careful with that;
    echo json_encode($_POST); 
?>

Javascript:

$("#editButton").click(function(){
    $.post("editprofile.php",
    {
        fname: $("#fnameBox").val(),
        lname: $("#lnameBox").val(),
        contact: $("#contactBox").val()
    },
    function(data){
        try{ 
            jdata = JSON.parse(data);
            $('#profile').html('Name: '+jdata.fname+' '+jdata.lname+'<br> Contact Number'+jdata.contact);
        } catch(e){
            //code to manage the error
            //If you are 100% sure the editprofile will work and don't want to catch the errors
            //Just use the code inside the try{} and forget the try...catch
        }
    });
});

By the way instead of getting the .val() of the fields individually, you could use .serialize() targeting the form only:

//This would do the same as the code above without trying to catch the error:
$.post("editprofile.php", $('#myForm').serialize(), function(data){
    jdata = JSON.parse(data);
    $('#profile').html('Name: '+jdata.fname+' '+jdata.lname+'<br> Contact Number'+jdata.contact);
});

Upvotes: 1

davidkonrad
davidkonrad

Reputation: 85528

This may sound stupid, but if you trust your editprofile.php script (eg it will not fail), why not update the #profile <div> content along with the call to that script? something like this :

$("#editButton").click(function(){
    $.post("editprofile.php",
    {
        fname: $("#fnameBox").val(),
        lname: $("#lnameBox").val(),
        contact: $("#contactBox").val()
    },
    function(data){
      console.log(data)
    });
    $("#profile").html(
        "Name: " + 
        $("#fnameBox").val() + 
        " " +
        $("#lnameBox").val() +
        "<br>Contact Number: " +
        $("#contactBox").val()
    );
});

This would give the same experience for the user as a reload of the page, as far as I can see. And if editprofile.php has failed, no harm has been done.

Upvotes: 2

Related Questions