Custom Button to launch Modal

pmabey

Before I show the various pieces of code I have tried I wanted to see if its possible to use a custom button to launch a modal? Currently I have my own button in the HTML page that launches a modal using the following JS:

    $("#myModal").on("show.bs.modal", function(e) {
            var rowData = table.row( { selected: true } ).data();
            var link = $(e.relatedTarget);
            $(this).find(".modal-body").load(link.attr("href"));
    });

This works well, fires up a modal that then loads a remote page, which just so happens to also contain a datatable in it.

What I wanted to do was add a custom button for aesthetic purposes that did the same thing. I have the following that opens a separate window:

    new $.fn.dataTable.Buttons( table, [
            { extend: "selectedSingle",
              text: "Circuits",
              action: function ( e, dt, node, config ){
                    var rowData = dt.row( { selected: true } ).data();
                    window.open( 'fiber_util.html?fiber_id='+rowData.fiber_id );
              }
            }
    ] );

But rather that open a separate window, I would prefer to use a modal.
I'm sure its not as simple as copying the show.bs.modal stuff into the button action as I've tried that so was wondering if what I was trying to do was even possible, or if anyone has had success with this?

bindrid

like this? http://jsbin.com/vapudu/3/edit?html,js,output ?

bindrid

I am working on a full blown one at work where the user clicks on a button, that brings up a list of users in a datatable in a modal dialog. The pick a name, that that is used to populate the form below the modal

allan

What you need to do is call the Bootstrap API methods to show the model. You would use the call in the action method rather than window.open - the Bootstrap documentation details their API.

This is exactly the method that Editor uses for its Bootstrap integration .

Allan