0

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.

Yaseen
  • 1,348
  • 2
  • 16
  • 31
  • can you please look at your browser console for any javascript error? – codingbiz Oct 20 '12 at 08:07
  • Firebug gives me this: `TypeError: $(".images").cycle is not a function` – Yaseen Oct 20 '12 at 08:11
  • Can you verify that the cycle.js file is loaded? In IE press `F12`, open the Scripts tab and open the dropdown next to the `start debugging` button and check if you see it and can access it. – Silvermind Oct 20 '12 at 09:43
  • Thanks for your comment. Yes, I can access the file. However IE's console says `SCRIPT438: Object doesn't support property or method 'cycle'` – Yaseen Oct 20 '12 at 10:46

3 Answers3

2

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.

Community
  • 1
  • 1
Yaseen
  • 1,348
  • 2
  • 16
  • 31
0

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/

user1573406
  • 31
  • 1
  • 4
-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>