Jquery Variable Not Passing - javascript

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.

Related

Function is not defined in javascript

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.

Global variable in jquery not giving output

I need to declare value in global variable that I pull from data attribute. But on test script I am able to print on console but when I use it on page its giving undefined in console. Here is the jquery script I came up with.
var PClevel;
$(document).ready(function() {
var array = [];
$(".proimg").slice(0,3).each(function() {
array.push($(this).data("pid"));
PClevel = ("["+array.join(",")+"]");
});
});
console.log(PClevel);
https://jsfiddle.net/wq3tqkzo/
Can anyone advise please why its not printing the output on live page. I have jquery library available on it. Or can anyone advise if I can have similar function in pure javascript.
You are logging the variable outside of the document ready. It will not be populated until the document ready runs, which will be after that console.log runs. Move it inside the doc ready.

Javascript global variable not working

I've seen a few versions of this question on here, but none of them seem to be the same as my issue, so figured I'd create a new question. I must be doing something very silly here, but for the life of me I cannot spot it.
I'll start with the context, although it is not particularly relevant: I am deferring loading of jQuery with js code, which means none of my code files can contain a $(document).ready(...) call, because "$" will be undefined at first pass. Instead I am adding my ready functions to a "global" array, and after jQuery loads asynchronously, I call all these functions with the following:
function FireLoadEvents() {
while ( OnLoadEvents.length > 0 ) {
var item = OnLoadEvents.splice(0,1);
item[0].ready();
}
}
Now in any of my page components I can use the following to add an event I wish to fire when jQuery is loaded and the document is actually ready:
OnLoadEvents.push( { ready: function() { ... } } );
I've defined the OnLoadEvents variable at the very top of my template in the head:
<script language="text/javascript">
var OnLoadEvents = new Array();
</script>
As you can see it is outside of any function scope, and it is also declared before it is referenced. When tested on its own, this setup is working great, but for some reason when it is added to my actual page heads, script tags later in the page are not able to add items to the OnLoadEvents variable. For instance the following is pulled into my template by a php-include server side, and adds these lines to the body of my page:
<script type='text/javascript'>
OnLoadEvents.push( { ready: function() {
if ( $('.sponsor-link').length != 0 ) {
...
}
} } );
</script>
When I hit this page in Chrome, it reports the following exception on the "push" line above:
Uncaught ReferenceError: OnLoadEvents is not defined
Any idea what is going on? Why would OnLoadEvents be undefined just a few lines down from where I initialize it? I'll note that I've also tried defining and referencing OnLoadEvents as window.OnLoadEvents.
Thanks in advance!
Change this:
<script language="text/javascript">
to this:
<script>
The web-browser doesn't recognize the value of the language attribute and, as a result, doesn't execute the code.
Live demo: http://jsfiddle.net/gyhcM/2/
You don't need the language attribute, nor the type attribute, as the web-browsers assume JavaScript by default.

how to get a variable over to a function?

i want to get a variable (which is set when a link is clicked) over to a function and show it as a pop out.
the code as shown below:
$('a#link1').click(function(e){
e.preventDefault();
var value = 'true';
});
function exe(){
alert(value);
}
when the function is executed , all i get is value is undentified.
So anyone knows a way around it?
Variables have scope, you define the value variable in the scope of the onclick closure, and it wont be accessible outside it.
The following would work:
var value = false; //Define in the global scope
$('a#link1').click(function(e){
e.preventDefault();
value = false; //Use in a local-scope is legal.
});
function doSomething()
{
alert(value);
}
However having many global variables will make your project hard to maintain, and there are other more clean solutions available. In general i'd recommend you to read a proper book on programming though :)
Just make the variable global, or better yet "attach" it to the element using the .data():
$('a#link1').click(function(e) {
e.preventDefault();
$(this).data("value", "true");
});
Then you can always check for this:
function exe() {
alert($('a#link1').data("value"));
}
Note that it was added in jQuery 1.2.3 guess that by now it doesn't really matter though.

TypeError: Result of expression 'printWindow' [undefined] is not an object

I'm trying to create hidden iframes in my page dynamically to load 3 other pages so that i can grab all the HTML and combine them into 1 in a new window.
However i'm stuck at this.
tHe frames are created fine.
But whenever the javascript runs to the part of
var printWindow="";
function openNewWindow()
{
printWindow = window.open("","");
printWindow.document.open();
printWindow.document.write(HTMLfromFrames);
printWindow.document.close();
}
i get this error:
TypeError: Result of expression 'printWindow' [undefined] is not an object.
but if i generate a button to call this function seperately, it works fine.
however i need it to run all in one click event
Anybody has any idea what's wrong?
Thanks!
It looks to me like a scoping problem. The scope of your printWindow object ends when openNewWindow returns; in other words, the variable only exists inside that function and disappears as soon as the function ends. Remove the var to make the variable available globally (considered bad form) or declare the variable elsewhere in your code and make sure it's available to openNewWindow when it executes.
oh i solved it. SOmehow i declared as a global var
then declare the obj earlier in the method.
printWindow = window.open("","");
still not sure why i can't declare it after i dynamically create my iframes.
Thanks for the help!:D

Categories

Resources