Skip to main content
WolfShade
WolfShade
Legend
June 1, 2020
Question

Odd jQuery 'undefined' issue

  • June 1, 2020
  • 6 replies
  • 1655 views

Hello, all,

 

I've got a weird situation that's got me scratching my head.

 

I've got a form page, which includes an older version of jQuery (1.11.2) at the top of the page.  Near the bottom of this page I am CFINCLUDING a .js file.  Works great.

 

Tried updating to jQuery 3.5.1, and suddenly this included .js file breaks, stating that "'$' is undefined on line 11."  But $ is being used on at least seven lines prior to line 11.

 

$('#thisForm').css({..});  /*  THESE lines don't break  */
$('#thisForm').attr(...);
...
function ums(val){
    switch(val){
        case 'a': case 'b': case 'c':
            $('#thisForm').css({...});  /*  THIS is the line that breaks */
        break;
        default: break;
        }
ums($('#thisSelect').val());  /*  Triggered by this line  */

 

Totally stumped on this one.  Ideas?

 

V/r,

 

^ _ ^

This topic has been closed for replies.

6 replies

WolfShade
WolfShadeAuthor
Legend
June 3, 2020

This.

 

It hadn't occurred to me that to CFINCLUDE a .js file might be the culprit.  Still doesn't explain why it works with v1.11.2, but next time I'm in the office, this will be the very first thing I look into.

 

Not sure when that next time will be, but I'll arrange something with a co-worker.  He can push files to production, but for some reason can't test anything, so we both have to be in the office at the same time.  🙂

 

V/r,

 

^ _ ^

BKBK
Community Expert
BKBKCommunity Expert
Community Expert
June 3, 2020

The change in version from jQuery 1.11.2 to jQuery 3.5.1 is huge. We should therefore expect "breaking" changes.

BKBK
Community Expert
BKBKCommunity Expert
Community Expert
June 3, 2020

@WolfShade: Near the bottom of this page I am CFINCLUDING a .js file.  

A likely cause of the problem. Mixing JS and CFML idioms might mess up the order in which the Javascript is delivered to the page.

 

This shouldn't be a problem:

<head>
    <script src="path/to/jquery-3.5.1.min.js" type="text/javascript">
    </script>
</head>

 

    WolfShade
    WolfShadeAuthor
    Legend
    June 3, 2020

    Yeah, it's caused me to really think outside the box.  But, I can proudly state that I have been able to deliver on about 95% of what I've been tasked to do.  The remaining 5%, well, let's just say I'm not happy about telling the customer it can't be done under the circumstances.  Neither are they.

     

    The path to the file exists, because at least _some_ processing is being done.  I just can't understand why it exists for some of the code, but then mysteriously disappears for one line.  It makes no sense.

     

    V/r,

     

    ^ _ ^

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    June 3, 2020

    Wow, necessity is indeed the mother of invention. 95% delivery puts you way, out there, ahead of the field! Hats off. 

    WolfShade
    WolfShadeAuthor
    Legend
    June 3, 2020

    Unfortunately, I can't do that.

     

    Firstly, because we are not allowed to use CDNs.

     

    Secondly, because the code I'm working on exists on our encrypted network, which does not have access to the internet.

     

    I'd have to download all the previous versions to disk, xfer them to the network, and try that.

     

    V/r,

     

    ^ _ ^

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    June 3, 2020

    Oh, of course. You've said really.

    I should remember strait-jackets are mandatory where you work. 😉 

    In any case, copying the Javascript to your local machine is good, too.

    You could add, for testing purposes:

     

    Does Javascript path exist? <cfoutput>#fileExists(absolute_path_to_Javascript_file)#</cfoutput>
    WolfShade
    WolfShadeAuthor
    Legend
    June 2, 2020

    No change.

     

    V/r,

     

    ^ _ ^

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    June 3, 2020

    Hmm, so it's unlikely to be syntax, and likely to be the JQuery URL. I would go old-school, and test each of the following URLs in turn:

    <!--- URLs to test --->
<!---
https://code.jquery.com/jquery-3.5.1.js
https://code.jquery.com/jquery-3.5.1.min.js
https://code.jquery.com/jquery-2.2.4.js
https://code.jquery.com/jquery-2.2.4.min.js
--->
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript">
    </script>
</head>
<body>
</body>
</html>

     

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    June 2, 2020

    Strange. Does this fare any better:

     

    case 'a': 
case 'b': 
case 'c':           
$("#thisForm").css({...});
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices