Scope issue with jQuery and User Defined Function

Question

I believe I am having an issue with scope when trying to call a user defined function.

My user defined function is in an external file and is as follows:

alert("1");//executes
(function(jQuery){
    alert("2");//executes
    jQuery.fn.slider = function(params) {
    alert("3"); //never hits because the function is never called.
    //code here
    };
})(jQuery);

I try calling this with:

<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function(){
    alert("1-2");//This executes.
});     

jQuery(document).ready(function(){
    jQuery("#slider").slider({//Function doesn't exist error
        slideSize: 5,
    duration: 300,
    photos: []
    });
});    
// ]]></script>

I put that alert in there just to see if the jQuery object existed. I am using noConflict because I have prototype code also on the page.

From what I read at this question https://stackoverflow.com/a/4083362 I think I have to do something like:

window.slider = jQuery.fn.beerSlider;

and access it with something like:

slider("#slider").myPlugin();

Where myPlugin is any name I want? but I'm sure that is not correct.

The html for my slider is:

<div id="slider">
    <a href="#"><img src="../images/1.jpg" alt="" border="0" /></a> 
    <a href="#"><img src="../images/2.jpg"alt="" border="0" /></a> 
</div>

Can anyone help explain to me why I am having an issue?

EDIT: I have 'jquery-1.8.3.min.js' included first, then I have the line $.noConflict();. Then I have includes for external files using the prototype framework. then I include my user defined function and finally call it. But, I figured jQuery is defined by the time I call my function because right before I call my function I use an anonymous jQuery function to execute the line alert("1-2");//this executes

The order of the alerts are as follows: (1, 2, 1-2)

I see that the jsfiddle works fine, I'm trying to see what is different with my code. Could it have something to do with the fact that there is prototype framework code on my page? I am using $.noConflict() and following what it says here http://docs.jquery.com/Core/jQuery.noConflict

NOTE: This function must be called after including the jQuery javascript file, but before including any other conflicting library, and also before actually that other conflicting library gets used, in case jQuery is included last. noConflict can be called at the end of the jQuery.js file to globally disable the $() jQuery alias. jQuery.noConflict returns a reference to jQuery, so it can be used to override the $() alias of the jQuery object.

EDIT 2: Okay, so now I found another page about the usage of jQuery.noConflict() and it tells me something different about the order. http://docs.jquery.com/Using_jQuery_with_Other_Libraries. It looks like the first page I found might be editable by certain people, so I'm assuming the first one is incorrect. But my setup still doesn't seem to work after following the second page.

Here is a link to my site: http://tinyurl.com/d8ewd9a The portion of the page in question is just below the working slider. With the images for Jasper Group, ARD, ALLsteel, etc. In my question I had slightly changed some of the id's from what I am really using.

Is your external file included before or after jQuery? It needs to be included after the jQuery inclusion — Alexander, Dec 17 '12 at 22:10
WHat is the order of the alerts? Is the slider function even loaded before you use it? — Koen Peters, Dec 17 '12 at 22:11
This isn't a scope issue, and you definitely don't need (or want) to do `window.slider = ...`. Your code works as is in a general sense as long as you run it in the right order: http://jsfiddle.net/uksZr - so as mentioned by Alexander include jquery.js first, then your own external file, then the code that uses it. — nnnnnn, Dec 17 '12 at 22:21

score 0 · Answer 1 · answered Dec 19 '12 at 16:24

I found out what the issue was. It seems there was a second jQuery include on the page. So it was redefining jQuery after I added my function to it. That is why it was undefined when I tried calling it.

Something I will never forget now.

Thank you for all the help.

Scope issue with jQuery and User Defined Function

1 Answers1