We Keep Coding

How to use jQuery to call a JavaScript function from another file

My question:
I have 2 files:
//Sub.js
function Second() {
//do something here
}
//Main.js
function One() {
//do something here
}
$(function() {
Second();
});
So basically, the function Second is too long; therefore, I want to move it to a Sub.js file and call it from the Main.js. The problem is this function ( function Second) has to be executed after function One because it gets some data from the function One output.
I don't know how to do this, please help.

If you specifically want to use jQuery,
$.getscript("Sub.js",function(){
Second();
});

<script src="/lib/Sub.js"></script>
<script src="/main.js"></script>
I think you should initialize firstly Sub.js before main.js in your head code.
Because whenever the page is first load js are intialize one by one.

You can include both the files in the page and on document ready call it sequentially:
$( document ).ready(function() {
var result = first();
second(result);
});

I was getting a similar problem. My solution was this. I was defining my function inside the .ready() callback. But The problem is that the functions is not accessible outside of its scope. To make this function available in the global scope (or through any object that is available in the global scope) is necessary declare outside the .ready() callback:
Wrong Way:
$(document).ready(function() {
function functionName () {
// ...
}
// ...
});
Right Way:
function functionName () {
// ...
}
$(document).ready(function() {
// ...
});

Displaying custom message on .NET Ajax Post [duplicate]

Im trying to debug my web app that uses jQuery.
In firebug im calling functions inside the $(document).ready..
function val() { console.log('validated outside doc.ready'); }
$(document).ready(function()
{
console.log('document ready...');
function validate() { console.log('validated!'); }
}
In firebug console I type validate() and it says its not a function
If i type val() it works fine.
How do i call validate from the console ?

You are not calling a function like that, you just define the function.
The correct approach is to define the function outside document.ready and call it inside:
// We define the function
function validate(){
console.log('validated!');
}
$(document).ready(function(){
// we call the function
validate();
});
Another option is to self invoke the function like that:
$(document).ready(function(){
// we define and invoke a function
(function(){
console.log('validated!');
})();
});

Your validate function is local to the function you've passed to the jQuery ready handler.
if you do:
window.validate = function(){ /*....*/ };
you will be able to access from console. But it's not good practice to pollute the global scope unless it's just for debugging.

well, is there any reason you'd need that function inside document ready?
only inside those brackets (scope) the function will exist. just move it out, or all it only inside document.ready

You have 2 mistakes in your code.
Format to close bracket
You aren't calling the function. Calling the function is required to print it.
<script>
function val() { console.log('validated outside doc.ready'); }
$(document).ready(function() {
console.log('document ready...');
validate();
function validate() { val(); console.log('validated!'); }
});
</script>

how to call function-1 inside function-2

I have function-1
$('.make_favorite').live('click', function() {
//some code here
});
I have another function-2
function selectContactTab() {
//some code here
//call function-1 here
}
for some reason I do not have control over function-1,
My Question is how to call function-1 inside function-2?

You can manually fire the click event, which will result in the anonymous function, what you state as Function-1, being run...
function selectContactTab() {
//some code here
//call function-1 here
$('.make_favorite').click();
}

Your Function-1 is actually function call, with a callback passed in. You need to wrap it inside it's own function, something like this:
function functionOne() {
//some code here
}
function selectContactTab() {
//some code here
functionOne();
}
$('.make_favorite').live('click', functionOne);
In this example, functionOne is a function on the scope, and is also being passed in as the callback for your .live call. The reason it didn't work before was because the callback in your function-1 was outside of the scope your function-2 was in - put simply, it didn't exist. Initialising it in a function like in my example will make it available to call.

How to input a function in a function

I can do a hack like this:
function exec(fn){
setInterval(fn,0);
}
exec("newfn()");
But looking for a cleaner way.

As already mentioned in the comments, the best way to pass a function to another function is to pass a reference to it, not a string containing its name.
Example:
function foo() {
console.log('Inside foo');
}
exec(foo);
To execute the function inside exec, you just have to put () after the function reference:
function exec(fn) {
fn();
}
But while you can absolutely do this, I don't see any advantage of using exec(foo) over foo().

You can do this:
function exec(fn){
window[fn]();
}
exec("newfn");
provided that functions are in global scope.

simply pass function name:
function exec(fn){
setInterval(fn,0);
}
exec(newfn);

Calling a function that's defined inside a function

*Is there a way to call a function defined inside another function in javaSCRIPT? For example:
window.onload() = function() {
function my_function(){
print("Blah");
};
};
function function_two(){
my_function();
};
Is there a way to do something like the above (calling my_function in function_two even though it's defined inside the window.onload() function)? In my actual code, which also uses the raphael.js library, I'm trying to write a button in HTML, which using the onClick function, calls a function(like function_two) that runs the function defined in window.onload() (like my_function). However the console says that the my_function is undefined.

The scope of the function is the core issue here, as Zeychin and Trevor have said. I thought I'd offer another way of handling it. Basically, you can set your function to a variable that's in a higher scope (that is, accessible to both the onload and function_two functions), while defining it inside the onload function as you originally have:
var myFunction; //This is the placeholder which sets the scope
window.onload() = function() {
myFunction = function() { //Assign the function to the myFunction variable
print('blah');
}
}
function function_two() {
myFunction();
}
This might be handy if you only know the information you need for myFunction once you're in the onload event.

You can not do what you are asking to do.
The function my_function()'s scope is only within the anonymous function, function(). It falls out of scope when the method is not executing, so this is not possible.
Trevor's answer is the way to do this.

window.onload = function() {
my_function()
};
function my_function(){
alert("Blah");
};
function function_two(){
my_function();
};