#StackBounty: #javascript #php #jquery #sql #ajax Ajax update issues (SQL and extensions)

Bounty: 50

I have an ajax update feature with some specific issues, I am sure this just needs some tweaking before it will work out 100%.

I will summarize the issues below as clearly as I can.

I have two files that interact with each other:

• orders.php
• orders-claimed.vc.php

my ajax is trying to update a table int value based on the button clicked. NO=0, YES=1, CANCELLED=2.

orders.php

• start of the page

      <?php
        session_start();
        require_once('orders-claimed.vc.php');
       ?>
  

• table column of the buttons:

                 <td data-target="scheduled">
                   <input id='userId' type='hidden'/>
                   <?php
                     if ($rowOrder['scheduled'] == 1) {
                    ?>
  
                    <a href="#" data-role="update" data-id="<?php echo $rowOrder['orderid'] ;?>"><button class="btn-success">YES</button></a>
  
                   <?php
                 } else if ($rowOrder['scheduled'] == 0) {
                     ?>
                    <a href="#" data-role="update" data-id="<?php echo $rowOrder['orderid'] ;?>"><button class="btn-danger">NO</button></a>
                   <?php
                 } else if ($rowOrder['scheduled'] == 2) {
                     ?>
                    <a href="#" data-role="update" data-id="<?php echo $rowOrder['orderid'] ;?>"><button class="btn-warning">CANCELLED</button></a>
                   <?php
                     }
                    ?>
                 </td>
  

• modal used for interaction with the table

     <!-- Modal content-->
     
  
       
  
         ×
       
       
  
         
  
           YES
  
           NO
  
           CANCEL
         
  
       </div>
     </div>
  
   </div>
  

• ajax code

  
      $(document).ready(function(){
  
    //  append values in input fields
      $(document).on('click','a[data-role=update]',function(){
            var id  = $(this).data('id');
            var scheduled  = $('#'+id).children('td[data-target=scheduled]').text();
  
            $('#userId').val(id);
            $('#myModal').modal('toggle');
      });
  
      // now create event to get data from fields and update in database
  
      $('#update_no').click(function(){
         var id  = $('#userId').val();
         var scheduled = 0;
  
         $.ajax({
             url      : 'orders-claimed.vc.php',
             method   : 'post',
             data     : {scheduled: scheduled , id: id},
             success  : function(response){
                           // now update user record in table
                            $('#'+id).children('td[data-target=scheduled]').html('NO');
                            $('#myModal').modal('toggle');
  
                        }
         });
      });
  
      $('#update_yes').click(function(){
         var id  = $('#userId').val();
         var scheduled = 1;
  
         $.ajax({
             url      : 'orders-claimed.vc.php',
             method   : 'post',
             data     : {scheduled: scheduled , id: id},
             success  : function(response){
                           // now update user record in table
                            $('#'+id).children('td[data-target=scheduled]').html('YES');
                            $('#myModal').modal('toggle');
  
                        }
         });
      });
  
      $('#update_cancelled').click(function(){
         var id  = $('#userId').val();
         var scheduled = 2;
  
         $.ajax({
             url      : 'orders-claimed.vc.php',
             method   : 'post',
             data     : {scheduled: scheduled , id: id},
             success  : function(response){
                           // now update user record in table
                            $('#'+id).children('td[data-target=scheduled]').html('CANCELLED');
                            $('#myModal').modal('toggle');
  
                        }
         });
      }); }); 
   
  

Note that all code above are all in the same file (orders.php)

• table column UI

• modal

• SQL table name “order”
  

these are my extensions in the page. most are being stored in a folder and are being linked.

   http://../_lib/v/jquery.slim.min.js

   http://../_lib/v/bootstrap/js/bootstrap.js

   http://../_lib/v/jquery-ui/jquery-ui.js

   http://../_lib/v/jscolor/jscolor.js

   http://js/cms.js

   <link href="../_lib/v/bootstrap/css/bootstrap.min.css" rel="stylesheet">

Ajax does not function under slim.min.js and gets the “not a function error”, so I changed it to the regular version of jquery from https://code.jquery.com/jquery-3.3.1.js

PROBLEM

If I switch to the full version of jquery, the column updates but the session (the logged in user) ends and logs out automatically. Why is this happening?

My second problem is in the orders-claimed.vc.php file

db.php

<?php

class config_db {

  public function init() {
    $db = new PDO('*MY DATABASE DETAILS GO HERE*');

    date_default_timezone_set('Hongkong');
    return $db;
  }

}

?>

orders.claimed.vs.php

• connecting to the database:

     $routePath = "../";
  
     require_once($routePath . "_config/db.php");
       $dbConfig = new config_db();
       $db = $dbConfig->init();
  

• SQL update

   if(isset($_POST['id'])){
  
    $orderid = $_POST['id'];
    $scheduled = $_POST['scheduled'];
  
    $stmt = $db->prepare("UPDATE order SET scheduled = '$scheduled' WHERE orderid = '$orderid'");
    $stmt->execute(); }
  

PROBLEM

the SQL code above does not update the table (the one shown in the screenshot, but ajax just updates the look of the button from the success functions (It goes back to its original value when the page refreshes). I would like to know what is the issue. It should be connecting to the buttons since it is using “if(isset($_POST[‘id’]))”.

I hope I have provided a clear explanation to my two problems, thank you for any help.

Get this bounty!!!