JQuery Button UL List Render Issues

JQuery Button UL List Render Issues

JustSimplyQJustSimplyQ Posts: 4Questions: 0Answers: 0
edited February 2014 in General
Hi, I have a JQuery button for each DataTable row that has a list of function calls that can be performed for that row. Each function opens a dialog box for submitting data to update that row.

The button and subsequent ... items load beautifully when the table is rendered. The problem is that when going to the second, third, etc pages, the button and list doesn't render collapsed. It renders with the button and then below it is the ... links. Everything works, I just want it to render collapsed, as a button menu, like it does when the table is initially loaded.

Any idea how to address this?

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Please link to test cases in future, as required in the forum rules. That would allow me to answer your question directly.

    All I can really suggest is that you use fnDrawCallback to initialise the buttons on other elements as they are made visible.

    Allan
  • JustSimplyQJustSimplyQ Posts: 4Questions: 0Answers: 0
    I can't really post a link to a test case since my app is internal and not accessible from the outside.

    Thanks for the tip about using fnDrawCallback though. That was the solution.

    [code]

    "fnDrawCallback": function( oSettings ) {
    // alert( 'DataTables has redrawn the table' );
    $( ".btnEditAction" )
    .button({
    text: false
    })
    .click(function() {
    var menu = $( this ).parent().next().show().position({
    my: "left top",
    at: "left bottom",
    of: this
    });
    $( document ).one( "click", function() {
    menu.hide();
    });
    return false;
    })
    .parent()
    .buttonset()
    .next()
    .hide()
    .menu();
    },

    [/code]
This discussion has been closed.