Calling a method from a namespace to use in another javascript file

Question

To organize my code, I happened to write as namespace for my main javascript file. Then I want to call some of the functions of that file to my custom javascript file, let say script.js. The problem is that I couldn't access the methods of the namespace. Here is my example code:

main.js

$( function() {
    "use strict"
     var Accordian = {
     slide : function() {
         $('h3').click( function() {
             $(this).next('div').slideToggle('1000');
             $(this).toggleClass('toggled');
         });
    },

    slideEaseOutBounce: function() {
         $('h3').click( function() {
              $(this).next().animate(
                  {'height' : 'toggle'}, 1000, 'easeOutBounce'
               );
               $(this).toggleClass('toggled');
         });
    },

    slideEaseInOutExpo: function() {
         $('h3').click( function() {
             $(this).next().animate(
                  {'height' : 'toggle'}, 1000, 'easeInOutExpo'
             );
             $(this).toggleClass('toggled');
         });
    }
});

And I have tried as in below script.js

$(document).ready( function() {
    Accordian.slide();
});

UPDATED:

Here's the link: http://jsnamespace.comyr.com/using-accordian.html

And the error message occurs "ReferenceError: Accordian is not defined" Any help would be very much appreciated.

When I try and access the site I get the following, followed by some parking ads: This website was set to be removed for inactivity by www.000webhost.com. If you own this website, click here to protect it. About your question, are you simply referencing both scripts in your HTML file or is there another method that you're using? — Qantas 94 Heavy
– Qantas 94 Heavy, Commented Jun 3, 2013 at 13:27
Ah, this link is just removed. I added 3 days ago. I'll uploaded it again. Here it works again. jsnamespace.comyr.com/using-accordian.html — Tepken Vannkorn
– Tepken Vannkorn, Commented Jun 3, 2013 at 15:58

zsawyer · Accepted Answer · 2013-06-03 18:04:35Z

4

+50

Note: line 63 is missing a semicolon in script.js.

Since modifying your site to use this code works:

<script type="text/javascript">
    $(document).ready( function() {
        Accordian[0].slide();
    });
</script>

FIDDLE DEMO

it seems that wrapping your "Accoridian" inside the jQuery function requires it to be dereferenced as a sub element.

When you remove the $ at line 1 of script.js turning

var Accordian = $(function () {

into

var Accordian = (function () {

(like @anonyme suggested) it works with your original call to Accordian.slide().

answered Jun 3, 2013 at 18:04

zsawyer

1,86417 silver badges24 bronze badges

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

Comments

anonyme · Accepted Answer · 2013-05-29 08:21:23Z

first you have to make a unique root namespace like that :

window.Accordian = window.Accordian || {};

This part must be done on top of all the next ! it Can be done in the head of html page in a script tag.

after you can use your object :

//creating a function :
Accordian.slide = function() {
     $('h3').click( function() {
         $(this).next('div').slideToggle('1000');
         $(this).toggleClass('toggled');
     });
}

//and later using it :
Accordian.slide()

This is the simplest way !

You prefered using multiple file, so let's try :

mains.js

/*$*/( function(globalAccordian) {
    "use strict"
     /* var Accordian = { */
     globalAccordian = {
     // doing like this will override your globalAccordian
     // if it was already generated by another script
     slide : function() {
         $('h3').click( function() {
             $(this).next('div').slideToggle('1000');
             $(this).toggleClass('toggled');
         });
    },

    slideEaseOutBounce: function() {
         $('h3').click( function() {
              $(this).next().animate(
                  {'height' : 'toggle'}, 1000, 'easeOutBounce'
               );
               $(this).toggleClass('toggled');
         });
    },

    slideEaseInOutExpo: function() {
         $('h3').click( function() {
             $(this).next().animate(
                  {'height' : 'toggle'}, 1000, 'easeInOutExpo'
             );
             $(this).toggleClass('toggled');
         });
    }
})( window.Accordian || {} );

script.js

$(document).ready( function() {
    Accordian.slide();
})

Thanks for your answer, but it still does not work. Here's my link to the test jsnamespace.comyr.com/using-accordian.html

Soroush Hakami · Accepted Answer · 2013-05-29 07:53:27Z

1

You can't access the namespace because it is encapsulated in a function. I'd suggest reading up on the revealing module pattern.

JSFiddle: http://jsfiddle.net/R927K/

Example:

    var Accordian = (function() {

     var Accordian = {
     slide : function() {
         alert('sliding');
         }
     };

         return Accordian;
}());

Accordian.slide();

edited May 29, 2013 at 7:53

answered May 29, 2013 at 7:25

Soroush Hakami

5,43615 gold badges70 silver badges99 bronze badges

7 Comments

Tepken Vannkorn Over a year ago

Thanks for your answer, but how could I access its method to my script.js file?

Soroush Hakami Over a year ago

Just as you did in your example ( I hope, if I am correct :) ).

Soroush Hakami Over a year ago

Assumg both main.js and script.js are properly loaded into the page ofcourse.

Tepken Vannkorn Over a year ago

I didn't get it work actually, I tried Acordian.slide() and it says 'TypeError: Acordian.slide is not a function', then I tried Acordian.slide and nothing happens with no error message and the action itself.

Tepken Vannkorn Over a year ago

let us continue this discussion in chat

|

Collectives™ on Stack Overflow

Calling a method from a namespace to use in another javascript file

3 Answers 3

Comments

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related