Menu
I have a very simple page the has cfgrid recordset. When you click on the row, I am sending unique id to cfdiv and displaying a page with a jqueryui datepicker. However, when I click on a row the datepicker doesn't work. I've googled and googled and can't figure out why. Here's my code where the cfgrid and cfdiv are:
<html>
<head>
<title>Submit Roomate Available</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!---<script src="../assets/js/jQuery126-min.js""></script>--->
<script src="../assets/js/jquery-1.7.2.min.js""></script>
<script src="../assets/js/jquery-ui-1.8.21.custom.min.js""></script>
<link href="../assets/css/flick/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css">
</head>
<cfquery name="findrec" datasource="#datasourcename#">
SELECT *
FROM students
WHERE class = 'rmavail'
order by last
</cfquery>
<cflayout type="accordion" width="677">
<cflayoutarea title="Listings">
<cfform>
<cfgrid name="listings"
width="677"
height="200"
format="html"
query="findrec">
<cfgridcolumn name="listingID" header="Listing ID"/>
<cfgridcolumn name="first" header="First Name"/>
<cfgridcolumn name="last" header="Last Name"/>
<cfgridcolumn name="dateListed" header="Date Listed"/>
<cfgridcolumn name="email" header="Email"/>
<cfgridcolumn name="active" header="Active"/>
</cfgrid>
</cfform>
</cflayoutarea>
</cflayout>
<cfdiv bind="url:admin_rma.cfm?listingid={listings.listingID}&func=Edit"/>
</body>
And this is the page the cfdiv loads (admin_rma.cfm) -- this is where the datepicker sits and hopefully I can get working. I've tied every combination of where to put the jquery library and this is just one of the combinations...
<script>
$(function() {
$( "#datepicker" ).datepicker({ maxDate: "+1m +1w" });
});
</script>
<table cellpadding="0" cellspacing="0" width="698" align="center">
<tr align="left" class="formheaders">
<td>
<font color="red">*</font>Date Available</span> (mm/dd/yyyy) <br>
<input id="datepicker" type="text">
</td>
</tr>
</table>
553
This is because javascript executed before html content render on cfdiv tag. Try to give some delay using setTimeout function before calling datepicker and it should work. Try below
<script>
setTimeout(function() {
$( "#datepicker" ).datepicker({ maxDate: "+1m +1w" });
},500);
</script>
<table cellpadding="0" cellspacing="0" width="698" align="center">
<tr align="left" class="formheaders">
<td>
<font color="red">*</font>Date Available</span> (mm/dd/yyyy) <br>
<input id="datepicker" type="text">
</td>
</tr>
</table>
In this case I give delay of 500 milisecond before creating datepicker object to make sure input field already rendered in html context. PS: This is not proper solution since it may take more than 500 ms to load html content to cfdiv depending upon browser capabilities and size of html content. This is just to prove that datepicker() function called before it load.
Hope this help.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
