Fetch data in a selected table row

Hello,

I'm trying to edit the data inside a table row. I'm using a contextmenu not a button, when I tried to click an item like edit/delete a modal will appear for the data to be edited. I successfully retrieve the data inside a table row the problem is that it will always fetch the last data in the row. I wanted to edit in a selected row. I tried the button it works but in the contextmenu, I can't edit a selected row.

Table:

Code:

<div class="container">
     <div class="row">
       <div class="col-md-12">
         <div class="table-responsive">
           <table id="ppmpsupplies" class="table table-bordered table-hover" cellspacing="0" width="100%">
             <thead>
               <tr>
                 <th>Code</th>
                 <th>General Description</th>
                 <th>Unit</th>
                 <th>Quantity</th>
                 <th>Estimated Budget</th>
                 <th>Mode of Procurement</th>
                 <th>Actions</th>
               </tr>
             </thead>
             <tbody>
               <?php foreach($items as $item){?>
               <tr>
                 <td>
                   <?php echo $item->id;?>
                 </td>
                 <td>
                   <?php echo $item->description;?>
                 </td>
                 <td>
                   <?php echo $item->unit;?>
                 </td>
                 <td>
                   <?php echo $item->quantity;?>
                 </td>
                 <td>
                   <?php echo $item->budget;?>
                 </td>
                 <td>
                   <?php echo $item->mode;?>
                 </td>

                 <td>
                   <button class="btn btn-warning" onclick="edit_item(<?php echo $item->id;?>)"><i class="glyphicon glyphicon-pencil"></i></button>
                   <button class="btn btn-danger" onclick="delete_item(<?php echo $item->id;?>)"><i class="glyphicon glyphicon-remove"></i></button>
                 </td>
               </tr>
               <?php }?>

             </tbody>
             <tfoot>
               <td colspan="3"></td>
               <td>Total</td>
               <td></td>
             </tfoot>
           </table>
         </div>
       </div>
     </div>
   </div>

Contextmenu:

Code:

"edit": {
        name: "Edit",
        icon: "fa-pencil-square-o",
        callback: function(itemKey, options) {        
        $('#ppmpsupplies').on('click', 'tr', edit_item( <?php echo $item->id ?> ));                                
        return true;
        }
        },

Script:

Code:

     function edit_item(id) {
       save_method = 'update';
       $('#gcjform')[0].reset();
       $.ajax({
         url: "<?php echo base_url('ppmp/ajax_edit/')?>" + id,
         type: "GET",
         dataType: "JSON",
         success: function(data) {

           $('[name="id"]').val(data.id);
           $('[name="description"]').val(data.description);
           $('[name="unit"]').val(data.unit);
           $('[name="quantity"]').val(data.quantity);
           $('[name="budget"]').val(data.budget);
           $('[name="mode"]').val(data.mode);

           $('#gcjmodal').iziModal('open');
         },
         error: function(jqXHR, textStatus, errorThrown) {
           alert('Error get data from ajax');
         }
       });
     }

Controller:

Code:

public function ajax_edit($id)
    {
        $data = $this->ppmp_model->get_by_id($id);
        echo json_encode($data);
    }

Model:

Code:

public function get_by_id($id)
    {
        $this->db->from($this->table);
        $this->db->where('id',$id);
        $query = $this->db->get();

        return $query->row();
    }

Does anybody know how to fix my problem?

Note: I added the full code by jsfiddle
https://jsfiddle.net/junie/vgwf3u2q/

Attached Files

Thumbnail(s)
   

Hello,

I'm trying to edit the data inside a table row. I'm using a contextmenu not a button, when I tried to click an item like edit/delete a modal will appear for the data to be edited. I successfully retrieve the data inside a table row the problem is that it will always fetch the last data in the row. I wanted to edit in a selected row. I tried the button it works but in the contextmenu, I can't edit a selected row.

Table:

Code:

<div class="container">
     <div class="row">
       <div class="col-md-12">
         <div class="table-responsive">
           <table id="ppmpsupplies" class="table table-bordered table-hover" cellspacing="0" width="100%">
             <thead>
               <tr>
                 <th>Code</th>
                 <th>General Description</th>
                 <th>Unit</th>
                 <th>Quantity</th>
                 <th>Estimated Budget</th>
                 <th>Mode of Procurement</th>
                 <th>Actions</th>
               </tr>
             </thead>
             <tbody>
               <?php foreach($items as $item){?>
               <tr>
                 <td>
                   <?php echo $item->id;?>
                 </td>
                 <td>
                   <?php echo $item->description;?>
                 </td>
                 <td>
                   <?php echo $item->unit;?>
                 </td>
                 <td>
                   <?php echo $item->quantity;?>
                 </td>
                 <td>
                   <?php echo $item->budget;?>
                 </td>
                 <td>
                   <?php echo $item->mode;?>
                 </td>

                 <td>
                   <button class="btn btn-warning" onclick="edit_item(<?php echo $item->id;?>)"><i class="glyphicon glyphicon-pencil"></i></button>
                   <button class="btn btn-danger" onclick="delete_item(<?php echo $item->id;?>)"><i class="glyphicon glyphicon-remove"></i></button>
                 </td>
               </tr>
               <?php }?>

             </tbody>
             <tfoot>
               <td colspan="3"></td>
               <td>Total</td>
               <td></td>
             </tfoot>
           </table>
         </div>
       </div>
     </div>
   </div>

Contextmenu:

Code:

"edit": {
        name: "Edit",
        icon: "fa-pencil-square-o",
        callback: function(itemKey, options) {        
        $('#ppmpsupplies').on('click', 'tr', edit_item( <?php echo $item->id ?> ));                                
        return true;
        }
        },

Script:

Code:

     function edit_item(id) {
       save_method = 'update';
       $('#gcjform')[0].reset();
       $.ajax({
         url: "<?php echo base_url('ppmp/ajax_edit/')?>" + id,
         type: "GET",
         dataType: "JSON",
         success: function(data) {

           $('[name="id"]').val(data.id);
           $('[name="description"]').val(data.description);
           $('[name="unit"]').val(data.unit);
           $('[name="quantity"]').val(data.quantity);
           $('[name="budget"]').val(data.budget);
           $('[name="mode"]').val(data.mode);

           $('#gcjmodal').iziModal('open');
         },
         error: function(jqXHR, textStatus, errorThrown) {
           alert('Error get data from ajax');
         }
       });
     }

Controller:

Code:

public function ajax_edit($id)
{
$data = $this->ppmp_model->get_by_id($id);
echo json_encode($data);
}

Model:

Code:

public function get_by_id($id)
{
$this->db->from($this->table);
$this->db->where('id',$id);
$query = $this->db->get();

return $query->row();
}

Does anybody know how to fix my problem?

$('#ppmpsupplies').on('click', 'tr', edit_item( <?php echo $item->id ?> )); <- this is you problem

edit:
pls put the fullcode from you as attachment

Sir, I already added the full code by jsfiddle

Sir, I already added the full code by jsfiddle

$.contextMenu <- i need the library link. Without a doc i do not know how the library work

Sir, I already added the full code by jsfiddle

$.contextMenu <- i need the library link. Without a doc i do not know how the library work

Sir, this is the exact link of the library https://swisnl.github.io/jQuery-contextM...ement.html. I'm struggling with this now. I'm just studying web development.

Sir, I already added the full code by jsfiddle

$.contextMenu <- i need the library link. Without a doc i do not know how the library work

Sir, this is the exact link of the library https://swisnl.github.io/jQuery-contextM...ement.html. I'm struggling with this now. I'm just studying web development.

should the edit in the contextMenu edit only one value or all value?

Sir, I already added the full code by jsfiddle

$.contextMenu <- i need the library link. Without a doc i do not know how the library work

Sir, this is the exact link of the library https://swisnl.github.io/jQuery-contextM...ement.html. I'm struggling with this now. I'm just studying web development.

should the edit in the contextMenu edit only one value or all value?

Sir, the edit in the contextMenu can only edit one value at a time while the delete can either delete one or multiple values. But for now Im still stock in the Edit functionalities.

The Table:

PHP Code:

<table id="ppmpsupplies" class="table table-bordered table-hover" cellspacing="0" width="100%">
 <thead>
 <tr>
 <th>Code</th>
 <th>General Description</th>
 <th>Unit</th>
 <th>Quantity</th>
 <th>Estimated Budget</th>
 <th>Mode of Procurement</th>
 <th>Actions</th>
 </tr>
 </thead>
 <tbody>
 <?php foreach ($items as $item): ?>
 <tr data-id="<?= $item->id ?>">
 <td><?= $item->id; ?></td>
 <td><?= $item->description; ?></td>
 <td><?= $item->unit; ?></td>
 <td><?= $item->quantity; ?></td>
 <td><?= $item->budget; ?></td>
 <td><?= $item->mode; ?></td>
 <td>
 <button class="btn btn-warning" onclick="edit_item(<?php echo $item->id; ?>)"><i
 class="glyphicon glyphicon-pencil"></i></button>
 <button class="btn btn-danger" onclick="delete_item(<?php echo $item->id; ?>)"><i
 class="glyphicon glyphicon-remove"></i></button>
 </td>
 </tr>
 <?php endforeach; ?>
 </tbody>
 <tfoot>
 <td colspan="3"></td>
 <td>Total</td>
 <td></td>
 </tfoot>
</table> 


data- is a custom attribute. I added data-id to the tr.

Code:

"edit": {
name: "Edit",
icon: "fa-pencil-square-o",
callback: function (itemKey, options) {
               var id = $(this).closest('tr').data('id');
               edit_item(id);
}
}
}

if you delete an item, you do not need to reload.
You can use .closest('tr').remove()

eg.

Code:

$( "#ppmpsupplies tbody" ).on( "click", "tr button.btn-danger", function() {
   alert($(this).closest('tr').data('id'));
   $(this).closest('tr').remove();
});

or

Code:

/*
onclick="delete_item(this,<?php echo $item->id; ?>)"
*/
function delete_item(element, id) {
   alert($(element).closest('tr').data('id'));
   $(element).closest('tr').remove();
}

The ajax code is necessary. the example should show how to use closest and remove

---

https://www.codeigniter.com/user_guide/g...e_php.html <- read it

Paradinight,

Sir, I'm gonna try this one. I'll come back if it works Thanks for the time in helping me.

The Table:

PHP Code:

<table id="ppmpsupplies" class="table table-bordered table-hover" cellspacing="0" width="100%">
 <thead>
 <tr>
 <th>Code</th>
 <th>General Description</th>
 <th>Unit</th>
 <th>Quantity</th>
 <th>Estimated Budget</th>
 <th>Mode of Procurement</th>
 <th>Actions</th>
 </tr>
 </thead>
 <tbody>
 <?php foreach ($items as $item): ?>
 <tr data-id="<?= $item->id ?>">
 <td><?= $item->id; ?></td>
 <td><?= $item->description; ?></td>
 <td><?= $item->unit; ?></td>
 <td><?= $item->quantity; ?></td>
 <td><?= $item->budget; ?></td>
 <td><?= $item->mode; ?></td>
 <td>
 <button class="btn btn-warning" onclick="edit_item(<?php echo $item->id; ?>)"><i
 class="glyphicon glyphicon-pencil"></i></button>
 <button class="btn btn-danger" onclick="delete_item(<?php echo $item->id; ?>)"><i
 class="glyphicon glyphicon-remove"></i></button>
 </td>
 </tr>
 <?php endforeach; ?>
 </tbody>
 <tfoot>
 <td colspan="3"></td>
 <td>Total</td>
 <td></td>
 </tfoot>
</table> 


data- is a custom attribute. I added data-id to the tr.

Code:

"edit": {
name: "Edit",
icon: "fa-pencil-square-o",
callback: function (itemKey, options) {
               var id = $(this).closest('tr').data('id');
               edit_item(id);
}
}
}

if you delete an item, you do not need to reload.
You can use .closest('tr').remove()

eg.

Code:

$( "#ppmpsupplies tbody" ).on( "click", "tr button.btn-danger", function() {
   alert($(this).closest('tr').data('id'));
   $(this).closest('tr').remove();
});

or

Code:

/*
onclick="delete_item(this,<?php echo $item->id; ?>)"
*/
function delete_item(element, id) {
   alert($(element).closest('tr').data('id'));
   $(element).closest('tr').remove();
}

The ajax code is necessary. the example should show how to use closest and remove

---

https://www.codeigniter.com/user_guide/g...e_php.html <- read it

Sir, 

I got an error undefined. When I try the delete function. I try fixing but still I got that error. I already remove the button I just wanted to used the context menu.

Code:

"delete": {
                           name: "Delete",
                           icon: "fa-trash-o",
                           callback: function(item, id) {
                              var id = $(this).closest('tr').data('id');
                               delete_item(id);
                               return true;
                           }
                       },

Code:

function delete_item(element, id) {
       // if(confirm('Are you sure delete this data?'))
       // if(toastr.success('successfully deleted :)', 'Success Alert', {timeOut: 5000}))
       alert($(element).closest('tr').data('id'));
       $(element).closest('tr').remove();
       {
         
           $.ajax({
               url: "<?php echo site_url('ppmp/delete_item')?>/" + id,
               type: "POST",
               dataType: "JSON",
               success: function(data) {
                   // location.reload();
               },
               error: function(jqXHR, textStatus, errorThrown) {
                   alert('Error deleting data');
               }
           });

       }
   }