Bootstrap 2 Javascript Plugin Issues (Modal, Tooltip, Popover)

byujensen

I recently discovered Datatables for Twitter Bootstrap and I love it! Great work!

Many of the bootstrap javascript plugins don't seem to work consistently with datatables. The specific javascript plugins I have tried without success are:

- tooltips
- popover
- modal

(as seen on http://twitter.github.com/bootstrap/javascript.html)

I've set up a page with as little customizing as possible, based on the example shown on the datatables website (http://datatables.net/media/blog/bootstrap_2/).
The following link shows exactly what I'm talking about:

http://jakeandjake.com/testing/test.html

and here are the other files stored locally:

http://jakeandjake.com/testing/mymodal.html - the modal that is displayed
http://jakeandjake.com/testing/bootstrap.js - the entire bootstrap javascript plugins


My Observations

- The "My Modal" at the top (not in the datatable) always works
- The "My Modal" links within the datatable work when the page is first loaded
- The "My Modal" links within the datatable continue to work when searching for something like "OSX"
- The "My Modal" links within the datatable break when searching for something like "em"
- The "My Modal" links within the datatable break when doing various column sorting, but they don't always break with each sort.
For example: Sorting the "Rendering engine" column ascending yields working links, while sorting it descending breaks the links.
- After trying a broken "My Modal" link (after first breaking the links by sorting or searching), you can "fix" the links by resorting or deleting the search
- This issue is consitent accross browsers (Safari, Chrome, Firefox)

Any advice?

allan

Sounds very much like the top FAQ is relevant here: http://datatables.net/faqs#events . You need to use live or delegate events.

Allan

byujensen

Thanks for your help Allan. I finally got this to work.

Here are some links that were helpful:

http://www.datatables.net/forums/discussion/1191/use-jquery-live-to-add-events-to-a-column/p1

I was using the dynamically loading AJAX modal for bootstrap (https://gist.github.com/1688900). First, I changed the the js from this:
[code]
$(document).ready(function() {

// Support for AJAX loaded modal window.
// Focuses on first input textbox after it loads the window.
$('[data-toggle="modal"]').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
if (href.indexOf('#') == 0) {
$(href).modal('open');
} else {
$.get(href, function(data) {
$('' + data + '').modal();
}).success(function() { $('input:text:visible:first').focus(); });
}
});

});
[/code]

to this:

[code]
$(document).ready(function() {

// This is what triggers for a modal link in Datatables.
// Note I put an extra class in my links, class='mymodallink'
// in the tag. Note that the e.preventDefault() is
// commented out. I'm not sure why it wouldn't work
// with it...
$("#example .mymodallink").live("click", function() {
//e.preventDefault();
var href = $(this).attr('href');

if (href.indexOf('#') == 0) {
$(href).modal('open');
} else {
$.get(href, function(data) {
$('' + data + '').modal();
}).success(function() { $('input:text:visible:first').focus(); });
}
});

// This is the normal way of using an AJAX modal based on
// https://gist.github.com/1688900
// except I changed the data-toggle attribute to 'normalmodal'
// because I didn't want the datatables links to sometimes
// trigger two modals.
$('[data-toggle="normalmodal"]').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
if (href.indexOf('#') == 0) {
$(href).modal('open');
} else {
$.get(href, function(data) {
$('' + data + '').modal();
}).success(function() { $('input:text:visible:first').focus(); });
}
});

});

[/code]

It may not be the prettiest code ever, but it works for me. Thanks.