Exploring the world of Apache Cordova and jQueryUI is a new adventure for me. I am currently experimenting with formatting the layout of my index.html using jQueryUI.
As mentioned in this section of the jQueryUI tutorial, a widget can be added using the following code snippets:
<input type="text" name="date" id="date">
(in HTML) and
$( "#date" ).datepicker();
(inside a <script> tag in the header). This particular example adds the datepicker-widget to all html elements with an ID = date.
Now, my question is whether it's possible to add a widget to elements belonging to a specific html class (or similar concept) instead of by their ids. I require different ids for my elements as I retrieve them using Cordova's document.getElementById() method.
Here's an excerpt of my code:
<head>
<meta charset="utf-8" />
<title>MyApp</title>
<link href="jqueryui/css/ui-darkness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
<script src="jqueryui/js/jquery-1.10.2.js"></script>
<script src="jqueryui/js/jquery-ui-1.10.4.custom.js"></script>
<script>
// # = ID / . = Class
$("#datepicket").datepicker(); // Functional, widget added for ID
$(".button").button(); // Attempting to add widget by class, unsuccessfully.
$("#myBtn").button(); // Successfully adding widget by ID!
</script>
</head>
<body>
<button id="myBtn" class="button">
My button
</button>
...
The UI formatting works when utilizing the id selector "#myBtn", however, it fails to work when the class selector ".button" is used.
Does anyone have any suggestions on how to resolve this issue with multiple buttons having the same id (I would prefer not to assign a widget setting for each unique id/button)? Thank you!
***************** EDIT - THE FOLLOWING CODE IS FUNCTIONAL **********************
...
<script>
// Oops! Forgot to include THIS function declaration!!!
$(function () {
$(".button").button(); // # = ID / . = Class
$(".datepicker").datepicker();
});
</script>
...