Scope of my jQuery function?

Question

I have a file called function.js which has all my jQuery for my aplication which looks like this

$(document).ready(function(){

    insert_initial(); //first time to the page, insert into cart and set the subtotal originally

    function update_gallery(product_id){
        ...
    }

    function update_prices(product_selector){
        ...
        ...
    }

    function insert_initial(){
        ...
    }

    $('.trigger').click(function(){
        $('.stations').find(".drop-down").slideToggle();
        return false;
    });

    ...
    ...

On the top of the file i have my function call insert_initial(); which gets run on the initial load....and this works great..My problem is that i now need to include this js file on my php pages say 1.php and 2.php and 3.php and 1.php is the only one that needs the insert_initial(); ....so i was thinking of the best way to do this. I assumed taking out the function call out of the functions file and putting it into a separate file

<script src="/someting/js/functions.js" type="text/javascript"></script>
<script src="/someting/js/functions_insert.js" type="text/javascript"></script>

and in my functions_insert.js file i would have only

$(document).ready(function(){
insert_initial(); //first time to the page, insert into cart and set the subtotal originally
});

but that didnt work either...any ideas on how to fix this

mskfisher · Accepted Answer · 2011-11-21 16:54:08Z

1

This checks to make sure that the location of the current page includes "1.php" before calling insert_initial():

if(window.location.href.indexOf('1.php') != -1)
    insert_initial();

edited Nov 21, 2011 at 16:54

mskfisher

3,4124 gold badges37 silver badges50 bronze badges

answered Nov 21, 2011 at 16:10

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chad · Accepted Answer · 2011-11-21 16:17:19Z

I would recommend having your definitions and executions separate in this instance. You don't need to define your functions inside of jQuery's DOM ready event. But it is also good to namespace them as mentioned. A common paradigm I follow is like so:

functions.js

(function($, window, undefined) {
    function update_gallery(product_id){
        ...
    }

    function update_prices(product_selector){
        ...
        ...
    }

    function insert_initial(){
        ...
    }

    window.MyApp = {
        update_gallery: update_gallery,
        update_prices: update_prices,
        insert_initial: insert_initial
    };
})(jQuery, window);

1.php

<script src="functions.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    MyApp.insert_initial();
});
</script>

Now you can include your definitions as needed, and call them as necessary.

Jerod Venema · Accepted Answer · 2011-11-21 16:48:04Z

1

Try namespacing your functions and attaching them to a nice global object.

window.MyApp = {};

MyApp.insert_initial = function(){

};

Then you can access it from wherever you need, provided it's included earlier in the page.

Edit:

If this doesn't work, you've got an error elsewhere in your code - load order, perhaps? Either method you've described to invoke the function is fine, just make sure it's defined when you invoke it.

edited Nov 21, 2011 at 16:48

answered Nov 21, 2011 at 15:52

Jerod Venema

44.7k5 gold badges70 silver badges109 bronze badges

2 Comments

Matt Elhotiby Over a year ago

how do i call this...i tried this window.MyApp = {}; MyApp.insert_initial(){ .... };

Matt Elhotiby Over a year ago

and im calling it will this $(document).ready(function(){ MyApp.insert_initial(); });

Eric · Accepted Answer · 2011-11-21 16:36:24Z

0

Your functions defined in functions.js are only visible in the scope of that document ready function. A simple case where it doesn't work:

(function() {
    function square(x) {
        return x*x;
    }
})();

alert(square(2)); //Fails, since square is not in scope

The easiest way to fix this is to declare your functions in the global namespace:

function square(x) {
    return x*x;
};

alert(square(2)); //4

answered Nov 21, 2011 at 16:36

Eric

98.1k54 gold badges257 silver badges389 bronze badges

Collectives™ on Stack Overflow

Scope of my jQuery function?

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related