Bootstrap 2 Javascript Plugin Issues (Modal, Tooltip, Popover)
Bootstrap 2 Javascript Plugin Issues (Modal, Tooltip, Popover)
byujensen
Posts: 2Questions: 0Answers: 0
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?
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?
This discussion has been closed.
Replies
Allan
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.