0

I have created get_data(id) and update_data() function in item.js file and corresponding get_data.php and update_data.php files. In my code get_data(id) function is working perfectly but update_data()is not updating the value in database. It seems like function is not calling update_data.php. I've tried implementing ajax and php for the first time, Please help me to figure out the exact problem in my code. Here is my code

        function loadItem(id) {
            console.log(id);
            $.ajax({
                url: "get_data.php",
                type: "POST",
                data: {'id': id},
                success: function (result) {
                    console.log(result);
                    var d = JSON.parse(result);
                    
                    document.getElementById("ib_id").value = d.category[0].ic_id;
    document.getElementById("ib_name").value = d.category[0].ic_name;
    
                }
            });
        }
    
        function updateItem() {
    
            var id = document.getElementById("ib_id").value;
            var name = document.getElementById("ib_name").value;
            $.ajax({
                url: "update_data.php",
                type: "POST",
                data: {'id': id, 'name': name},
                success: function (result) {
                    console.log(result);
                }
            });
        }
    

        <!DOCTYPE html>
        <html>
        <head>
            <title>Test Page</title>
        </head>
        <body>
        <h1>Test Page</h1>
    
        <button onclick="loadItem(2);">Load Data</button>
    
    
        <br/>
        <br/>
        <br/>
        <br/>
    
        <form method="post">
    <input type="text" name="ib_id" id="ib_id" class="form-control" 
                                                        placeholder="id etc."  required/>
        <input type="text" name="ib_name" id="ib_name" value="" class="form-control" 
                                                            placeholder="i.e HP, Dell, Sony etc."  required/>
    
    
    
                                                      
        <br/>      <button onclick="updateItem();">Update Data </button>
                                                        </form>
        <script type="text/javascript" src="assets/js/jquery.min.js"> 
         </script>
        <script type="text/javascript" src="assets/js/item.js"></script>
        </body>
        </html>

get_data.php

        <?php
        include 'connection.php';
        $id=$_POST["id"];
        
        $category = array();
        $temp = array();
        $query = mysqli_query($link, "SELECT * FROM item_category WHERE ic_id = ".$id);
        //$query = mysqli_query($link, "SELECT * FROM item_category");
        while ($row = mysqli_fetch_array($query)) {
            $temp['ic_id'] = $row['ic_id'];
            $temp['ic_name'] = $row['ic_name'];
            array_push($category, $temp);
        }
        
        $response['category'] = $category;
        echo json_encode($response);
        
        ?>

update_data.php

            <?php
        include 'connection.php';
        $id=$_POST['id'];
        echo "id is".$id;
        $name=$_POST['name'];
        
        $query = mysqli_query($link, "UPDATE item_category SET ic_name = '$name' WHERE ic_id = ".$id);
    
        echo "updated";
        ?>
Tangentially Perpendicular
  • 5,012
  • 4
  • 11
  • 29
Ayes
  • 19
  • 1
  • The line that executes `mysqli_query()` in `update_data.php` appears to be commented out... – David Sep 25 '21 at 20:53
  • 3
    **Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) – Dharman Sep 25 '21 at 20:57
  • I have updated the code but still update button is not calling php – Ayes Sep 25 '21 at 21:19
  • @AyeshaYaseen: What specific debugging have you done to confirm this conclusion? When you use your browser's debugging tools, are there any errors at all on the browser's development console? In the script debugger, is the `updateItem` function invoked at all? In the network tab, is the AJAX request made? Does it contain the data you expect? What is the server's response? – David Sep 25 '21 at 21:21
  • 1
    There is no input with the id `ib_id` so `document.getElementById("ib_id").value` won't return any id at all. – M. Eriksson Sep 25 '21 at 21:35
  • @David Debugger displays exception on `var id = document.getElementById("ib_id").value;` --- TypeError: Cannot read properties of null (reading – Ayes Sep 25 '21 at 21:36
  • @Ayes: The error is telling you that you can't read the value of an element which doesn't exist. There is no `id="ib_id"` element in your HTML. – David Sep 25 '21 at 21:38
  • @Magnus Eriksson yes I forgot to make another field for id. I have now updated my code but debugger displays another exception "DOM EXCEPTION" -failed to execute – Ayes Sep 25 '21 at 22:05
  • If you get an error, please post the complete error message so we don't have to guess. – M. Eriksson Sep 26 '21 at 01:05
  • Error Solved. I added the input field and it worked .Thank you @David – Ayes Sep 26 '21 at 08:37
  • 1
    I've found [this link](https://stackoverflow.com/questions/50519829/domexception-failed-to-execute-queryselectorall-on-element-when-using-an) regarding "DOM EXCEPTION". Thank you @Magnus – Ayes Sep 26 '21 at 08:43

0 Answers0