Is it possible to register an event handler for a tabletools button?

Is it possible to register an event handler for a tabletools button?

bitDoctorbitDoctor Posts: 9Questions: 1Answers: 0

I am developing an SPA and would prefer not to have fnClick call a function to create and populate a new tab due to scoping issues in my application. I would prefer to register a JavaScript event handler for my sButtonText. Does anyone know if that is possible?

Thanks!

bD

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    edited April 2015

    You could attach a normal jQuery event handler to the button perhaps? That won't work with the Flash based buttons of course, but it will work plain old HTML buttons!

    I'm working on a replacement for TableTools' buttons at the moment (called Buttons - full of imagination me... :-) ), and there you can access the node directly and attach an event handler to it. That might work well for you? It is very much in development atm though!

    Allan

  • bitDoctorbitDoctor Posts: 9Questions: 1Answers: 0
    edited April 2015

    Thank you Allan. I am unsure how to differentiate between the flash and HTML buttons but I will give it a go and see what happens.

    At least "Buttons" is descriptive ;-)

    In truth, I am not altogether opposed to calling fnClick() but when I attempt to update the DOM (e.g. create and refresh a tab) from inside fnClick() it throws the exception "Uncaught TypeError: undefined is not a function" when this line is executed

    oConfig.fnClick.call( that, nButton, oConfig, null, e );

    in the oConfig Button configuration.

    Your replacement work for TableTools' buttons sounds very nice. 2.x was a big step forward so I can only anticipate the work you are doing toward the next version.

    Rgds,
    bD

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I am unsure how to differentiate between the flash and HTML buttons but I will give it a go and see what happens.

    The copy to clipboard and save to file (CSV, Excel and PDF) buttons are all Flash.

    Interesting the function call doesn't work, assuming that is the TableTools instance, it looks like it should, although it is an unusual way of doing it! How are you getting the configuration object?

    Allan

  • bitDoctorbitDoctor Posts: 9Questions: 1Answers: 0

    Sorry Allan. That is not my code. Simply where in tableTools the exception is occurs.

    Here is my code:

    oTableTools: {
        "sRowSelect": "single",
        "aButtons": [{
            "sExtends":    "select_single",
            "sButtonText": "Analyze selected entry",
            "fnClick": function ( nButton, oConfig, oFlash ) {
                var row_data = this.fnGetSelectedData()[0][0];
                plotLineChart (row_data);
            }
        }]
    }
    

    plotLineChart() contains a few lines of housekeeping and then adds a new tab entry to the tab section. It throws the exception mentioned above calling .tabs( "refresh" ); .

    $( "#tabs" ).find( ".ui-tabs-nav" )
        .append('<li><a href="#Chart" data-url="/chart_line_graph.php" >Chart Data</a></li>');
    $( "#tabs" ).tabs( "refresh" ); 
    

    I will try registering an event handler to my button and see if the exception is thrown.

    Ryan

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Thanks for the code - I would suggest adding console.log( row_data ) between lines 7 and 8 above to ensure that it is what you are looking for. It is currently getting the first element from the selected row's data array (the code above assumes that you are using arrays for the table and not objects).

    Allan

  • bitDoctorbitDoctor Posts: 9Questions: 1Answers: 0
    edited April 2015

    Thank you Allan. Yes, the [0][0] bits are working perfectly. The data array is comprised of an array of strings so I am able to pull out the ID field using that syntax. The data array is essentially a SQL query result set.

    Should I be treating all table data as objects? That thought had not occurred to me.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Arrays are fine. If it is read from the DOM, then it is automatically arrays (although you tell tell it to read into objects using columns.data). Otherwise you can give it either arrays or object - I mentioned it only because I've seen a bit of confusion about this in the past!

    There is a bit more information about it available in the manual if you are interested.

    Allan

  • bitDoctorbitDoctor Posts: 9Questions: 1Answers: 0

    Many thanks Allen.

    Ryan

  • bitDoctorbitDoctor Posts: 9Questions: 1Answers: 0

    BTW, I was able to find my error. My $( "#tabs" ).tabs(); was out of scope inside the fnClick() function. I am now using a reference which is scope. Thank you for all of your assistance!

    Ryan

This discussion has been closed.