Member Avatar for while(!success)

Hi guys,

I have php code that generates a table based on the results of a mysql query. My questions is how do I update edit the html table row and push the changes to a mysql table? I am using this example: http://bootsnipp.com/snipps/table-with-users The thing I am trying to avoid is to call another page. I would like to give the user the ability to edit the data on the same page rather than drilling down into another one. Here is a snippit of my table build:

while($row = array($getResults))
{
    $stat;
    if($row['status'] == 0)
    $stat = "<span class='label label-success'>User</span>";
    else if($row['status']  == 1)
    $stat = "<span class='label label-warning'>Club Admin</span>";
    else if($row['status']  == 3)
    $stat = "<span class='label label-important'>Banned</span>";
    else
    $stat = "<span class='label label-info'>System Admin</span>";

    echo "<tr>
    <td>" . $row['username'] . "</td>".
    "<td style='text-align:center'>" . $row['fullName'] . "</td>".
    "<td style='text-align:center'>" . $stat . "</td>".
    "<td style='text-align:left'><a href='#'><i class='icon-pencil'></i></a></td>
    </tr>";
}

On the last column of '<td style='text-align:left'><a href='#'><i class='icon-pencil'></i></a></td>' I would like to generate a modal or just make the row fields editable and then update the changes on the back end. Thanks for your help!

  • 3 Contributors
  • 3 Replies
  • 789 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by while(!success)

Dani AI

Generated

Short summary for : two practical ways let users edit a row "on the same page"—a modal form or inline cell-editing. Both use client-side jQuery to collect edited values and an AJAX POST to a small server script that returns JSON. 's modal idea is good for multi-field edits; is right that AJAX is the transport—here are concrete, implementable notes.

Use a stable row identifier (primary key) on each row (data-id). Example row + client flow (trimmed):

<tr data-id="123">
  <td class="username">alice</td>
  <td class="fullname">Alice Smith</td>
  <td class="status" data-val="0">User</td>
  <td><a href="#" class="edit-row"><i class="icon-pencil"></i></a></td>
</tr>
// on pencil click: open modal or replace cells with inputs, then POST
$(document).on('click','.edit-row',function(e){
  e.preventDefault();
  var $tr = $(this).closest('tr'), id = $tr.data('id');
  var payload = {
    id: id,
    username: $tr.find('.username').text().trim(),
    fullName: $tr.find('.fullname').text().trim(),
    status: $tr.find('.status').data('val')
  };
  $.ajax({
    url: 'save.php', method: 'POST', dataType: 'json', data: payload,
    success: function(res){
      if(res.success){ /* update cells, show tick */ } else { /* show error */ }
    }, error: function(){ /* network error */ }
  });
});

Server-side must validate and update using prepared statements and return JSON. Minimal PHP sketch (PDO):

// save.php (very small sketch)
header('Content-Type: application/json');
$id = filter_input(INPUT_POST,'id',FILTER_VALIDATE_INT);
$username = trim($_POST['username'] ?? '');
$fullname = trim($_POST['fullName'] ?? '');
if(!$id){ echo json_encode(['success'=>false,'error'=>'Invalid id']); exit; }
// prepare/execute update with PDO, then:
echo json_encode(['success'=>true]);

Key tips: always validate/authorize on the server, use prepared statements (PDO/mysqli), protect with CSRF tokens, escape output when re-rendering cells, give clear UI feedback (spinner, disable save, revert on failure), and consider optimistic updates only if you can roll back on error. For large tables prefer pagination or lazy loading so the page stays responsive.

Recommended Answers

All 3 Replies

Member Avatar for bops

The idea is to use jQuery/javascript to create a form with the row you want to edit and push the changes to a server side script via AJAX when the form is submitted.

Member Avatar for while(!success)

ok thanks guys, i'll try to apply your suggestions

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.