» Forums
» The DHTML Calendar
» News
» JSCalendar in AJAX Page
» Re: JSCalendar in AJAX Page
Re: JSCalendar in AJAX Page
2008/10/04 14:46
Viewed 2853 times
Replies: 1/3
by OnGRay

I also hv the same problem, and i find a way to get around this.

Simple trick... use onclick=" Calendar.setup(.." instead of using script tag at yr ajax response page <script type="text/javascript"> Calendar.setup(...</script>
I notice there is a side-effect, i need to click twice to pop-up the calendar for the 1st time, after that it's work normal.

for example, do this on yr ajax response page

<input type="text" name="date" id="f_date_b" /><button type="reset" id="f_trigger_b"
onclick="Calendar.setup({
inputField : "f_date_b", //*
ifFormat : "%m/%d/%Y %I:%M %p",
showsTime : true,
button : "f_trigger_b", //*
step : 1
});">...</button>
Re[2]: JSCalendar in AJAX Page
2008/10/06 18:20
Viewed 3428 times
Replies: 1/2
by J_B

I got around the "side-effect" (having to click twice for the calendar to appear) by implementing this slightly differently, and adding a bit of code to dispatch a second click event to the element that triggers the pop-up calendar:

<input type='text' id='date' name='date' style='text-align: center;' size='10' maxlength='10' value='$date' onClick='calSetup_date(this)' readonly>
<script type="text/javascript">
function calSetup_date_$row(element)
{
Calendar.setup(
{
align : "br", // align to cover input field
inputField : "date", // ID of the input field
ifFormat : "%Y-%m-%d", // the date format
weekNumbers : false, // Don't display week numbers
step : 1, // year step in menu
}
);
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
element.dispatchEvent(evt);
}
</script>
last
Re[3]: JSCalendar in AJAX Page
2008/10/06 18:31
Viewed 4152 times
Replies: 1/1
by J_B

Well, a couple of typos, and there didn't seem to be a way to edit the original reply, so here's a corrected version of the html/js that gets inserted dynamically (the relevant parts, at least):

<input type='text' id='date' name='date' style='text-align: center;' size='10' maxlength='10' value='' onClick='calSetup_date(this)' readonly>
<script type="text/javascript">
function calSetup_date(element)
{
Calendar.setup(
{
align : "br", // align to cover input field
inputField : "date", // ID of the input field
ifFormat : "%Y-%m-%d", // the date format
weekNumbers : false, // Don't display week numbers
step : 1, // year step in menu
}
);
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
element.dispatchEvent(evt);
}
</script>
last
» Re[4]: JSCalendar in AJAX Page, by J_B [ quick view ]
Google