hover function not called inside datatable

pradeepnair

I'm facing an issue when i tried to integrate bootstrap sub menu within the datatable. Till the time it was direct menu it was working fine.

I have a function which is used to create table.

[code]
function filllisttable(id_tab, datauri, centercol_arr, tbtlcol_arr, mnu_fn, postcb_fn, hiddencol_arr) {
if (typeof hiddencol_arr === 'undefined') { hiddencol_arr = '[]'; };
if (typeof mnu_fn === 'undefined') { mnu_fn = ''; };
id_tab.dataTable({
"fnInitComplete": function (oSettings, json) {
if (postcb_fn != "") {
var pfns = eval(postcb_fn);
pfns();
};
},
"sDom": "<'row-fluid'<'span6'Rl><'span6'f>r>t<'row-fluid'<'span5'i><'span2'T><'span5'p>>", "bProcessing": true,
"sAjaxSource": "bins/ax_jn_" + datauri, "bDeferRender": true, "bDestroy": true,
"aoColumnDefs": [
{ "mRender": function (data, type, row) {
if (mnu_fn != "") { var fns = eval(mnu_fn); var dmnustr = fns(data, row); return dmnustr; }
}, "bSearchable": false, "bSortable": false, "sWidth": "10px", "aTargets": [1] },
{ "sClass": "center", "aTargets": centercol_arr },
{ "bVisible": false, "aTargets": hiddencol_arr }
],
"oLanguage": { "sEmptyTable": "Opps! Nothing here.", "sSearch": "" },
"oTableTools": { "aButtons": [
{ "sExtends": "copy", "sButtonText": 'Copy', "sButtonClass": "btn-navbar", "mColumns": tbtlcol_arr },
{ "sExtends": "print", "sButtonText": 'Print', "sButtonClass": "btn-navbar" },
{ "sExtends": "collection", "sButtonText": 'Save ', "aButtons": [{ "sExtends": "csv", "mColumns": tbtlcol_arr }, { "sExtends": "xls", "mColumns": tbtlcol_arr }, { "sExtends": "pdf", "sPdfOrientation": "landscape", "mColumns": tbtlcol_arr}], "sButtonClass": "btn-navbar" }
]
}
});
}
[/code]

Above function is executed like below

[code]filllisttable($('#envlist'), taburi, tb_centercols, toolsvaldcols, "crtabmenu", "closemod");[/code]

crtabmenu function returns the menu string which requires to be populated in each row depending on the custom requriement.
[code]
function crtabmenu(data, row) {
var ddmnu, ddimg, ddsts;
var ddmnu;
menustr = '' + row[2] + ' '
menustr += ' Edit Properties';
if (row[0].split(":")[0] != 2) {
menustr += 'Management '
menustr += 'Menu 1';
menustr += ' Menu 2';
menustr += 'Menu 5 '
}
ddmnu = '' +
'' +
'' + menustr + '' +
'';
return ddmnu;
}
[/code]

above works fine for me till the time i used a submenu option with above. which is defined in http://jsfiddle.net/4nMkh/4/

my sub menu is as below
[code]



test
Edit Properties
Manage Properties

Menus

Menus
Menus
Menus
Menus




[/code]

The main div till Manage properties is shown properly but submenu is not visible. As per the above link there is a event trapped for .submenu on hover. which is not fired when put inside above. but if i put it inside TH of the table directly it works perfectly.
[code]
$('.submenu').hover(function () {
$(this).children('ul').removeClass('submenu-hide').addClass('submenu-show');
}, function () {
$(this).children('ul').removeClass('.submenu-show').addClass('submenu-hide');
}).find("a:first").append(" » ");
[/code]
Am i doing something wrong here? Or the there is some limitation of doing above?

Do help, im stuck on this for hours now.

pradeepnair

http://debug.datatables.net/ewicod

pradeepnair

Ignore this.. I got the solution,
[code]
$('.submenu').hover(function () {
$(this).children('ul').removeClass('submenu-hide').addClass('submenu-show');
}, function () {
$(this).children('ul').removeClass('.submenu-show').addClass('submenu-hide');
}).find("a:first").append(" » ");
[/code]

this needs to be defined during fnInitComplete