Inject listener
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>YUI Calendar Control Example</title>
<link rel="stylesheet"
type="text/css"
href="yui/build/calendar/assets/skins/sam/calendar.css">
<script type="text/javascript"
src="yui/build/yahoo-dom-event/
yahoo-dom-event.js"></script>
<script type="text/javascript"
src="yui/build/calendar/calendar-min.js"></script>
<style type="text/css">
input {
margin:0px 10px 0px 10px;
}
</style>
</head>
<body class="yui-skin-sam">
<div>
<label>Please enter your date of birth:</label>
<input type="text" name="dobfield" id="dobfield">
<img id="calico" src="E:\HP_PROJECT\cal.png"
alt="Open the Calendar control">
</div>
<div id="mycal"></div>
<script type="text/javascript">
//create the namespace object for this example
YAHOO.namespace("yuibook.calendar");
//define the lauchCal function which creates the calendar
YAHOO.yuibook.calendar.launchCal = function() {
//create the calendar object, specifying the container
Var myCal = new YAHOO.widget.Calendar("mycal");
//draw the calendar on screen
myCal.render();
}
//define the showCal function which shows the calendar
Var showCal = function() {
//show the calendar
myCal.show();
}
//create calendar on page load
YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal);
//attach listener for click event on calendar icon
YAHOO.util.Event.addListener("calico", "click", showCal);
//myCal.hide();
</script>
</body>
</html>
I used the above code. But the problem with the code is that when I click on the image icon, nothing is displayed. I am new to javascript. Please help me how to implement the listener.
Please tell me where to do chages in code.
Thanks Padmaja
0
source to share
1 answer
The problem is what myCal
is the local variable for the function launchCal()
. Giving the variable myCal a globally accessible namespace will make it available to every scope.
Here's your original code (someone accidentally put my correct code in your original question = /)
YAHOO.namespace("yuibook.calendar");
//define the lauchCal function which creates the calendar
YAHOO.yuibook.calendar.launchCal = function() {
//create the calendar object, specifying the container
var myCal = new YAHOO.widget.Calendar("mycal");
//draw the calendar on screen
myCal.render();
}
//define the showCal function which shows the calendar
Var showCal = function() {
//show the calendar
myCal.show();
}
//create calendar on page load
YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal);
//attach listener for click event on calendar icon
YAHOO.util.Event.addListener("calico", "click", showCal);
//myCal.hide();
Now let's see my changes. Note the use of the global namespace YAHOO.
YAHOO.namespace("yuibook.calendar");
//define the lauchCal function which creates the calendar
YAHOO.yuibook.calendar.launchCal = function() {
//create the calendar object, specifying the container
YAHOO.yuibook.calendar.myCal = new YAHOO.widget.Calendar("mycal");
//draw the calendar on screen
myCal.render();
}
//define the showCal function which shows the calendar
Var showCal = function() {
//show the calendar
YAHOO.yuibook.calendar.myCal.show();
}
//create calendar on page load
YAHOO.util.Event.onDOMReady(YAHOO.yuibook.calendar.launchCal);
//attach listener for click event on calendar icon
YAHOO.util.Event.addListener("calico", "click", showCal);
//myCal.hide();
+1
source to share