Update row on datatable using ID

Question

I have a table in an oracle database that I am showing on a web page. I used bootstrap to style my page and dataTables for pagination and search as well as sorting. I want to update any particular row at anytime using the unique ID column(BID), so I have added an update link next to each row using the foreach loop.

My problem now is to get the logic to build that functionality to make the update link. I want to:

1. Find a way to know which row the user has clicked to update, and retrieve that record/row to a form for update using the ID.

   Challenge: I am using a loop to fill the table and I can't think of a way to link each row ID to the update link by it. I tried filling an array with the ID's but how to connect what update link to what ID for retrieval beats me.

I am using html and PHP as well as some simple javascript. I am not good at javascript and have little knowledge in ajax also. I am yet to learn them but I understand they are the best to use for such things. Perhaps, I am not using the best approach, so if anybody can help me out with a much better one within my scope. Find my code below.

<table class="table table-striped" id="scriptstable">

<thead>
  <tr>
        <th>Update</th><!--This is where update links are-->
        <th>Place</th>
        <th>Report Name</th>
        <th>Index</th>
        <th>Source</th>
        <th>Core Field</th>
        <th>Description</th>
    <th>ID</th>
  </tr>
</thead>

<?php
//Connection string is here


$stid = oci_parse($conn, 'SELECT * FROM mytable ORDER BY REPORT_NAME');
oci_execute($stid);
echo "<tbody>";

while ($row = oci_fetch_array($stid, OCI_ASSOC+OCI_RETURN_NULLS)) 
{
  echo "<tr>";
   echo "    <td><a  data-toggle='modal' data-target='#myModal' href='#' >Update</a>"; 
  foreach ($row as $item) {
    echo "    <td>" . ($item !== null ? htmlentities($item, ENT_QUOTES) :    "&nbsp;") . "</td>";


} $bid[]=$row['BID'];//Array that stores ID as they come
echo "</tr>";

}

?>
</tbody>
</table>

UPDATE:

$ajaxAction = $_REQUEST['ajaxaction'];
if (!method_exists('ajaxHandler', $ajaxAction)) {
die("No such action {$ajaxAction}");
}

$handler = new ajaxHandler();
$handler->$ajaxAction();

class ajaxHandler
{ 



function __construct()
{
//just an empty constructor
}

function updateRow()
    {   


    //Connection
 $conn = oci_connect('username', 'password',  'localhost/XE', 'WE8MSWIN1252');
if (!$conn) {
$e = oci_error();
trigger_error(htmlentities($e['message'], ENT_QUOTES), E_USER_ERROR);
 }
    $BID = $_REQUEST['BID'];
    $stid = oci_parse($conn, 'SELECT * FROM Bo_repository WHERE BID =     {$BID}');
    oci_execute($stid);
    $row = oci_fetch_array($stid, OCI_ASSOC+OCI_RETURN_NULLS);
     // echo "    <td><a id='{$row['BID']}' data-toggle='modal' data-target='#myModal' href='#' onclick='updateRow(this)'>Update</a></td>";  
    echo "    <td><a id='{$row['BID']}'  href='#' onclick='updateRow(this)'>Update</a></td>"; 
    //header("Location:index.php");
    foreach ($row as $item) {
        echo "    <td>" . ($item !== null ? htmlentities($item, ENT_QUOTES) : "&nbsp;") . "</td>";
    }
}
 }
 ?>

Answer 1

When you emit your rows in the table you can assign the id to the table row... I usually do it concat with row or something... and include the id as the id of your tag. You can then use the onclick to call a javascript function using ajax to update your table row dynamically eg

while ($row = oci_fetch_array($stid, OCI_ASSOC+OCI_RETURN_NULLS)) 
{
   echo "<tr id='row_{$row['BID']}'>";
   echo "    <td><a id='{$row['BID']}' data-toggle='modal' data-target='#myModal' href='#' onclick='updateRow(this)'>Update</a></td>";  
   foreach ($row as $item) {
       echo "    <td>" . ($item !== null ? htmlentities($item, ENT_QUOTES) : "&nbsp;") . "</td>";
   }
   $bid[]=$row['BID'];//not sure this is really needed anymore
   echo "</tr>";
}

The updateRow function would be something like this... In a script tag of course...

 function updateRow(element) {
    var id = jQuery(element).prop('id');
    var url = 'your_back_end.php_file_that_handles_Ajax';//e.g. AjaxHandler.php

    var postArg = {};
    postArg['BID'] = id;
    postArg['ajaxaction'] = 'updateRow';

    jQuery.ajax({
        url:      url,
        type:     "post",
        data:     postArg,
        success:  function (response) {
            jQuery('#row_' + id).html(response);
        },
        error: function(response){
            console.log(response);
        }
    });
 }

Your backend file would be pretty simple... I create a class called AjaxHandler and pass all ajax calls to the class for whatever processing I need to do...

Your file could be something like this example...

AjaxHandler.php

<?
$ajaxAction = $_REQUEST['ajaxaction'];
if (!method_exists('ajaxHandler', $ajaxAction)) {
    die("No such action {$ajaxAction}");
}

$handler = new ajaxHandler();
$handler->$ajaxAction();

class ajaxHandler
{ 

    function __construct()
    {
    //just an empty constructor
    }

    function updateRow()
    {
        $BID = $_REQUEST['BID'];
        $stid = oci_parse($conn, 'SELECT * FROM mytable WHERE BID = {$BID}');
        oci_execute($stid);
        $row = oci_fetch_array($stid, OCI_ASSOC+OCI_RETURN_NULLS);
        echo "    <td><a id='{$row['BID']}' data-toggle='modal' data-target='#myModal' href='#' onclick='updateRow(this)'>Update</a></td>";  
        foreach ($row as $item) {
            echo "    <td>" . ($item !== null ? htmlentities($item, ENT_QUOTES) : "&nbsp;") . "</td>";
        }
    }
}

This is a very basic async dynamic update using php and ajax... Hope this helps...