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'
            });
        });
    }

score 0 · Accepted Answer · answered Mar 21 '13 at 13:12

0

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'
    });
}

answered Mar 21 '13 at 13:12

ThiefMaster

310,957
84
592
636

I did that and got the alert "startup" but no date function on the input fields. – user990016 Mar 21 '13 at 13:14
does your `` actually exist in the DOM? – ThiefMaster Mar 21 '13 at 13:16
function initCandidateScript() { $(function () { alert('starting'); $('input.datestuff').datepicker({ Uncaught TypeError: Object # – user990016 Mar 21 '13 at 13:19
This means jQuery UI is not loaded at all. – ThiefMaster Mar 21 '13 at 13:19
jquery 1.3.2 and jquery_ui.min and jquery.min are loaded – user990016 Mar 21 '13 at 13:22
why are you using such an ancient version? and if you indeed load jquery twice that's your problem. especially if you load another jquery version after loading jquery ui. – ThiefMaster Mar 21 '13 at 13:23
The actual lines are; – user990016 Mar 21 '13 at 15:13
I found about 7 included pages that had jquery 1.3.2 included. I have commented them out. But still not datepicker. – user990016 Mar 21 '13 at 15:29
Uncaught ReferenceError: initCandidateScript is not defined But it is defined; – user990016 Mar 21 '13 at 16:51
probably you try to call it before the file containing it is included – ThiefMaster Mar 21 '13 at 17:34
The only place it isn't working now is withing a cfwindow. Even if I add the code to that window, it doesn't work (no date widget). – user990016 Mar 21 '13 at 19:07

cfajax jquery javascript

1 Answers1