problem combining datatables with datepicker
problem combining datatables with datepicker
I am trying to use both datatables and datepicker in the same page. Can you help me out.
I have a html page for datepicker which works OK: (ignore the alert when you load it)
http://www.renderplus.com/archon_php/test_datepicker.htm
I have a page for datatables which works OK (ignore the alert when you load it)
http://www.renderplus.com/archon_php/test_datepicker.htm
But when I combine them both onto one page, I get a problem where the init function for datatables is called twice.
In the middle of initializing datepicker the start function is run again. You can see this because of the alerts "at1", "at2", etc. which are being displayed twice.
I suspect this is related to including .js for Jquery datepicker and .js for datatables.
Here is the html file which tries to do both:
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "../DataTables-1.7.4/media/css/demo_page.css";
@import "../DataTables-1.7.4/media/css/demo_table.css";
<!-- DatePicker JS -->
<!-- DataTales JS -->
$(document).ready(function() {
alert("Set dataTable");
$('#example').dataTable( {
"aaSorting": [[ 4, "desc" ]]
} );
alert("Set datepicker");
$( "#datepicker" ).datepicker();
} );
test_both
Date:
<!-- End demo -->
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Trident
Internet
Explorer 4.0
Win 95+
4
X
Trident
Internet
Explorer 5.0
Win 95+
5
C
Trident
Internet
Explorer 5.5
Win 95+
5.5
A
[/code]
I have a html page for datepicker which works OK: (ignore the alert when you load it)
http://www.renderplus.com/archon_php/test_datepicker.htm
I have a page for datatables which works OK (ignore the alert when you load it)
http://www.renderplus.com/archon_php/test_datepicker.htm
But when I combine them both onto one page, I get a problem where the init function for datatables is called twice.
In the middle of initializing datepicker the start function is run again. You can see this because of the alerts "at1", "at2", etc. which are being displayed twice.
I suspect this is related to including .js for Jquery datepicker and .js for datatables.
Here is the html file which tries to do both:
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "../DataTables-1.7.4/media/css/demo_page.css";
@import "../DataTables-1.7.4/media/css/demo_table.css";
<!-- DatePicker JS -->
<!-- DataTales JS -->
$(document).ready(function() {
alert("Set dataTable");
$('#example').dataTable( {
"aaSorting": [[ 4, "desc" ]]
} );
alert("Set datepicker");
$( "#datepicker" ).datepicker();
} );
test_both
Date:
<!-- End demo -->
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Trident
Internet
Explorer 4.0
Win 95+
4
X
Trident
Internet
Explorer 5.0
Win 95+
5
C
Trident
Internet
Explorer 5.5
Win 95+
5.5
A
[/code]
This discussion has been closed.
Replies
The thing which strikes me immediately is that you are including the jQuery library twice. Once just above the Data Picker include, and once above DataTables. You only need to do it once! I'm not sure that this would cause double initialisation, but it can certainly cause odd things to happen (in this case it would probably cause Date Picker not to work at all).
So try just removing the second jQuery include.
Failing that, do you have a link to the example that you are working on (i.e. the running HTML from above) so I can see it in action?
Thanks,
Allan
thanks
[code]
$('#pricing').dataTable({
"aoColumnDefs": [ { "sClass": 'ui-datepicker-inline', "aTargets": [ 3,5 ] } ],
rest of your take setup here
});
[/code]
Next setup handling
[code]
// select everything when editing field in focus
$('#pricing tbody td input').live('focus', function (e){
$(this).select();
});
// attach datepicker on focus and format to return yy-mm-dd
$('#pricing tbody td.ui-datepicker-inline input').live('focus', function (e){
$(this).datepicker({ dateFormat: 'yy-mm-dd' }).datepicker("show");
});
// override normal blur function ( needed for date month switching )
$('#pricing tbody td input').live('blur', function (e){
return false;
});
// set change function to handle sumbit
$('#pricing tbody td.ui-datepicker-inline input').live('change', function (e){
$(this).parents("form").submit();
});
[/code]
I have similar problem with combination of Datepicker and ColVis.
If I will call
[code]