CODEWITHSUNDEEP
jqueryasp.net-mvcjquery-pluginsasp.net-mvc-4
Yaseen
Yaseen

Reputation: 1358

jQuery Plugin not working in ASP.NET MVC 4

The images which should be cycling are just sitting on top of each other. Screenshot here

In my (very simple) application I have one View named Index.cshtml. I'd like to use jquery Cycle Plugin for this page which I have used in my PHP apps too. Below is my _Layout.cshtml's relevant code

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render(Url.Content("~/Scripts/cycle.js")) // I added this line.
    @Scripts.Render("~/bundles/modernizr")

The plugin file (cycle.js) is in Scripts folder generated by Basic project layout. Below is how I am using it. The following code is also in _Layout.cshtml (comments only here). 

<script type="text/javascript">
    $(document).ready(function () {
        alert('test1');   //this is 'alerted'
        $('.images').cycle({
            fx: 'fade',
            speed: 2000
        });
        alert('test2!'); //this is NOT 'alerted'
    });
</script>

When I view the source after requesting page in a browser, I get this : 

<title>Asp.Net MVC 4 Hello World App</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/cycle.js"></script>
<script src="/Scripts/modernizr-2.5.3.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        alert('test1'); 
        $('.images').cycle({
            fx: 'fade',
            speed: 2000
        });
        alert('test12');
    });
</script>
</head>
<body>
...
</html>

Here is the container for images:

        <div class="images" id="images">
            <img src="@Url.Content("../Images/image1.jpg")" alt="page image" />
            <img src="@Url.Content("../Images/image2.jpg")" alt="page image" />
            <img src="@Url.Content("../Images/image3.jpg")" alt="page image" />
            <img src="@Url.Content("../Images/image4.jpg")" alt="page image" />
        </div>

The files are therefore successfully being loaded. I believe the issue is how $(document).ready() works. because whatever code I put before .cycle() works but nothing works after it.

Upvotes: 0

Views: 10515

Answers (3)

Sathish Dadi
Sathish Dadi

Reputation: 1

<html>
<head>
<script 

 src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">

</script>
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("p").click(function () {
            $(this).hide();
        });
    });
</script>
</head>
<body>

<p>When you click on this paragraph , it will hide.</p>


</body>
</html>

Upvotes: -1

user1573406
user1573406

Reputation: 31

That might have several reasons but the most common solution in many cases is: carrying the

@Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false)

if you know turkish you can check this article for more information

http://ogrenmeliyim.com/mvc-4-de-jquery-tanimlanmasi/

Upvotes: 0

Yaseen
Yaseen

Reputation: 1358

I solved the problem after some (more) searching. Somehow jquery was being loaded twice. Once before cycle plugin file and the other one after it. This link helped to catch the problem, specifically redndahead's comment.

I opened Firebug console and observed that indeed jQuery was being loaded twice. I removed the following line from _Layout.cshtml page under <body> tag and now the plugin is working fine.

 @Scripts.Render("~/bundles/jquery")

This SO quesiton is very helpful for those wondering what bundles are. Thanks to all for their response.

Upvotes: 2

Related Questions