SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery - calling function from other script

    I've got two scripts that are loaded from external files. The first script needs to call a function from the other, but I don't know how to make it happen. Right now I just get an error that the function doesn't exist.

    Code JavaScript:
    // This script actually loads from an external file
    $(document).ready(function(){
    	$('button').click(function(){
    		whatever();
    	});
    });
     
    // This script loads from another external file
    $(document).ready(function(){
    	function whatever(){
    		alert('yes');
    	}
    })
    ;

    How can I do what I am trying to do?

  2. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The 'whatever' function is inside a different scope. In JavaScript a function defines the scope of the code it contains, so if you want to share it you need to define it in a location that your other code can see.

    You also don't need to define functions inside the document ready function, you could just define outside of the ready() callback. Eg,
    Code JavaScript:
    $(document).ready(function(){
        $('button').click(function(){
            whatever();
        });
    });
     
    // This script loads from another external file
    function whatever()
    {
         alert('yes');
    }
    $(document).ready(function(){
        // run something else
    });

    I think in your example by defining it inside the callback of .ready() you'd have a chicken and egg thing going, you could never be sure the function would be defined when you actually want to use it, so try defining your functions first outside of .ready().
    Last edited by Anthony.Barnes; Aug 18, 2011 at 19:25. Reason: Removed previous examples, bad idea...

  3. #3
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for answering. I ended up doing this:

    Code JavaScript:
    // This script actually loads from an external file
    $(document).ready(function(){
    	$('button').click(function(){
    		$.whatever();
    	});
    });
     
    // This script loads from another external file
    $(document).ready(function(){
    	$.whatever = function(){
    		alert('yes');
    	}
    });

    It works, but I think your solution that places the function outside of document ready function may be best.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Personally i prefer using namespace objects inside an anonymous function then declare all the properties and methods inside of it, so instead of extending off the object half way through the code you declare it once and then add it to the window scope.

    Code JavaScript:
    (function($) {
     
        var namespace;
     
        namespace = {
            something : function() {
                alert('hello there!');
            },
            bodyInfo : function() {
                alert($('body').attr('id'));
            }
        };
     
        window.ns = namespace;
     
    })(this.jQuery);
     
    $(function() {
        ns.something();
        ns.bodyInfo();
    });

    Also using 2 DOM.ready() methods is redundant, you only ever need one for the page unless you have multiple sets of code that need to be independent of each other.

  5. #5
    SitePoint Addict skunkbad's Avatar
    Join Date
    Apr 2008
    Location
    Temecula, CA
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    Personally i prefer using namespace objects inside an anonymous function then declare all the properties and methods inside of it, so instead of extending off the object half way through the code you declare it once and then add it to the window scope.

    ...

    Also using 2 DOM.ready() methods is redundant, you only ever need one for the page unless you have multiple sets of code that need to be independent of each other.
    Yes, the 2 DOM.ready() methods are from external scripts that are independent. I was just showing them here because that's the way they would be if combined.

    Thanks for the example, although I had to stare at it for a few minutes to figure out how it was working.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •