Question

I’m going to repeat a question I asked earlier but I need help using datepicker. I don’t see how to use the same solution I got for an .on(‘click’) problem. I can see how datepicker might be an on.click event. The solution was to put the CFdiv inside a div and listen for onclick on an element inside that element. The input for the datepicker functions below is;

<cfinput type="text" class="datestuff" name="IndepthWRec" id="IndepthWRec" value="#CandidateChecklistInfo.IndepthWRec#" />

I have a CF page that has a CFdiv. The Cfdiv is bound to an element on the page. The main page contains the script. None of the script executes on elements in the CFdiv. There seems to be a problem with the ajax call. When I take that code out, the rest of the code seems to be enabled in Firebug but still will not execute.

<script type="text/javascript">
  $(document).ready(function () {
    $('#candidatesubmit').on('click', function () {
      $.ajax({
      type: 'POST',
      url: 'actEditStatusForm.cfm',
      data: 'form=',
      error: function (xhr, textStatus, errorThrown)(
      // show error 
      alert(errorThrown);),
      success: function (response1, textStatus, jqXHR)(
      alert('success');)
       });
    ColdFusion.Grid.refresh('candidatesGrid', true);
  });
  $(function () {$("#JDOrgChartRESOutlineSentToCand").datepicker({dateFormat: 'yy/mm/dd'});});
  $(function () {$("#IndepthWRec").datepicker({dateFormat: 'yy/mm/dd'});});
</script>

Answer 1

If you are loading the form with ajax, you need to initialize the datepicker within the success callback of the ajax after the new html has been inserted. You can’t call datepicker prior to the element’s existence so delegation methods like on() are useless