DataTables

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:

$(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) {
			$('<div class="modal" >' + data + '</div>').modal();
		}).success(function() { $('input:text:visible:first').focus(); });
	}
});

});

to this:

$(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 <a> 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) {
				$('<div class="modal" >' + data + '</div>').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) {
				$('<div class="modal" >' + data + '</div>').modal();
			}).success(function() { $('input:text:visible:first').focus(); });
		}
	});

});

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

DataTables

Howdy, Stranger!

Support

Categories

In this Discussion