jquery jtable custom click event action routing

user2242389 picture user2242389 · Apr 3, 2013 · Viewed 7.5k times · Source

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

user2242389 picture user2242389 · Apr 4, 2013

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).