How to define global function inside document.ready? - javascript

I want to define a global function inside document.ready which need to be called outside document.ready. I tried to define a function as
var global_fn={};
$(document.ready).function(){
global_fn.my_function=function(){
console.log('my function');
};
global_fn.my_function();
}
global_fn.my_function();
The function call global_fn.my_function(); inside document.ready works well, but outside it throws error: Uncaught TypeError: global_fn.my_function is not a function. What things I am missing?
NB. The reason for defining function inside document.ready is because of third party api I am using, which works only after dom is ready and the reason for making it global is because I want to call it in another js file.

The reason it doesn't work outside the document.ready function is that when it's out in the js file like that, the function gets executed before it gets created in document.ready.
It will be available in your other JS files as long as they don't try to access it before document.ready.

Related

Call Variable Function from External JS File

I was trying to call the function outside js file, but that function is declared in variable, something like this below
external.js is the third party library which i shouldn't edit
jQuery(function(){
var submit_clicked={
cart_submit: function() {
alert("yes variable function is have scope outside");
}
}
});
In my side i call internal javascript something like
jQuery(function() {
alert(submit_clicked.cart_submit);
});
it denotes
Reference Error: submit_clicked is not defined
not sure how to overcome this issue. Can anyone suggest some ideas will be great :)
Here is my fiddle.
https://jsfiddle.net/rr2v4fhb/
FYI: I call my script next to the external js but still that scope is not available.
The problem lies in the external.js file. Declare the variable outside the jquery() handler and that should solve your issue!
If the external file is non-editable, then you cannot access the variable function due to its scope which is local (what you need is a global variable).

Anonymous JavaScript function not executing

I could really use a second pair of eyes on this. I get the following error:
"Uncaught TypeError: undefined is not a function"
Can anyone see what is wrong with this function because I can't seem to debug
$(function(){
$('#div-id').insertBefore('#sumbit-button');
})();
jQuery already executes the function you pass to it, it does not return a function so you can't call it.
$(function(){
$('#UGInterestedIn').insertBefore('#sumbit-button');
});
There's 2 different things you can mean with this code. Either you're trying to make a function run on DOM ready, which would use the jQuery code:
$(function(){
$('#UGInterestedIn').insertBefore('#sumbit-button');
});
Which is also what aduch said, but you can also be referring to a self-executing anonymous function, which would be this vanilla JS code:
(function(){
$('#UGInterestedIn').insertBefore('#sumbit-button');
})();
The difference is that the first code requires jQuery to be included on the page, and loads the code when the DOM is ready. The second code runs the code immediately, but uses the anonymous function to change the scope of the variables. You're probably trying to do the first thing, but I thought I'd let you know about the second one too.

Jquery/Javascript : call a function outside of the file we are calling the function

I have a number of javascript plugins which are included in my HTML file, and are included successfully because I have checked.
Heres the problem;
Basically I want to create a function outside the HTML file, and then inside the HTML file load that particular function when the document is ready.
this is the function (outside) of the HTML file. As a stand alone JS file:
function do_anchor_scrolling() {
$('#back_to_top').anchorScroll();
$("#landing_link").anchorScroll();
$("#menu_link").anchorScroll();
$("#sauces_link").anchorScroll();
$("#ranches_link").anchorScroll();
$("#order_link").anchorScroll();
$("#about_link").anchorScroll();
$("#franchise_link").anchorScroll();
});
the function is called do_anchor_scrolling
How in JQuery can I say when the document is ready perform the do_anchor_scrolling function.
When the document is ready, call the function.
$(document).ready(function(){
do_anchor_scrolling();
});
Pass it as a handler into the ready method:
$(document).ready(do_anchor_scrolling);
Or even shorter:
$(do_anchor_scrolling);
Notice the function is not executed right there (no invoking parenthesis) - the function object itself is passed into the ready function.
You can just do:
$.getScript("yourfile.js");//it grabs and executes yourfile.js
//so your function is now defined
do_anchor_scrolling(); //and you can call it
You can go without the $_getScript() call by just putting yourfile.js inside a <script> tag in <head>.

How to reference functions with document ready?

I have some functions in a JQuery document ready method that I would like to reference from other external files, but I keep getting a function undefined. How can I make those global?
ex.
external file 1
$(function ()
{
function DoSomething()
{
Do something
}
});
external file 2
$(function ()
{
Call DoSomething()
)};
declare the functions outside the jQuery escope.
external file 1
function DoSomething()
{
Do something
}
external file 2
$(function ()
{
Call DoSomething()
)};
You can either define the function outside .ready() (as the other answers suggest), or you can take advantage of the fact that the window object is the global scope. So, you can make them global like this:
$(function(){
function doSomething(){
// …;
}
window.doSomething = doSomething;
});
Note that in this case they’ll only be defined after .ready() runs — if you want to use them immediately in another file (i.e. not inside an event handler or another .ready() function), this won’t work.
You probably want to define functions outside ready blocks. That does not hurt. Only executing a function outside a ready block can cause issues if it uses the DOM before it's ready.
Defining does nothing (yet), and as such does not use the DOM. So it does not need to be inside a ready block; doing so only constrains the places where you can access it, which is basically only a disadvantage.
external file 1
function DoSomething()
{
Do something
}
Whenever possible, declare functions outside of the ready check.
external file 1
function DoSomething()
{
Do something
}
external file 2
$(function ()
{
Call DoSomething()
)};

javascript: can not use global variable in a function, to navigate the dom

beginner here...
what am i missing?
i define a global variable that is a reference to an html element:
var x=document.getElementById("xxx1");
then, inside a function a try to reference that variable to navigate the dom:
x.innerHTML="dsfgfdgdf";
...doesn't work; if i define the variable inside the function it works, but i don't see how it's a scope problem... working with global variables inside functions works fine IF i don't use them in a dom context (object.property)
thanks
It's not a scope problem.
The most likely reason is that the element doesn't exist yet when you create the variable. You have to put the script element that creates the variable after the element that you want to access, as the code will run while the page is loading.
Another alternative is to declare the variable globally, and set it from the onload event that runs after the page has loaded:
<script>
var x;
function init() {
x = document.getElementById('xxx1');
}
</script>
<body onload="init();">
Is the getElementById executed before the DOM is loaded? (you should wait for domready or onload)
Is it possible that you overwrite the value in some other function?
I think the problem may be that if you declare that variable globally, when that line is evaluated the DOM is not totally loaded and therefore the element is not accessible.
When you declare it in the function, the variable will only be created when you call that function, when the DOM will mostly likely already be fully loaded.
Maybe your page is not fully loaded when you're calling getElementById.
Make sure you create the global variable x when the page has finished loading. Most libraries has a way to handle that, jQuery for example has the "ready"-function. If you dont want to use any libraries, you can always create the variable when the body-element calls the onload-event.
jQuery-style:
$(function(){
// create X here
})
body onload style:
<body onload="aFunctionThatCreatesYourVariable()">

Categories

Resources