Using JQuery-UI and ("mydiv").load("url", function () { ... }); duplicating issue in FF/ICEWEASEL
Using JQuery-UI and ("mydiv").load("url", function () { ... }); duplicating issue in FF/ICEWEASEL
nowords
Posts: 8Questions: 0Answers: 0
Howdy,
First of all, thanks a lot for a great plugin.
I integrated it into our old system and really happy and enjoying opportunities for user interface and functionality.
I'm using DataTable with ColVis and ColReorder, playing with configuration settings, save, init, restore, columns manipulation, tabs and etc. Works just nice.
There are no issues in Chrome :)
I'm trying to use jquery-ui dialog for "overlay" functionality. I'm using external content. When I'm using simple HTML, hidden on the same page,
everything works fine in Chrome and Firefox/Iceweasel
as soon as I'm trying something like that
var dialogOpts = {
modal: true,
bgiframe: true,
autoOpen: false,
height: 600,
width: 800,
draggable: true,
resizeable: true
};
$("#dialog-form").load("url", function(){
$("#dialog-form").dialog(dialogOpts);
initForm();
});
I'm meeting DataTable duplication in Firefox problem.
it is loads on init. There are no errors. Works in Chrome and Firefox/Iceweasel. DataTable loads nicely. Initial rendering.
BUT: after i'm trying to use colvis or change columns order DataTable duplicates itself in scrollbody. IT is happens only in Firefox/Iceweasel
I was trying to implement the same with jquery-tools and have got the same issue. After HTML injects into DOM DataTable became broken.
There are no errors in error console. :(
Appreciate help.
Thanks a lot.
First of all, thanks a lot for a great plugin.
I integrated it into our old system and really happy and enjoying opportunities for user interface and functionality.
I'm using DataTable with ColVis and ColReorder, playing with configuration settings, save, init, restore, columns manipulation, tabs and etc. Works just nice.
There are no issues in Chrome :)
I'm trying to use jquery-ui dialog for "overlay" functionality. I'm using external content. When I'm using simple HTML, hidden on the same page,
everything works fine in Chrome and Firefox/Iceweasel
as soon as I'm trying something like that
var dialogOpts = {
modal: true,
bgiframe: true,
autoOpen: false,
height: 600,
width: 800,
draggable: true,
resizeable: true
};
$("#dialog-form").load("url", function(){
$("#dialog-form").dialog(dialogOpts);
initForm();
});
I'm meeting DataTable duplication in Firefox problem.
it is loads on init. There are no errors. Works in Chrome and Firefox/Iceweasel. DataTable loads nicely. Initial rendering.
BUT: after i'm trying to use colvis or change columns order DataTable duplicates itself in scrollbody. IT is happens only in Firefox/Iceweasel
I was trying to implement the same with jquery-tools and have got the same issue. After HTML injects into DOM DataTable became broken.
There are no errors in error console. :(
Appreciate help.
Thanks a lot.
This discussion has been closed.
Replies
Are you injecting HTML into the table? If so you would need to use the API. If not, then can you post a link to your page please, as this isn't an issue I immediately recognise and have an answer to.
Thanks,
Allan
I'm injecting HTML not into the table. It is just for dialog functionality. (see exact place at the bottom)
Sorry for too much HTML :)
Something like that.
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[% title %]
<!-- calendar stylesheet -->
@import "../lib/css/demo_page.css";
@import "../lib/css/demo_table_jui.css";
@import "../lib/css/ColReorder.css";
@import "../lib/css/ColVis.css";
<!-- include the Tools -->
<!-- main calendar program -->
<!-- language for the calendar -->
Active
Inactive
FirstName
LastName
Title
FirstName
LastName
Title
[% FOREACH user IN users_list_active %]
[% user.fn %]
[% user.ln %]
[% user.title %]
[% END %]
FirstName
LastName
Title
FirstName
LastName
Title
[% FOREACH user IN users_list_active %]
[% user.fn %]
[% user.ln %]
[% user.title %]
[% END %]
....Loading....
$(document).ready(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
//$( "#dialog:ui-dialog" ).dialog( "destroy" );
var dialogOpts = {
modal: true,
bgiframe: true,
autoOpen: false,
height: 600,
width: 800,
draggable: true,
resizeable: true
//dialogClass: "noTitleStuff"
};
$("#dialog-form").load("test.pl?action=add_user", function(){
$("#dialog-form").dialog(dialogOpts);
});
$("#test2").click(
function() {
$("#dialog-form").dialog("open");
});
$('table.display').dataTable( {
"sScrollX": "100%",
"bScrollCollapse": true,
"bPaginate": false,
"aaSorting": [init_sort],
"bJQueryUI": true,
"sDom": 'RC<\"clear\"><\"toolbar\">lfrtip',
"oColReorder": {
"aiOrder": init_col_order,
"fnReorderCallback": function () {
//var oTabs = $('#aatabs').tabs();
//var curr_table_object = fnCurrentTable(oTabs);
//var cur_oSsettings = curr_table_object.fnSettings();
// UpdateSession(cur_oSsettings);
}
},
"oColVis": {
"fnStateChange": function ( iColumn, bVisible ) {
// var oTabs = $('#aatabs').tabs();
// var curr_table_object = fnCurrentTable(oTabs);
// var cur_oSsettings = curr_table_object.fnSettings();
// UpdateSession(cur_oSsettings);
}
}
});
[/code]
So, I have problem right after that:
if i use this:
[code]
$("#dialog-form").load("test.pl?action=add_user", function(){
$("#dialog-form").dialog(dialogOpts);
});
content going into this div ....
[code]
....Loading....
[/code]
If I use Dialog with HTML on my page, I do not have problems. Problem exists only ICEWEASEL.
Happy new year :-)
Allan
[code]
jQuery.noConflict();
jQuery(document).ready(function($) {
...
}
[/code]
in this call
[code]
"oColReorder": {
"aiOrder": init_col_order,
"fnReorderCallback": function () {
var oTabs = $('#aatabs').tabs(); // tabs object
var curr_table_object = fnCurrentTable(oTabs); //active tab -> table
var cur_oSsettings = curr_table_object.fnSettings(); //get settings for table
UpdateSession(cur_oSsettings); // update session and db with user settings
}
},
[/code]
fnCurrentTable was a function outside of
[code]
jQuery(document).ready(function($) {
...
}
[/code]
and I called there var oTable = $('#example1').dataTable();
Looks like it was duplication of main object table.
Originally I used jQuery Tools, after I switched to jquery-ui for dialog and problem stayed. Then I started comment line by line and found where it is became broken. Issue between keyboard and chair :)