» Forums
» The DHTML Calendar
» News
» JSCalendar in AJAX Page
JSCalendar in AJAX Page
2008/09/04 05:04
Viewed 3662 times
Replies: 1/4
by cipto_kh

Hi, I have an AJAX page like this:
Index.php
<html>
<table>
<tr>
<td>
<div id="menu">
</div>
</td>
<td>
<div id="mainarea">
</div>
</td>
</tr>
</table
</html>

Then I load addnewapp.php into "mainarea". The JSCalendar I want to display inside of addnewapp.php. The code in addnewapp.php is like this:

<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="../calskin/theme.css" />
<script type="text/javascript" src="../scripts/calendar.js"></script>
<script type="text/javascript" src="../scripts/calendar-id.js"></script>
<script type="text/javascript" src="../scripts/calendar-setup.js"></script>
</head>
<body>
<input readonly="1" name="tanggal" type="text" id="tanggal" size="18" />
<img src="../images/calendar.gif" name="f_trigger_c" width="20" height="19" align="top" id="f_trigger_c" style="cursor: pointer; border: 1px solid red;" title="Pilih tanggal" onMouseOver="this.style.background='red';" onMouseOut="this.style.background=''" />

<script type="text/javascript">
Calendar.setup({
inputField : "tanggal",
ifFormat : "%B %e, %Y",
button : "f_trigger_c",
singleClick : true
});
</script>
</body>
</html>

But it nothing happen, what must I do to make JSCalendar show in my addnewapp.php? If just normal page call (not thorough AJAX call) it run smoothly.

TIA
Re: JSCalendar in AJAX Page
2008/10/04 14:46
Viewed 2846 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>
last
Re[2]: JSCalendar in AJAX Page
2008/10/06 18:20
Viewed 3419 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, by J_B [ quick view ]
» Re[4]: JSCalendar in AJAX Page, by J_B [ quick view ]
Google