Custom button with bootstrap popover. Popover will close instantly.

washuit-iamm

http://live.datatables.net/seqemita/1/

My popover closes instantly. Notice how I put another button under the table using identical code that works just fine.

allan

I think the issue here is that you are binding the popup to the button, rather than having the action function for the button calling the pop-up's API to open / close. It is correct to set the popup up in the init function, but it should be API only, and be opened from the action function.

I'm afraid I've not had a chance to look at the Bootstrap API for that yet.

Allan

washuit-iamm

Well, if you look at the button under the table, that is the desired functionality. The popover is bound to the button, and the trigger: 'focus' ensures when I click out the popup closes. It should behave very much like a modal.

I think the issue here is that there is some other DT focus events being bound to the button messing with Bootstraps/Popover.js. But I am unsure on how to debug this.

If I go the route of manually calling node.popover('show') that still wont help me hide the popover when it loses focus. Also, the popover IS being shown. If you click "Share" and hold your mouse down it will stay visible. It goes away on mouseup.

washuit-iamm

@allan because of the difficulties of this approach, can you think of any alternatives to a popover? My need is to generate and display a link when a row is selected.

Ideally id replace the button node with the contents of my popover. I noticed if I try and do node.wrap in init it does not work. I suppose id have to do all the dom option stuff? Not sure if thats dynamic enough for me.

washuit-iamm

@allan Solution: http://live.datatables.net/babopiku/1/edit

Not super thrilled with shoving it all in the initComplete. Have any better ideas?

Also, getting the count of selected rows seems like theres a better way than this: dt.rows(indexes).data().toArray().length

colin

Hi @washuit-iamm ,

An easy way to get the count is to do this: dt.rows({ selected: true }).count().

Out of interest, what's your objection to having the code in initComplete?

Cheers,

Colin

washuit-iamm

@colin In my experience as a developer putting global code in places like that make it more difficult for cross-cutting concerns and also overriding. For example, I have a base datatable configuration which I $.extend across all my other pages which use tables. Id have to override things now instead of selectively applying my button. A button is easier to shove in its own file and share across apps.

allan

The only other thing I can think of (other than API controlling it like my previous suggestion) would be to have the ability for Buttons not to bind its own events onto the buttons that it creates, but rather allow you to add your own (which could be done basically as you have in the init function). That would probably be the cleanest option - but just not certain how the API for that would look - haven't considered it before!

Allan