multiple tables, jquery qtip2 what am I missing?
multiple tables, jquery qtip2 what am I missing?
Hello,
I'm trying to get the qtip2 plugin ( http://craigsworks.com/projects/qtip2/tutorials/advanced/#plugins ) to work with my implementation of datatables. I am using datatables in a multiple table scenario and this is what I have so far:
[code]
var oTable;
$(document).ready(function() {
/* Initialise datatables*/
oTable = $('.dataTable').dataTable({
"bFilter" : false
});
$(oTable.fnGetNodes()).each (function() {
var nTds = $('td', this);
var c_id = $(nTds[0]).text();
console.debug('test ' + c_id);
$(this).qtip ({
content: {
text: 'Loading...',
ajax: {
url: 'application/condition_names',
type: 'GET',
data: { id: c_id },
dataType: 'json',
success: function(data, status) {
this.set('content.text', data.name);
}
}
},
position: {
my: 'left top',
at: 'bottom right'
}
});
});
});
[/code]
Datatables works just fine without the qtip2 code and the qtip2 code works fine without the datatables code. When I merge them together as shown in the code above I'm not able to get the qtips to show properly. If one datatable is on the page, they don't appear next to the respective row/cell upon mouseover, but instead appear off the page somewhere else. I know that they are somewhere off the page because I'm able to see within chrome developer tools or FF firebug the firing of the qtip2 when I mouseover the table cells. If the page has multiple tables qtip2 doesn't work at all.
What I am expecting/wanting to happen is that when you hover over the first column of a row, grab the id in that cell, call the controller action "condition_names" and return the condition name for the id in that cell, display that name in the qtip near that td/cell for any and all datatables rendered on the page.
Any thoughts/suggestions on what I'm missing?
Thanks.
I'm trying to get the qtip2 plugin ( http://craigsworks.com/projects/qtip2/tutorials/advanced/#plugins ) to work with my implementation of datatables. I am using datatables in a multiple table scenario and this is what I have so far:
[code]
var oTable;
$(document).ready(function() {
/* Initialise datatables*/
oTable = $('.dataTable').dataTable({
"bFilter" : false
});
$(oTable.fnGetNodes()).each (function() {
var nTds = $('td', this);
var c_id = $(nTds[0]).text();
console.debug('test ' + c_id);
$(this).qtip ({
content: {
text: 'Loading...',
ajax: {
url: 'application/condition_names',
type: 'GET',
data: { id: c_id },
dataType: 'json',
success: function(data, status) {
this.set('content.text', data.name);
}
}
},
position: {
my: 'left top',
at: 'bottom right'
}
});
});
});
[/code]
Datatables works just fine without the qtip2 code and the qtip2 code works fine without the datatables code. When I merge them together as shown in the code above I'm not able to get the qtips to show properly. If one datatable is on the page, they don't appear next to the respective row/cell upon mouseover, but instead appear off the page somewhere else. I know that they are somewhere off the page because I'm able to see within chrome developer tools or FF firebug the firing of the qtip2 when I mouseover the table cells. If the page has multiple tables qtip2 doesn't work at all.
What I am expecting/wanting to happen is that when you hover over the first column of a row, grab the id in that cell, call the controller action "condition_names" and return the condition name for the id in that cell, display that name in the qtip near that td/cell for any and all datatables rendered on the page.
Any thoughts/suggestions on what I'm missing?
Thanks.
This discussion has been closed.
Replies
I finally got it to work for my situation in the original post by doing 2 things.
1) I scoured through the posts on this forum and saw some mention of how to gain access to an individual datatables if you are implementing more than one datatables on a page. I'm not sure if it's the best or most accurate solution, but it seems to be doing what I would like for the moment. You'll see in my code below that I'm doing an outer for loop that iterates over the number of tables on the page and then for each table on the page I loop through their "tr's" and grab the first "td" of each "tr" as that is storing the id that I'm looking to send via the ajax call.
2) I needed to download a newer nightly build for qtip2 because I think the nightly build I had downloaded may have had a bug somewhere. Whether or not this is the case, the new download got the qtips appearing on screen and in the right location.
Here is my final code. Hopefully it helps.
[code]
var oTable;
$(document).ready(function() {
/* Initialise datatables*/
oTable = $('.dataTable').dataTable({
"bFilter" : false
});
var i = 0;
for (i = 0; i <= oTable.length; i++) {
oTable.dataTableExt.iApiIndex = i;
$(oTable.fnGetNodes()).each (function() {
var nTds = $('td', this);
var c_id = $(nTds[0]).text();
$('td', this).qtip ({
content: {
text: 'Loading...',
ajax: {
url: 'application/condition_names',
type: 'GET',
data: { id: c_id },
dataType: 'json',
success: function(data, status) {
this.set('content.text', data.name);
}
}
},
position: {
my: 'left top',
at: 'right center'
}
});
});
}
});
[/code]