JQuery Cycle plugin doesn't work inside ASP.NET Masterpage

Question

I have a .NET website that uses Masterpages. I'm trying to add some functionality to a menu on my Masterpage that allows the user to mouse over some dynamic links that are constructed in code behind and have another dynamic content area update to display things based on what the user has moused over.

To accomplish this I'm trying to get a JQuery image rotator (the Cycle plugin http://jquery.malsup.com/cycle/) to work. I've also tried doing something similar with JQueryUI.

My problem is that when this code is on a Masterpage it never works, but if I put it on any other page in my site it's fine. I'm not using relative links to the script files in my header.

Can anyone help me in figuring out why I can't get JQuery to function on a Masterpage?

My JQuery Cycle header stuff is below.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    $('#slideshow').cycle({
        fx: 'turnDown',
        speed: 'fast',
        timeout: 0,
        pager: '#nav',
        pagerAnchorBuilder: function (idx, slide) {
            // return sel string for existing anchor
            return '#nav li:eq(' + (idx) + ') a';
        }
    });
});
</script>

score 0 · Answer 1 · edited May 23 '17 at 10:09

The issue, I believe, is the order that scripts are loaded.

It could be that you are calling something on an element that does not exist so the Cycle Plugin has not been created when you initialize it.

If you have Ajax, you might consider using Script Manager, but this is not necessary.

The order of loading goes:

1) Jquery is loaded on the Master Page. 2) The Content Page is merged and triggers the Content Header script. 3) Document.ready is called from the Master 4) Document.ready is called from the Content Page

If you put in some alerts, you can trace out whether your $('#slideshow').cycle() call is being made at the right time. You need to make sure #slideshow exists.

See this post for Script Manager Solution: Proper way to use JQuery when using MasterPages in ASP.NET?

Basically:

1) Add Scriptmanager to your Master Page

2) Add a reference to the Jquery library before your Content Page document.ready()

3) Use your document.ready code above as it is, but do not include the references to the library or plugin files. Those belong on the master.

I know this is an older post. But I think this is a common problem.

JQuery Cycle plugin doesn't work inside ASP.NET Masterpage

1 Answers1