0

I have a page in PHP, which is showing user account info from the database, now for editing account info, I have built a bootstrap modal. Now I want the parent page to refresh after we submit the form in modal, so that the page shows updated value from database, how do I do that??

Here is the page code where the modal form is:

    <p data-placement="top" data-toggle="tooltip" title="Edit" data-original-title="Edit">
            <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit">
                <span class="glyphicon glyphicon-pencil"> Edit</span>
            </button>
            </p>

            <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">

                        <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Edit Your Detail</h4>
                        </div>

                        <div class="modal-body">
                            <form method="post" action="process.php" class="updateForm">
                                <div  class="form-group">

                                    <input type="hidden" name="userID" value="<?php echo $_SESSION['user']; ?>" />
                                    <label for="customer_name">Customer Name :</label>
                                    <input class="form-control" type="text" name="customer_name" id="customer_name" value="<?php echo $userRow['fullName']; ?>" />


                        </div>

                        <div class="modal-footer">
                                    <!-- <input type="submit" name="submit" class="btn btn-block btn-warning" value="Save changes" /> -->
                                    <input type="submit" name="submit" class="btn btn-success" id="submit" />
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>

Here is my custom.js code: Here if I am changing url: "process.php" to url: "index.php" and putting process.php code in index.php file, then the query is working, otherwise the query also is not working.

$("#updateForm").submit(function(event){
// cancels the form submission
event.preventDefault();
submitUpdateForm();
});

function submitUpdateForm(){
$.ajax({
    type: "POST",
    url: "process.php",
    data: $('#updateForm').serialize(),
    success : function(text){
        if (text == "pass"){
            updateFormSuccess();
        }
        else {
            updateFormFailure();
        }
    },
    error: function(){
     alert("failure");
     }
});
}

function updateFormSuccess(){
alert("Success");
$("#thanks").removeClass( "hidden" );
}

function updateFormFailure(){
$("#thanks").html("Fail");
}

Here is process.php code:

include('config.php'); //include the database connection
if ('POST' === $_SERVER['REQUEST_METHOD'])   {
$userID = $_POST['userID'];
$customer_name = $_POST['customer_name'];
$results = mysqli_query($con, "UPDATE users SET fullName='$customer_name'         WHERE userId=".$userID);

if ($results) {
    echo "pass";
}else{
    echo "invalid";
}
}

After troubleshooting I have found that the ajax call is not working at all. Can anybody please guide me what I'm doing wrong?

Christy Ronaldo
  • 1
  • 1

1 Answers1

0

To refresh the page upon successful submit, add this line to the end of your updateFormSuccess() function.:

document.location.reload();

The page will reload. Here it is from MDN:

The Location.reload() method reloads the resource from the current URL. Its optional unique parameter is a Boolean, which, when it is true, causes the page to always be reloaded from the server. If it is false or not specified, the browser may reload the page from its cache. Besides caching behaviour forcedReload flag also impacts how some browsers handle scroll position: ordinary reload happens to try to restore scroll position after reloading page DOM, while in forced mode (when parameter is set to true) the new DOM gets loaded with scrollTop == 0.

Michael Sacket
  • 897
  • 8
  • 13