Call a javascript function from another file

Question

In wordpress, to use $ instead of jQuery prefix, i added the following code around all js code:

jQuery(function($) {
    ...
});

It works well, but i cannot call an object from another javascript file, the following problem persists:

Slider is not defined

This is my code:

file1.js

jQuery(function($) {
    var slider = new Slider();
});

file2.js

jQuery(function($) {
    function Slider() {
       this.nb_ele = 10;
    }
});

It seems that because the workspace of two js files is different so they can't call function from another one. Any solution?

Community · Accepted Answer · 2017-05-23 12:40:07Z

4

The issue you have is that Slider is not accessible outside of its scope as that's defined by the .ready() though you've used shorthand for that. The function needs to be available in the global scope:

file1.js

function Slider() {
   this.nb_ele = 10;
}

jQuery(function($) {
  // ...
});

file2.js

jQuery(function($) {
    var slider = new Slider();
});

If you want Slider to stay in the document ready, you'll need to use a function expression to add the function to the global object:

jQuery(function($) {
    window.Slider= function () {
       this.nb_ele = 10;
    };
});

See Also: https://stackoverflow.com/questions/1449435/splitting-up-jquery-functions-across-files

edited May 23, 2017 at 12:40

CommunityBot

1

answered Mar 28, 2016 at 1:38

Adam

2881 silver badge6 bronze badges

That's what i need, thank you. I need to use the jQuery in Slider function so it must stay in the jQuery scope but by adding "window" before the function name, it'll be added to the global object.

Trong Lam Phan
– Trong Lam Phan

2016-03-28 23:44:05 +00:00
Commented Mar 28, 2016 at 23:44

Add a comment |

LoicTheAztec · Accepted Answer · 2016-03-28 02:06:43Z

2

I had the same kind of problem.

You can also solve it with:

var $ = jQuery.noConflict();
$(document).ready(function(){

your code in here

});

You need also to use that trick in all of your javascript files, i mean var $ = jQuery.noConflict();.

After that Dammeul is right.

edited Mar 28, 2016 at 2:06

answered Mar 28, 2016 at 1:57

LoicTheAztec

3,40118 silver badges24 bronze badges

Add a comment |

Stack Exchange Network

Call a javascript function from another file

2 Answers 2

Your Answer

Hot Network Questions

Call a javascript function from another file

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions