CodeIgniter Forums
Fetch data in a selected table row - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Development (https://forum.codeigniter.com/forum-6.html)
+--- Forum: CodeIgniter 3.x (https://forum.codeigniter.com/forum-17.html)
+--- Thread: Fetch data in a selected table row (/thread-68313.html)

Pages: 1 2


Fetch data in a selected table row - Junie - 06-22-2017

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/


RE: Fetch data in a selected table row - Paradinight - 06-22-2017

(06-22-2017, 08:10 PM)Junie Wrote: 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


RE: Fetch data in a selected table row - Junie - 06-22-2017

Sir, I already added the full code by jsfiddle


RE: Fetch data in a selected table row - Paradinight - 06-23-2017

(06-22-2017, 10:59 PM)Junie Wrote: 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 Big Grin


RE: Fetch data in a selected table row - Junie - 06-23-2017

(06-23-2017, 09:54 AM)Paradinight Wrote:
(06-22-2017, 10:59 PM)Junie Wrote: 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 Big Grin

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


RE: Fetch data in a selected table row - Paradinight - 06-23-2017

(06-23-2017, 10:50 AM)Junie Wrote:
(06-23-2017, 09:54 AM)Paradinight Wrote:
(06-22-2017, 10:59 PM)Junie Wrote: 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 Big Grin

Sir, this is the exact link of the library https://swisnl.github.io/jQuery-contextMenu/demo/on-dom-element.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?


RE: Fetch data in a selected table row - Junie - 06-23-2017

(06-23-2017, 12:10 PM)Paradinight Wrote:
(06-23-2017, 10:50 AM)Junie Wrote:
(06-23-2017, 09:54 AM)Paradinight Wrote:
(06-22-2017, 10:59 PM)Junie Wrote: 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 Big Grin

Sir, this is the exact link of the library https://swisnl.github.io/jQuery-contextMenu/demo/on-dom-element.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.


RE: Fetch data in a selected table row - Paradinight - 06-23-2017

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 Smile



https://www.codeigniter.com/user_guide/general/alternative_php.html <- read it


RE: Fetch data in a selected table row - Junie - 06-24-2017

Paradinight,

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


RE: Fetch data in a selected table row - Junie - 06-26-2017

(06-23-2017, 11:13 PM)Paradinight Wrote: 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 Smile



https://www.codeigniter.com/user_guide/general/alternative_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');
               }
           });

       }
   }