Coldfusion Ajax Programming (cfform, bind)

We use cfinput where by the type is datefield as a datepicker instead of some external javascript calendars. Faced growing problems using this but managed to overcome most of them except that it still does not overlap the form fields below it.

- Chrome cannot work –> solved by placing the cfform outside the table and add in style=”margin:0px”

- date display wrongly –> solved by putting the date object into the value. Use DateAdd to convert to date object

- onchange not supported on cfinput –> solved using cfajaxproxy bind expression
Eg:
<cfinput  name =”fromDate”
      id  =”fromDate”
      type =”datefield”
      class =”dateField”
      size =”11″
      maxlength=”10″
      validate=”eurodate”
      validateat=”onsubmit”
      mask =”dd/mm/yyyy”
      value =”#fromDateFormatted#”
      readonly>
<cfajaxproxy  bind=”javascript:bindChangeDate({fromDate})”>
<cfinput type=”hidden” name=”hidFromDate” id=”hidFromDate”
      value=”#DateFormat(fromDateFormatted,’dd/mm/yyyy’)#”>

// create ajax bind to datefield 
 function bindChangeDate(date) { 
  var oldDate = document.getElementById(‘hidFromDate’).value;
  var newDate = date;
  if(oldDate != newDate){
     alert(‘changed!’);   
}
 }

Url: http://www.packtpub.com/article/coldfusion-ajax-programming
Url: http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=ajaxdata_11.html
Url: http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=ajaxui_1.html#1096321