Just getting started with jQuery and javascript and decided to test out 2 different jQuery-ui stylesheets in a simple .html file.
The goal is to have the example dialog open with the "flick" stylesheet and the datepicker within the dialog open with the "ui-lightness" stylesheet.
Even though I have tried to append the selected stylesheet when the user clicks the textbox in the dialog, it seems that the "flick" stylesheet is still being used.
Here is the code from my html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Multiple Themes</title>
<link rel="stylesheet" type="text/css" href="css/flick/jquery-ui-1.9.0.custom.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
function openDialog() {
$("#dialog").dialog();
}
function loadDatePicker() {
$('head').append('<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.1.8.24.custom.css">');
$("#date").datepicker({});
}
</script>
</head>
<body>
<input type="button" value="Open Dialog" onclick="openDialog()">
<div id="dialog" title="Test Mutiple Themes" style="display: none">
Click to open a date picker in a different CSS theme
<input id="date" type="text" size="8" onclick="loadDatePicker()">
</div>
</body>
</html>
It's possible that there's a small syntax mistake somewhere that I'm overlooking because of my limited experience with these scripts.