Javascript not loaded correcly order?

Question

I have a webpage where I load some javascript files in header. Some subpage will load aditional javascript files. On the main page everything is working just fine but on the subpage I get alot of exceptions like this :

Uncaught TypeError: Property '$' of object [object Object] is not a function

I can see that this exception occurs in details.js, voteHandler.js and 4 times in the HTML page itself. The exception is always thrown on this line :

$("document").ready(function () {

This is how the main page that works looks like :

<head>
        <script type="text/javascript" src=/Scripts/jquery-1.7.1.min.js></script>
        <script type="text/javascript">
            //URL for voting
            var _postVoteUrl = 'http://localhost:5215/Post/Vote'
            //URL for tags
            var _tagsUrl = 'http://localhost:5215/Post/Tags'

            //Keep track of if a cascading is loading, if so, cancel submits
            var cascadingControlLoading = false;
            window.latestClick = '';

            function IsNotDblClick(objectID) {
                if (window.latestClick != objectID &&
                    !cascadingControlLoading) {
                    window.latestClick = objectID;
                    return true;
                } else {
                    return false;
                }
            }

            $(document).ready(function () {
                if($('#rightCon').text().trim().length < 1)
                {$('#rightCon').hide();}
            });

        </script>
        <script type="text/javascript" src=/Scripts/jquery-ui-1.8.20.min.js>"></script>
        <script type="text/javascript" src=/Scripts/jquery.elastic.source.js></script>
        <script type="text/javascript" src=/Scripts/jquery.validate.min.js></script>
        <script type="text/javascript" src=/Scripts/jquery.validate.unobtrusive.min.js></script>
        <script type="text/javascript" src=/Scripts/jquery.qtip.min.js></script>  
        <script type="text/javascript" src=/Scripts/formhandler.js></script>
        <script type="text/javascript" src=/Scripts/taghandler.js></script>
        <script src="/Scripts/voteHandler.js"></script>
        <script type="text/javascript" src=/Scripts/select2.min.js %>"></script>

    <script>
        function TogglePostCon() {
            $('#postListEditorCon').toggle();
        }


        SetupTagTextBox("txtTagBox", false);
        SetupTagTextBoxPersonalTag("txtPersonalTagBox", true);
        SetupTagTextBoxPersonalTag("txtPersonalIgnoreTagBox", true);
    </script>

        <script src="/Scripts/modernizr-2.5.3.js"></script>
    </head>

And this is the subpage that throws the exceptions :

    <head>
            <script type="text/javascript" src=/Scripts/jquery-1.7.1.min.js></script>
            <script type="text/javascript">
                //URL for voting
                var _postVoteUrl = 'http://localhost:5215/Post/Vote'
                //URL for tags
                var _tagsUrl = 'http://localhost:5215/Post/Tags'

                //Keep track of if a cascading is loading, if so, cancel submits
                var cascadingControlLoading = false;
                window.latestClick = '';

                function IsNotDblClick(objectID) {
                    if (window.latestClick != objectID &&
                        !cascadingControlLoading) {
                        window.latestClick = objectID;
                        return true;
                    } else {
                        return false;
                    }
                }

                $(document).ready(function () {
                    if($('#rightCon').text().trim().length < 1)
                    {$('#rightCon').hide();}
                });
            </script>
            <script type="text/javascript" src=/Scripts/jquery-ui-1.8.20.min.js>"></script>
            <script type="text/javascript" src=/Scripts/jquery.elastic.source.js></script>
            <script type="text/javascript" src=/Scripts/jquery.validate.min.js></script>
            <script type="text/javascript" src=/Scripts/jquery.validate.unobtrusive.min.js></script>
            <script type="text/javascript" src=/Scripts/jquery.qtip.min.js></script>  
            <script type="text/javascript" src=/Scripts/formhandler.js></script>
            <script type="text/javascript" src=/Scripts/taghandler.js></script>
            <script src="/Scripts/details.js"></script>
            <script src="/Scripts/voteHandler.js"></script>
       <script>
$(function () {

                //Google +1
                $.getScript("http://apis.google.com/js/plusone.js", null, true);

                //Twitter
                $.getScript("http://platform.twitter.com/widgets.js", null, true);

                //Facebook
                $.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {

                    $('body').append('<div id="fb-root"></div>');

                    FB.init({ status: true, cookie: true, xfbml: true });

                }, true);
            });
    </script>

        <script src="/Scripts/modernizr-2.5.3.js"></script>
    </head>

I hade some of the scripts loaded at the bottom of the body before and this did not generate the exception but from what I read this is not a recomended way to go.

So why is my subpage generating these exceptions?

Who said that loading scripts at the end of the body is bad? I thought it was recommended because it loads the page faster... — kasper Taeymans, Sep 21 '13 at 08:23
Is [`jQuery.noConflict()`](http://api.jquery.com/jQuery.noConflict/) being used anywhere? Also, are these pages generated by a server-side environment? There's a few extra operators, include a `%>`, in the snippet that suggest embedded code. If so, are the ` — Jonathan Lonowski, Sep 21 '13 at 08:24
@kasperTaeymans : thanks I read it somewhere but I supose that was wrong then. Thanks for the heads up. — Banshee, Sep 21 '13 at 08:29
@JonathanLonowski Yes, its used in the details.js that only shows on the subpage. Exacly why I use it there I do not know yet. I think that its there beacous of a jQuery component. — Banshee, Sep 21 '13 at 08:30
@SnowJim In that case, the core of Shakti's answer would apply. `noConflict()` resets `$` to any previous value it had, so it won't be a copy reference to `jQuery` afterwards. — Jonathan Lonowski, Sep 21 '13 at 08:32
http://stackoverflow.com/questions/10807200/jquery-uncaught-typeerror-property-of-object-object-window-is-not-a-funct — kasper Taeymans, Sep 21 '13 at 08:33
@kasperTaeymans Yes I read that before but was not totaly sure I hade to do that. I did infact not know that I did use the noConflict(). Is there any way to change the noConflict() back again to avoid useintg jQuery everywhere instaed of just $? — Banshee, Sep 21 '13 at 08:35
@SnowJim A few options: 1) Remove the call to `noConflict()`, assuming there isn't a conflict it's preventing. 2) Revise each use of `$` to use `jQuery`. 3) Wrap the code using `$` in a [closure](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures), such as with a `.ready()` handler or [an IIFE](https://en.wikipedia.org/wiki/IIFE), with a scoped `$` that won't conflict with a global `$` (example: [Protected the $ Alias and Adding Scope](http://learn.jquery.com/plugins/basic-plugin-creation/)). — Jonathan Lonowski, Sep 21 '13 at 08:38
@JonathanLonowski Thanks for the help, I removed it and it seems to work fine. I will however set Shaktis answer to correct for now. — Banshee, Sep 21 '13 at 08:46

Shakti Patel · Accepted Answer · 2013-09-21T08:30:29.880

0

In "no-confict" mode, the $ shortcut is not available and the longer jQuery is used, i.e.

jQuery(document).ready(function ($) {

By including the $ in parenthesis after the function call you can then use this shortcut within the code block.

Replace your code

$(document).ready(function () {
                    if($('#rightCon').text().trim().length < 1)
                    {$('#rightCon').hide();}
                });

with this

jQuery(document).ready(function ($) {
                    if($('#rightCon').text().trim().length < 1)
                    {$('#rightCon').hide();}
                });

edited Sep 21 '13 at 08:30

answered Sep 21 '13 at 08:21

Shakti Patel

3,762
4
22
29

`noConflict()` being used may be correct, but there doesn't appear to be a mention of WordPress in the question. – Jonathan Lonowski Sep 21 '13 at 08:27
This is not a WordPress webpage? Does it still apply? – Banshee Sep 21 '13 at 08:28
Yes, that looks to be the problem but this means that I will have to change all my document.ready, as soon as the stated javascript is included. Is there any way to just turn it on and then turn it off again? – Banshee Sep 21 '13 at 08:36

Javascript not loaded correcly order?

1 Answers1