How to refresh a page in jquery file after updating certain values?-CodePudding

I have populated a table from database using php and updating its values using js(ajax jquery) Record updates perfectly, I am calling page reload function to get updated values but reload() function is not working. Here is the code

I am calling model to update values in db. Loadfunction() populates the values in model and onclick() event invokes updatedata() function in item.js

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true"
                    data-backdrop="static" data-keyboard="false" id="modelEditItem">
                    <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Edit From</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form action="" method="post"
                                    enctype="multipart/form-data">

                                <div class="row">
                                    <div
                                        class="col-lg-12 col-md-12 col-sm-12 ">
                                        <label for="ii_demanded_id">ID<span
                                                class="text-danger">*</span></label>

                                        <div class="form-group">
                                            <input type="text" name="ii_demanded_id" id="et_ii_demanded_id"
                                                    class="form-control" value="" required />
                                        </div>
                                        <span
                                            class="text-danger"></span>
                                    </div>
                                    <div
                                        class="col-lg-12 col-md-12 col-sm-12 ">
                                        <label for="ii_demanded_name">Name<span
                                                class="text-danger">*</span></label>

                                        <div class="form-group">
                                            <input type="text" name="ii_demanded_name" id="et_ii_demanded_name"
                                                    class="form-control" value="" required />
                                        </div>
                                        <span
                                            class="text-danger"></span>
                                    </div>
                                    

                                </div>

                                
                               <!-- <button type="submit" class="btn btn-primary" name="Update">Save Changes</button> -->
                                <button onclick="updateItem();" class="btn btn-primary" >Save Changes </button>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </form>
                            </div>
                            <div class="modal-footer">
                            </div>
                        </div>
                    </div>
                </div>  <!-- end row -->

<!-- language: lang-js -->

    function updateItem() {

        var id= document.getElementById("et_id").value;
        var name = document.getElementById("et_name").value;
       // console.log(id, name);
        $.ajax({
            url: "update_item.php",
            type: "POST",
            data: {'id': id, 'name': name},
            success: function (result) { 
            //  location.reload();
              window.location.reload(true); //not working
            //  window.location.reload(true);
                console.log(result);
              
            }
        });
    }

<!-- end snippet -->


    > update_item.php
   

 

<?php
    include 'connection.php';
    $id=$_POST["id"];
    $name=$_POST["name"];
    $query = mysqli_query($con, "UPDATE item SET ib_name = '$name' WHERE ib_id = ".$id);
    //$result= mysqli_query($con,$query);
    if ($query)
    {
        ?>  
        <script>
        console.log($query);
        window.location.replace('item_2.php');
       </script>
       <?php
    }
    mysqli_close($con);
    //echo "updated";
    ?>

CodePudding user response：

return a value from php done or failed according to $query state then read it in javascript and run code with matching condition

try this way

php

<?php
    include 'connection.php';
    $id=$_POST["id"];
    $name=$_POST["name"];
    $result = ""; // edited line
    $query = mysqli_query($con, "UPDATE item SET ib_name = '$name' WHERE ib_id = ".$id);
    //$result= mysqli_query($con,$query);
    if ($query){
        $result = "done"; // edited line
    }
    else{
        $result = "failed"; // edited line
    }
    mysqli_close($con);
    echo $result; // edited line
?>

function updateItem() {
    var id= document.getElementById("et_id").value;
    var name = document.getElementById("et_name").value;
    // console.log(id, name);
    $.ajax({
        url: "update_item.php",
        type: "POST",
        data: {id,name},
        success: function (result) { 
            console.log("working") // debuggin
            if(result == "done"){window.location.href="item2.php"}
        }
    });
}