can you help me?
I'm using a script in one file to call other function in another file, but I'm getting function is not defined. So I've start searching to fix this way but I didn't get any positive results. Check my code below:
index.html
$(document).ready(function(){
setInterval(function(){
lAs = new loadAsync();
}, 900);
});
js/plugins.js
function window.loadAsync() {
$(".loadAsync").each(function(index, element){
$(element).attr("src", $(element).attr("data-src"));
});
}
So, what should I do to fix this problem? Thank you.
#edit:
<script src="js/plugins.js"></script>
I've already wrote this in index.html
First, your syntax is wrong. An identifier may not have a . in it. Just use loadAsync and it'll be global unless you've nested it in another scope.
You can also make the jQuery more efficient by calling .attr() with a callback instead of using .each().
Finally, it seems unlikely that you actually want to use new to invoke the function. I changed the code below to simply pass it as the callback to setInterval. I also declared the lAs variable properly.
function loadAsync() {
$(".loadAsync").attr("src", function(){
return $(this).attr("data-src");
});
}
var lAs;
$(document).ready(function(){
lAs = setInterval(loadAsync, 900);
});
And of course all this can be done easily without jQuery.
function loadAsync() {
for (const el of document.querySelectorAll(".loadAsync")) {
el.src = el.dataset.src;
}
}
var lAs;
document.addEventListener("DOMContentLoaded", function(){
lAs = setInterval(loadAsync, 900);
});
First of all, function window.whatever() {} is wrong (could you include the link of the SO thread where you saw that being used ?).
Since you are getting an error even without that, please make sure that:
1. loadAsync is declared in the global scope in the plugins file.
2. You are including js/plugins.js correctly. Go on and insert foo bar; in js/plugins.js and then check if you get a SyntaxError (while including it before the other JS file), if you don't, you are not correctly including it.
Related
I'm having an issue where I cannot seem to pass the variable "notes" into the placeholder of a form. More Info Below Code:
request.done(function(data) {
window.notes = data;
//document.write(notes);
});
request.fail(function() {
// document.write("fail");
});
$(document).ready(function(){
$('form').find("textarea").each(function(ev)
{
if(!$(this).val()) {
// document.write(notes); Says undefined?
$(this).attr("placeholder",window.notes);
}
});
});
The placeholder code works...if I use
$(this).attr("placeholder","test");
It works without problem as it should, but it will not if I try to use the var notes.
The setting of var notes works as well. If I uncomment the document.write("notes") I get the value I expect.
I have tried:
I originally started with Var notes = data; but moved to window.notes based on a suggestion by another question to make it global. Did not work. I also tried "forcing" the variable to be global by setting outside the function scope empty, but that didn't work either.. Is there something I'm missing?
Thanks!
Sorry I don't have much credit to comment . I just wanted to say that the document.ready function works on load at the starting of the page load while request.done or request.fail works after it so initially on load the window.notes is undefined.
And when you use the code document.write(notes) it gets defined and hence no error.
Can someone explain to me why this doesn't work and show me how to make it work? I've tried creating a namespace and IIFEs functions but I cannot seem to get it.
$(document).ready(function() {
alert (hi);
});
$(document).ready(function() {
var hi = "hello"
});
Thank You!
When you do this:
$(document).ready(function() {
var hi = "hello"
});
You are creating a variable named hi that is local to that callback function. It is simply not accessible outside that function. This is a feature of the language.
You can declare the variable at a higher scope like this:
var hi;
$(document).ready(function() {
hi = "hello"
});
And, then the value of that variable will be available outside the scope, but you will not necessarily know when it gets the proper value because you won't know when the $(document).ready() callback is called unless you put your code inside that callback.
It really makes little sense to try to share a variable between two calls to $(document).ready(). It would make much more sense to just put the code inside the same $(document).ready() callback:
$(document).ready(function() {
var hi = "hello"
alert (hi);
});
Not Really Recommended
If you were going to try to share a variable between two calls to $(document).ready() (something I don't really recommend because it makes your code somewhat fragile), it can be done. Callbacks to $(document).ready() will be called in the order they are attached so you will have to order things appropriately:
var hi;
$(document).ready(function() {
hi = "hello"
});
$(document).ready(function() {
alert (hi);
});
This will make sure that the first $(document).ready() callback that sets the value of hi will be called first before the second one where you try to use the value.
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.
I have the following piece of code on my page:
<script src="/Assets/JavaScripts/myJavaScript.js" type="text/javascript"></script>
<script type="text/javascript">
testAlert();
</script>
And in myJavaScript.js I have the following:
(function () {
function testAlert() {
alert('test alert');
}
})();
It's not calling testAlert. Not sure what I am doing wrong here? I'm trying to avoid global variables and methods. I did something similiar in jQuery and it worked, it just required a $ at the start of the external file. Can somebody please explain what I am doing wrong here and how to make sure I follow best practices?
I put your code in my environment and checked, I got error in mozila error console.
So, Please check it there.
you should put only below javascript function in myjavascript.js file.
function testAlert() {
alert('test alert');
}
Your function in the js-file isn't returning anything. To avoid global variables you could create one global namespace (-like) variable:
var myNS = (function () {
function testAlert() {
alert('test alert');
}
return {testAlert:testAlert};
}());
Now you can use myNS.testalert() in your inline javascript.
JS is made in such a way that you really can't totally avoid globals. (Well, you can, sort of. If you never give anything a name. But that tends to cause more problems than it solves.) When you call testAlert from some other script, you're operating under the assumption that testAlert is global. If it weren't, you couldn't just call it from anywhere like that.
You can minimize the chance of collision, though, by adding your stuff to an object that serves as a namespace, like so:
// don't clear it out if it already exists.
// that way all of your scripts can use your namespace, if you want.
// what you're really trying to protect against, are strangers picking names
// like yours.
if (!window.myNamespace) myNamespace = {};
// example function
myNamespace.testAlert = function() { alert("test alert"); };
myNamespace.testAlert();
This way, the only name that has a good chance of conflicting is myNamespace.
I was going to show an example of a namespaced global...but ya know what? A namespaced global is still a global. Global variables are something you want to try and get rid of in most cases.
You need some sort of global variable so that you can access the method you're looking for. The fact that you have <script>testAlert()</script> means you expect testAlert() to be defined in the global namespace.
What I like to do (especially when using YUI, which you have tagged this question with), is to create a global object that acts as a utility class.
var page = {
init: function() {
// Do some initialization...
},
testAlert: function() {
alert("Test Alert");
}
};
After you do that, you can use the single global "page" variable to access everything you need.
// e.g.
page.testAlert();
// or...
Y.on("domready", page.init, page);
Again, for the second example I'm assuming you're using YUI, since you tagged this question with it.
I am relatively new to javascript so please be patient if what i am asking is completely stupid!
I am trying to make a simple module. Inside the module i want to have a config object that holds settings for the module. I am also using jquery. The jquery selectors work only when in a function directly in the main object/module.
I understand that javascript has functional scope so I am suprised that I cannot use the jquery selectors anywhere inside the module.
EDIT:
I want to be able to directly set all of my configs inside the configs object using jquery selectors. This way i keep all the messy stuff inside one place and can then access configs.whatever throughout the rest of the module. At the moment jquery selectors do not work inside the configs module.
var OB = function() {
var configs = {
'mode' : 'test',
'numOfSelects' : $('.mySelect').find('select').length, // This doesnt work
}
var getMode = function() {
return configs.mode;
}
function init() {
alert(configs.numOfSelects); // This alerts 0 until the following line
alert($('.mySelect').find('select').length); // This correctly alerts 2
};
var handlers = {
successHandler : function() {
alert("Success");
},
errorHandler : function() {
alert("error");
}
}
return {
init : init,
getMode : getMode
}
}( );
$(document).ready(function(){
OB.init();
});
It isn't that jQuery isn't in scope — that's that the code isn't executing when you think it is. The variable config is defined when that anonymous function (var OB = function() {}()) is executed. The DOM isn't ready yet, so that DOM traversal doesn't find anything. When you do the DOM traversal in init(), that isn't executed until it's explicitly called inside the $(document).ready() handler, at which point that DOM is set up. That's the difference you're seeing.
OB() needs to be called after the DOM has completely loaded. Hence the answer by Marcelo, which calls OB() in the ready() method.
EDIT: It's funny that my original answer below was incorrect because I didn't notice two little parentheses at the end of the definition of OB, and it turns out that these are the culprit. You define and then immediately invoke OB, which is before the DOM has been fully loaded. Remove those parentheses and make the change I suggest below.
Calling OB() returns an object with init and getMode, but you haven't called OB(), you've only referred to OB. Try this instead:
$(document).ready(function(){
OB().init();
});
Also, I assume you want to later refer to getMode. In particular, you will to get the copy of getMode that has access to the same local scope that your init() call had access to. To achieve this, you will need to store the result of calling OB() for later use:
var ob;
$(document).ready(function(){
ob = OB();
ob.init();
});
function some_other_function() {
... ob.getMode() ...;
}