Question

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

First, you have some syntax errors. Perhaps this is just a problem as pasted above, and not in your real code. But make sure the body of your error and success functions are surrounded by curly brackets, not parentheses.

So instead of this:

error: function (xhr, textStatus, errorThrown)(
  alert(errorThrown);),

You should have this:

error: function (xhr, textStatus, errorThrown) {
  alert(errorThrown);
},

Second, your grid refresh is outside the success function of the ajax call. Since that call is asynchronous, the grid refresh is likely running before that call has completed. Move the refresh into your success callback function, like this:

success: function (response1, textStatus, jqXHR){
  ColdFusion.Grid.refresh('candidatesGrid', true);
  alert('success');
}

Third, if the content of the cfdiv is being loaded asynchronously, and the #candidatesubmit element is inside that dynamically loaded content, your function will not be bound to its click event because it won’t be present when the main page’s ready event is triggered.

So instead of directly binding to the element, use a delegation strategy by listening for events on an enclosing element that you know will be present in the initial page load. So instead of this:

$('#candidatesubmit').on('click', function () {

Try something like this:

$('#some_outer_div').on('click','#candidatesubmit', function () {

#some_outer_div will now be listening for any click events that bubble up from its descendant elements (even those that were not present when the page first loaded). If the target of one of those clicks is #candidatesubmit, the handler will fire.