jquery jtable custom click event action routing

Question

This is a followup question to the one answered here:

jquery jtable custom click event

instead of just doing an alert() on the button press, I need to route an action back to the server similar to a listAction or DeleteAction.

1) How do I setup the button click to fire off this custom action? 2) Can I pass in a value like the alert example (data.record.tableID)?

something like this but I just made up a function name called jTableAjax, I need to know a real similar jtable function to fire off an action ajax call:

            CustomAction: {
                    title: 'Refresh',
                    width: '1%',
                    sorting: false,
                    create: false,
                    edit: false,
                    list: true,
                    display: function (data) {
                        if (data.record) {
                            return '<button title="Refresh '+data.record.table+'"           class="jtable-command-button jtable-edit-command-button" onclick="jTableAjax('/myurlserverpath/myaction',' + data.record.tableID + '); return false;"><span>Refresh '+data.record.table+'</span></button>';
                        }
                    }
                }

Answer 1

I ended up using the jquery built in ajax handler and then did a reload on the jtable as shown below:

on the jtable customfield definition I call my own refreshTable function:

   display: function (data) {
                    if (data.record) {
                        return '<button title="Refresh'+data.record.table+'" class="jtable-command-button jtable-edit-command-button" onclick="refreshTable(data.record.table); return false;"><span>Refresh '+data.record.table+'</span></button>';
                    }

I then handle the ajax request with jquery to do some serverside mojo and then if success, reload the jtable:

function refreshTable(table) {
   $.post("/myurlpath/refreshTable", "table="+table,
       function(results)
       {
           $('#MyTableDiv').jtable('reload');
       }
       , "json");
 }

I left off the ajax error handling for code readability in the post, but this handles what I needed (to get a call out to the server from a custom jtable button).

Answer 2

This is quite old but I've had similar task so I'll share my solution. In general you shouldnt put 'onclick' in your button. Its better to give buttons attribute of the same value, lets say 'name= "button1"' and set buttons id to the id of a record so, 'id="data.record.Id"'. Than you can use jQuery .live event http://api.jquery.com/live/ that will attach handler on all of those elements. You should end up with something similar to this

    $('[name="button1"]').live('click', function() {
        var id = $(this).attr('id');
    });

having row's Id gives you quite a lot of freedom on what can you do next.

If you need to work with data that is currently stored in jTable -that you got through jTable POST request (like some hidden field, not shown data etc) you can easly access that as well. Its simple as

            var row = $('#NoteTable').jtable('getRowByKey', id).data('record');

viola, you got access to everything you can possibly want when it comes to rowdata. You could get this data as well by sending request to server (since we got Id) but that generates unnesescery traffic.