Welcome Guest, Not a member yet? Register   Sign In
Fetch data in a selected table row
#1
Exclamation 
(This post was last modified: 06-22-2017, 10:58 PM by Junie. Edit Reason: jsfiddle for the full code )

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)
   
Reply
#2

(This post was last modified: 06-22-2017, 08:17 PM by Paradinight.)

(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
Reply
#3

Sir, I already added the full code by jsfiddle
Reply
#4

(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
Reply
#5

(This post was last modified: 06-23-2017, 10:53 AM by Junie.)

(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-contextM...ement.html. I'm struggling with this now. I'm just studying web development.
Reply
#6

(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-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?
Reply
#7

(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-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.
Reply
#8

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/g...e_php.html <- read it
Reply
#9

Paradinight,

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

(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/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');
               }
           });

       }
   }
Reply




Theme © iAndrew 2016 - Forum software by © MyBB