CODEWITHSUNDEEP
asp.net-mvcrazor
WhiskerBiscuit
WhiskerBiscuit

Reputation: 5157

Loading javascript with MVC Razor

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>

Upvotes: 1

Views: 8008

Answers (2)

Sagar Barde
Sagar Barde

Reputation: 1

@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>

Upvotes: 0

Sergey Litvinov
Sergey Litvinov

Reputation: 7458

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.

Upvotes: 3

Related Questions