Get a Session value from my MVC app into my Javascript

Question

This isn't the standard, so please read before marking duplicate.

In our MVC app at the top of our _Layout.cshtml, we load our scripts like this:

@Scripts.RenderFormat("<script src='{0}' defer></script>", "~/bundles/scripts")

At the bottom of _Layout.cshtml we have this:

@RenderSection("scripts", required: false)

For reasons outside of my control we must have the defer on that. :(

This bundle includes the jquery files. One of the other files is called Script.js, which gets loaded after jQuery, and has a function called setCollapse(collapse).

It looks like this:

function setCollapse(collapse) {
    debugger;
    alert(collapse);
    if (collapse == 'False') {
        $('.collapse').collapse("show");
    } else {
        $('.collapse').collapse();
    }
}

I would like to use a Session value with that javascript function on my MVC View load like this:

@section scripts
{
    <script>
        $(document).ready(function() {
            debugger;
            var collapse = '@Session["Collapse"].ToString()';
            setCollapse(collapse);
        });
    </script>
}

But I continue to get:

Uncaught ReferenceError: $ is not defined

How can I get my Session value to get passed into my javascript/jQuery when the page loads?

Yes, all my other jQuery code works okay. The thing is, with the defer, any javascript in the view gets run before the jQuery is loaded. My script.js file gets loaded after jQuery, but I'm not sure how to get the Session value into script.js. — M Kenyon II
– M Kenyon II, Commented Feb 23, 2016 at 16:58
Try without defer. Your code should work as long as you include jQuery in your page before using it. — Shyju
– Shyju, Commented Feb 23, 2016 at 17:23
Quote from W3C Schools - "The defer attribute is only for external scripts (should only be used if the src attribute is present)." So, you are using the defer attribute incorrectly. — NightOwl888
– NightOwl888, Commented Feb 23, 2016 at 17:52

M Kenyon II · Accepted Answer · 2016-02-23 18:37:47Z

1

Here's how I worked it out. Of course it was simpler than I figured.

In our MVC app at the top of our _Layout.cshtml I do this:

<script>
    var collapse = '@Session["Collapse"].ToString()';
</script>
@Scripts.RenderFormat("<script src='{0}' defer></script>", "~/bundles/scripts")

The RenderFormat loads jQuery and my script.js file.

Then in my script.js I do this:

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

    // Global collapse value
    if (collapse == 'False') {
        $('.collapse').collapse("show");
    } else {
        $('.collapse').collapse("hide");
    }
});

answered Feb 23, 2016 at 18:37

M Kenyon II

4,2844 gold badges51 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mobaruk H · Accepted Answer · 2016-02-23 18:07:03Z

0

You need to add

 @RenderSection("scripts", required: false)

before the closing body tag in you layout file. As long as your jquery is loaded before that it should just work.

Edit

Add this in the header

<script type="text/javascript">
    window.$ = (function () {
        var q = [], f = function (cb) {
            q.push(cb);
        };
        f.attachReady = function ($) {
            $(function () {
                $.each(q, function (i, f) {
                    f();
                });
                q.length = 0; // clear it, just in case
            });
            return $;
        }
        return f;
    })();
</script>

And then the following before the end of the body tag

<script type="text/javascript">
    $.noConflict();
    $ = $.attachReady(jQuery);
</script>

This would defer all the jquery dependent code and run them once jquery is loaded.

Edit 2

<script type="text/javascript">
    $.noConflict();
    $ = $.attachReady(jQuery);
</script>

This should be the last thing before the end of the body tag.

edited Feb 23, 2016 at 18:07

answered Feb 23, 2016 at 17:24

Mobaruk H

541 silver badge7 bronze badges

4 Comments

M Kenyon II Over a year ago

I have that. Because of the defer, the @RenderSection("scripts", required: false) runs before jQuery is loaded. Even if I put defer in the scripts for the RenderSection they run before jQuery is loaded.

M Kenyon II Over a year ago

Should I put that $.noConflict(); part before or after the @RenderSection("scripts", false)?

M Kenyon II Over a year ago

I get this: Uncaught ReferenceError: setCollapse is not defined(anonymous function); Uncaught TypeError: $.noConflict is not a function

Mobaruk H Over a year ago

The problem here is the defer keyword which is strictly for external scripts. But yours is not external script. What you should do is remove the defer keyword, put your jquery before the end of the body tag and then include the noconflict bit below the jquery. This way your jquery will be loaded at the end of the page load anyway .

Collectives™ on Stack Overflow

Get a Session value from my MVC app into my Javascript

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related