I have a small script that retrieves rental dates when the page loads, and also retrieves new dates if the user selects another month from the drop-down list.
The site uses jQuery 1.2.3, and at the moment I stick to it (legacy scripts), so I can not upgrade to 1.4.
I wrote and debugged this in Firefox with Firebug and realized that it does not work in any other browser. I do not know why. In Firefox, I definitely get new dates, and the div itself is updated with the received AJAX data. Other browsers do nothing.
$(document).ready(function() {
$.ajax({
url: '/rental/get_dates.cfm',
type: 'POST',
data: 'date=<cfoutput>#dateFormat(now(), "m-yyyy")#</cfoutput>&rental=<cfoutput>#val(getOneRental.rentalListingID)#</cfoutput>',
success: function(data) {
$('#rental_calendar .rentalRateData').html(data);
}
});
});
function update_calendar(date) {
$.ajax({
url: '/rental/get_dates.cfm',
type: 'POST',
data: 'date='+date+'&rental=<cfoutput>#val(getOneRental.rentalListingID)#</cfoutput>',
success: function(data) {
$('#rental_calendar .rentalRateData').html(data);
}
});
}
HTML:
<form name="rental_month" id="rental_month" method="post">
<select name="month">
<cfset month_choice = dateFormat(now(), 'm-yyyy')>
<cfoutput>
<option value="#lcase(month_choice)#" onclick="update_calendar('#month_choice#');" class="default">#dateFormat(month_choice, 'mmmm yyyy')#</option>
</cfoutput>
<cfloop from="1" to="12" index="i">
<cfset month_choice = dateFormat(dateAdd('m', i, now()), 'm-yyyy')>
<cfoutput>
<option value="#lcase(month_choice)#" onclick="update_calendar('#month_choice#');">#dateFormat(month_choice, 'mmmm yyyy')#</option>
</cfoutput>
</cfloop>
</select>
</form>
<div id="rental_calendar">
<table class="rentalRates" cellpadding="0" cellspacing="0" width="98%">
<tr>
<th align="left">Arrival</th>
<th align="right">Rate</th>
</tr>
</table>
<table class="rentalRateData" cellpadding="0" cellspacing="0" width="98%">
</table>
</div>
Why does this only work in Firefox? Is there an easier way to do this?
Kevin