Loading javascript with MVC Razor

Question

The following view is giving me "Object doesn't support prop or method jCarouselLite". I have an almost identical page using plain html which works. Am I loading the javascript properly?

@using System.Web.Script.Services
@{
    ViewBag.Title = "Home Page";
}

<script src="@Url.Content("~/Scripts/jquery-2.0.3.js")"></script>
<script src="@Url.Content("/Scripts/jcarousellite_1.0.2.js")"></script>

<script type="text/javascript">
    $(function () {
        // Add Carousel plugin to rotate images
        $(".anyClass").jCarouselLite({
            visible: 1,
            auto: 3000,
            speed: 800,
            btnNext: ".next",
            btnPrev: ".prev"
        });

    });
</script>

<button class="prev"><<</button>
<button class="next">>></button>
<div class="anyClass">
    <ul>
        <li><img src="/gallery/slide-1.jpg" width="250" height="150"></li>
        <li><img src="/gallery/slide-2.jpg" width="250" height="150"></li>
        <li><img src="/gallery/slide-3.jpg" width="250" height="150"></li>
    </ul>
</div>

I think you've got an answer below. One more tip I would like to tell you. It is always add your custom scripts in a bundle. It will make Shared Layout look very clean. — Rahul
– Rahul, Commented Dec 21, 2013 at 16:30

Sergey Litvinov · Accepted Answer · 2013-12-21 15:48:38Z

3

Probably your jcarousellite jquery plugin does't load. One possible reason is that it hasn't ~ sign

<script src="@Url.Content("/Scripts/jcarousellite_1.0.2.js")"></script>

And it should be this:

<script src="@Url.Content("~/Scripts/jcarousellite_1.0.2.js")"></script>

If your page isn't located in the root of site, then it can doesn't find it.

You can check in browser Developer tools, what is the url for JQuery and what is for jcarousellite plugin. I suppose they will be different.

answered Dec 21, 2013 at 15:48

Sergey Litvinov

7,4985 gold badges50 silver badges71 bronze badges

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

Comments

Sagar Barde · Accepted Answer · 2017-02-18 12:41:28Z

0

@using System.Web.Script.Services
@{
    ViewBag.Title = "Home Page";
}

<script src="@Url.Content("~/Scripts/jquery-2.0.3.js")"></script>
<script src="@Url.Content("/Scripts/jcarousellite_1.0.2.js")"></script>

    enter code here

<script type="text/javascript">
    $(function () {
        // Add Carousel plugin to rotate images
        $(".anyClass").jCarouselLite({
            visible: 1,
            auto: 3000,
            speed: 800,
            btnNext: ".next",
            btnPrev: ".prev"
        });

    });
</script>

<button class="prev"><<</button>
<button class="next">>></button>
<div class="anyClass">
    <ul>
        <li><img src="/gallery/slide-1.jpg" width="250" height="150"></li>
        <li><img src="/gallery/slide-2.jpg" width="250" height="150"></li>
        <li><img src="/gallery/slide-3.jpg" width="250" height="150"></li>
    </ul>
</div>

answered Feb 18, 2017 at 12:41

Sagar Barde

1

1 Comment

Donald Duck is with Ukraine Over a year ago

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

Collectives™ on Stack Overflow

Loading javascript with MVC Razor

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related