Jquery contextmenu calling a function

Question

I want to call a function inside a context menu. I tried working on buttons and it perfectly works. When I tried to place in context menu I can't call the function. I used this library https://github.com/swisnl/jQuery-contextMenu for the context menu.

My table:

<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>                     
              </tr>
              <?php }?>

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

My context menu:

"edit": {
        name: "Edit",
        icon: "fa-pencil-square-o",
        callback: function(item, id) {
        $('#gcjmodal').on('click', edit_item('$item->id'));
        // $('#gcjmodal').click(edit_item('$item->id'));
        return true;
        }
        },
"delete": {
        name: "Delete",
        icon: "fa-trash-o",
        callback: function(item, id) {
        //$(this).delete_item('$item->id');
        // $(this).on('click', delete_item('$item->id'));
        return true;
        }
        },

My function:

    function edit_item(id) {
        save_method = 'update';
        $('#gcjform')[0].reset();
        $.ajax({
            url: "<?php echo site_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');
            }
        });
    }
function delete_item(id) {
        if (confirm('Are you sure delete this data?')) {
            $.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');
                }
            });

what is gcjmodal? will this be available while calling context menu, i am asking this because inside context menu callback you are attaching click event handler to gcjmodal. — Bhushan Kawadkar
– Bhushan Kawadkar, Commented Jun 21, 2017 at 3:46
@BhushanKawadkar, its a modal from the plugin iziModal. When I try to edit/delete this is the error. POST http://localhost/csc/ppmp/delete_item/$item-%3Eid 400 (Bad Request) — Larigyn
– Larigyn, Commented Jun 21, 2017 at 3:50

steadweb · Accepted Answer · 2017-06-21 12:47:45Z

1

The offending line of code is

$('#gcjmodal').on('click', edit_item('$item->id'));

as you're passing a string to the edit_item function (i.e. '$item->id').

You need to parse that with PHP tags. So the line should be:

$('#gcjmodal').on('click', edit_item('<?php print $item->id ?>'));

answered Jun 21, 2017 at 12:47

steadweb

16.8k3 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Larigyn Over a year ago

,that's the missing piece of code. You got it right sir. Thanks for helping

Larigyn Over a year ago

Sir when I try to edit. The last row of data has been fetched. I want to select other rows of data.

steadweb Over a year ago

$item will always reference the last element in the array. You'll need to dynamically pass the ID of each row into the edit_item() function.

steadweb Over a year ago

Can you use item or id found within the callback closure? callback: function(item, id) { - so your code would be $('#gcjmodal').on('click', edit_item(id));

Larigyn Over a year ago

This is my new line of code callback: function(item, id) { $('#ppmpsupplies tr').on('click', edit_item(id)); return true; }... I call on tableID then tr to be exact.

|

Collectives™ on Stack Overflow

Jquery contextmenu calling a function

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related