cfajax jquery javascript

Question

I'm using Jquery datepicker on a lot of text input fields. It is not working. I have my javascrippt in an include file and do a savecontent so that I can use cfhtmlhead. Dev tools console shows me an error;

<script type="text/javascript">/* <![CDATA[ */
ColdFusion.Event.registerOnLoad(initCandidateScript,null,false,true);
// Uncaught ReferenceError: initCandidateScript is not defined  <---------console error
/* ]]> */
</script>



<cfajaximport tags="cfgrid,cfform,cfinput-autosuggest,cfinput-  datefield,cftextarea,cfwindow">
<style>
#ui-datepicker-div { z-index:10000; } 
</style>
<cfsavecontent variable="JobAdScript">
<script language=JavaScript src="picker.js"></script> 
<script language=JavaScript src="JobAdsJavascript.js"></script> 
</cfsavecontent>
<cfhtmlhead text="#JobAdScript#" />
<cfset ajaxOnLoad("initCandidateScript")>

This code is in the include js file;

$(document).ready(function () {
    function initCandidateScript() {
        $(function () {
            alert('starting');
            $('input.datestuff').datepicker({
                dateFormat: 'yy/mm/dd'
            });
        });
    }

Answer 1

You need to move the initCandidateScript definition outside the document-ready event callback. There is no point in delaying a function definition until the DOM is ready.

Besides that, the CF JavaScript framework seems to delay the execution of that function until everything is ready and loaded anyway.

So, simply define the function like this in your .js file - without wrapping it with a DOM ready event.

function initCandidateScript() {
    $(function() {
        alert('starting');
        $('input.datestuff').datepicker({
            dateFormat: 'yy/mm/dd'
        });
    });
}

Actually, you can simplify it even more since right now you have another DOM ready callback inside your function which you do not need:

function initCandidateScript() {
    $('input.datestuff').datepicker({
        dateFormat: 'yy/mm/dd'
    });
}