jquery calling null element that actually exists - javascript

My code works on localhost, but when I implement it on my site, it doesnt.
The error log says it's calling for an element that doesn't exist. I've reach to the conclusion that it can't see the element because the element is loaded dynamically.
The element is the class .newsitem_text, it's a div that contains a blog post. I believe that the jquery is calling for the class before the class is being loaded by the page.
Here is one example fiddle:
http://jsfiddle.net/ku6L240c
The error:
Uncaught TypeError: Cannot read property 'html' of null
47-ganhe-dinheiro-atraves-de-downloads:1093 Uncaught SyntaxError: Unexpected token ILLEGAL
The code:
<javascript>
var wordList = $(".newsitem_text").html().split(' ');
var newHtml = '';
$.each(wordList, function(index, word){
newHtml += ' ' + word;
if (index == 50) {
newHtml += '<div>Some HTML</div>'
}
})
;
$(".newsitem_text").html(newHtml);
</javascript>
How can I make the script wait until the class is loaded by the page, then it gets executed or something?

Seems you are doing dynamic HTML within JS code and immediately trying to get the just added tags. If that is the case, your code will have to wait and keep checking until browser rendered your new HTML and add the nodes to DOM, then you can query them or do something about.
The only way I found works is usint setTimeOut and keep checking then execute your last statement. I create a function below that checks wait and check for certain condition then execute a call back function.
//A function to wait until either times up, or until a pass in "funct" returns "true", which ever occured first.
//funct - callback function, to be returned true or false.
//done - an optional callback function for notify when waiting is over.
//timeout - the amount of time in million-second to wait.
//caller - optional string of caller for monitoring if multiple waiting session.
function waitToSync(funct, done, timeout, caller) {
//This is a hack synchronize to wait until funct() returns true or timeout becomes < 0.
caller = caller || '';
if ((funct === undefined) || typeof (funct) != 'function') return;
function waiting() {
if (!funct()) {
var dt = new Date();
console.log(caller + " waiting: " + dt.format('yyyy-mm-dd h:MM:ss'));
if ((timeout - 1000) > 0)
setTimeout(waiting, 1000); //1 second.
else {
console.log(caller + ': waitToSync timed out!!!');
document.body.style.cursor = 'default';
}
timeout -= 1000;
}
else {
if (done !== undefined && (typeof done === 'function'))
done();
}
}
waiting();
}
Do all you dynamic or anything to want to wait. Then call the WaitToSync
$.each(wordList, function(index, word){
newHtml += ' ' + word;
if (index == 50) {
newHtml += '<div>Some HTML</div>'
}
});
waitToSync(
function wait() { return document.getElementsByClassName("newsitem_text").length > 0; },
function dosomething() { $(".newsitem_text").html(newHtml); },
10000, //wait up to 10 seconds.
'dynamic add HTML');

You can try to execute this function at window load or at document ready
just put ur function inside this:
$(window).load(function(){
//your function here
});
or here
$(document).ready(function(){
//your function here
});

It is way to better to put the code in the end of the body tag after all your content so javascript can run after everything is loaded !

Related

waitForElementsToBePresent in Protractor

So I found this little bit of code online that works pretty well for waiting for a unique identifier to be loaded on the page before you interact with it..
this.waitForElementToBePresent = function(element) {
browser.wait(function() {
return element.isPresent();
}, 60000);
};
I am new to JS and Protractor.. I was wondering how this code could be changed to wait for the presence of an element where there are multiples. I know you use $$ for the identifier when there are multiples, but how can I change this method to recognize that so I would then do something like..
utility.waitForElementsToBePresent(myElement).get(0);
Look at Alecxe's answer on this question. I've been using it for awhile and it works perfectly. Here's my slightly modified version:
// wait for X number of elements
presenceOfAll = function (elem, num, timeout) {
var time = timeout || 5000;
console.log('Waiting for elements ' + elem.locator() + ' to have a count of ' + num);
return browser.wait(function () {
return elem.count().then(function (count) {
return count >= num;
});
}, time, 'Failed waiting for ' + elem.locator() + ' to have ' + num + ' total items');
};
Rather than making a new function I would probably just last element in a group then wait for it.
var els = elements.all(by.css("#id"));
waitForElementToBePresent(els.last());
As something to remember ther is "isPresent" and "isDisplayed", present mean that an element exists on the page, visible or not. If you want to wait for it to actually show on the page, first wait for it to be present then wait for it to be displayed.
http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.last

Opening the page fails in for loop when called more than 1 time

I am writing a PhantomJS program that should open a page, track its time and write the loading time in the console. My goal is to make this function run for 5 times.
Problem is that when I write "for" loop which executes only 1 time - function runs correctly, but when I try to run it 2 times, I get the error message that it failed to open the address. It seems that address is not passed second time. I have no idea what could go wrong anymore. This is my code:
var page = require('webpage').create(),
system = require('system'),
t;
//Opening a page and tracking page load time
var loadpage = function (){
address = 'http://www.google.com';
t = Date.now();
page.open(address, function(status) {
if (status !== 'success') {
console.log('FAIL to load the address');
} else {
t = Date.now() - t;
console.log('Loading ' + address);
console.log('Loading time ' + t + ' msec');
}
phantom.exit();
});
};
for (var i = 0; i <2 ; i++) {
loadpage(i);
}
page.open() is an asynchronous function. If you call it in a loop, then it the loop will be fully executed before even the first page request is sent. The problem is that calling page.open() multiple times immediately after each other will overwrite the previous invocations. At best, you can only load the last URL.
You either need to wait for each page load or you can create multiple pages in order to request pages in parallel. Also, you should exit (phantom.exit()) PhantomJS only after you've waited for each page load.
Here are some ways to do this:
Q: Looping over urls to do the same thing
Q: loop through array of urls in phantomjs using javascript
Easy way to do it:
var loadpage = function (i, max){
if (i === max) {
phantom.exit();
return;
}
var address = 'http://www.google.com';
t = Date.now();
page.open(address, function(status) {
if (status !== 'success') {
console.log('FAIL to load the address');
} else {
t = Date.now() - t;
console.log('Loading ' + address);
console.log('Loading time ' + t + ' msec');
}
loadpage(i+1, max)
});
};
loadpage(0, 5);
It seems you shouldn't call phantom.exit() halfway through your program.

getScript creates ReferenceError

I have some js scripts that I load into my main.js before I start the rest of my code. However during testing it came to my attention that sometimes it creates the following reference error (1 in 8 pageloads or something).
ReferenceError: createContainer is not defined
Now, the only reason that I can think of that I get this error is that when I execute the startScript() function, not all my files are loaded or fully accesable.
Now, perhaps I'm going about this all wrong for including other .js files into my main.js, so I'd like to hear your thoughts about this.
The main.js looks like this:
$(document).ready(function() {
//sets and array of files that should be loaded before anything every happens
var arrFilesToLoad = [ 'scripts/global/variables.js',
'scripts/global/objects.js',
'scripts/global/classes.js'];
var _error;
//walks through the array of items that should be loaded and checks for fails
$.each(arrFilesToLoad , function (key) {
$.getScript(arrFilesToLoad[key])
//when a file is loaded with succes
.done(function () {
//on default send a message to the console
console.log(arrFilesToLoad[key] + 'loaded succesfully');
//if every item is loaded start the script
if(key == (arrFilesToLoad.length - 1)){
startScript();
}
})
//when a file fails to load
.fail(function () {
//add the file that failed to load to a string message
_error += arrFilesToLoad[key] + " - failed to load. \n";
//show an alert with what file failed to load
if(key == (arrFilesToLoad.length - 1)){
alert(_error);
}
});
});
function startScript () {
//set a variable which contains a function that returns a DIV with styling
var oContainer = createContainer();
var oMainMenu = new Menu(arrMainMenu);
$(oContainer).append(createMenu(oMainMenu));
$('body').append(oContainer);
}
});
The issue is because you're loading 3 scripts and presumably only one of them holds the createContainer() function, yet you execute your code when the last request has loaded. This means that you've got a race condition. The last request that was made is not guaranteed to be the last one that is completed. If the other scripts are still being loaded as the final request is completed, you'll see this error.
You can amend your logic so that the callback is only executed once all the scripts have loaded. Try this:
var requests = [];
$.each(arrFilesToLoad , function (key) {
requests.push($.getScript(arrFilesToLoad[key]));
});
$.when.apply(this, requests)
.done(startScript)
.fail(function() {
console.log('one or more scripts failed to load');
});
function startScript() {
var oContainer = createContainer();
var oMainMenu = new Menu(arrMainMenu);
$(oContainer).append(createMenu(oMainMenu));
$('body').append(oContainer);
}

Ajax call inside a timeout function getting called multiple times

I'm using this great piece of javascript (http://www.deadosaurus.com/detect-a-usb-barcode-scanner-with-javascript/) to recognize USB barcode scanners input (just really fast typed keyboard strokes) without having the focus on any input field in a website. The thing works great as it is, but what I need to do is to figure out if the scanned item is of type A or type B before I can do anything with the scan result, and that is where the Ajax-call comes into play like this:
$(document).ready(function() {
var pressed = false;
var chars = [];
$(window).keypress(function(e) {
if (e.which >= 48 && e.which <= 57) {
chars.push(String.fromCharCode(e.which));
}
console.log(e.which + ":" + chars.join("|"));
if (pressed == false) {
setTimeout(function(){
if (chars.length >= 10) {
var barcode = chars.join("");
console.log("Barcode Scanned: " + barcode);
// Here is the ajax-call.
checkItemType(barCode).success(function(response) {
// Do stuff with the response.
});
}
chars = [];
pressed = false;
},500);
}
pressed = true;
});
});
And the function:
function checkItemType(barCode) {
// Example parsing for the id I want to do work with.
var itemId = parseInt(barCode.substr(9, 6).replace(/^[ 0]/g, ''));
var data = { itemId: itemId };
return $.ajax({
type: 'POST',
url: 'Controller/CheckItemType',
traditional: true,
dataType: 'json',
data: data
});
}
For the first time when I scan the item, all things work fine. The second time I do a scan, the checkItemType-function gets called 2x and the third time it gets called 4x, usually capping at 8x.
I just cant get my head around this.. there is a if-clause for chars.length >= 10 and the chars list should clear out after the barcode scanners input stops. Removing the ajax-call fixes the issue as I said before, but I am unable to really figure out a way to make the call outside of the timeout function. Guess I should add that I'm still learning javascript and I'm really out of ideas for this one. Thanks in advance.
EDIT: Success code didn't really matter so removed it as suggested.
The bug you describe sounds like some other place in your code binds the handler again.
Do you somehow reload some portion of your page (maybe through ajax), which could trigger the $(window).keypress( ... ) binding a second time ?
I've had a look at the code and think I've got it fixed. I've simply added chars = []; pressed = false; after you have created the barcode and it then resets after a barcode is scanned. Have a look below:
JSFiddle
if (pressed === false) {
setTimeout(function () {
console.log("Timeout");
if (chars.length >= 10) {
var barcode = chars.join("");
chars = [];
pressed = false;
console.log("Barcode Scanned: " + barcode);
// Here is the ajax-call.
checkItemType(barCode).success(function (response) {
// Do stuff with the response.
});
}
chars = [];
pressed = false;
}, 500);
}
pressed = true;
I would say it is a timing/synchronization issue. You setup for each event/keystroke a timeout in 500 ms: that means that after 500 ms from the first keystroke you start to run your (first) function: chars.length > 10 and then while you do the Ajax call (because it is slow) the second timeout fires: chars.length is still > 10 so you go and run again checkItemType... and so on until the first call will set the chars = [].
The number of times checkItemType si executed is related to the delay between the keystrokes and the time to run checkItemType. If you only reset chars = [] after you check it for >= 10 you still can't be sure then the second timeout didn't already passed that condition.
One way to be sure that you run checkItemType only once would be to have only one timeout set on the first keystroke and then if chars.lenngth < 10 when it fires set it up again to run in another x ms...etc.
if (pressed == false) -> if(!pressed) or if(pressed === false)

Javascript, execute scripts code in order inserted into dom tree

NOT A DUPLICATE AS I HAVE YET TO FOUND A SATISFYING ANSWER ON OTHER THREADS:
Load and execute javascript code SYNCHRONOUSLY
Loading HTML and Script order execution
Load and execute javascript code SYNCHRONOUSLY
Looking for native Javascript answers, no jQuery, no requireJS, and so forth please :)
SUMMARY OF THE ENTIRE QUESTION:
I want to asynchronously load scripts but have ordered execution
I am trying to enforce that the code in the inserted script elements execute exactly in the same order as they were added to the dom tree.
That is, if I insert two script tags, first and second, any code in first must fire before the second, no matter who finishes loading first.
I have tried with the async attribute and defer attribute when inserting into the head but doesn't seem to obey.
I have tried with element.setAttribute("defer", "") and element.setAttribute("async", false) and other combinations.
The issue I am experiencing currently has to do when including an external script, but that is also the only test I have performed where there is latency.
The second script, which is a local one is always fired before the first one, even though it is inserted afterwards in the dom tree ( head ).
A) Note that I am still trying to insert both script elements into the DOM. Ofcourse the above could be achieved by inserting first, let it finish and insert the second one, but I was hoping there would be another way because this might be slow.
My understanding is that RequireJS seems to be doing just this, so it should be possible. However, requireJS might be pulling it off by doing it as described in A).
Code if you would like to try directly in firebug, just copy and paste:
function loadScript(path, callback, errorCallback, options) {
var element = document.createElement('script');
element.setAttribute("type", 'text/javascript');
element.setAttribute("src", path);
return loadElement(element, callback, errorCallback, options);
}
function loadElement(element, callback, errorCallback, options) {
element.setAttribute("defer", "");
// element.setAttribute("async", "false");
element.loaded = false;
if (element.readyState){ // IE
element.onreadystatechange = function(){
if (element.readyState == "loaded" || element.readyState == "complete"){
element.onreadystatechange = null;
loadElementOnLoad(element, callback);
}
};
} else { // Others
element.onload = function() {
loadElementOnLoad(element, callback);
};
}
element.onerror = function() {
errorCallback && errorCallback(element);
};
(document.head || document.getElementsByTagName('head')[0] || document.body).appendChild(element);
return element;
}
function loadElementOnLoad(element, callback) {
if (element.loaded != true) {
element.loaded = true;
if ( callback ) callback(element);
}
}
loadScript("http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js",function() {
alert(1);
})
loadScript("http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js",function() {
alert(2);
})
If you try the above code in like firebug, most often it will fire 2, and then 1. I want to ensure 1 and then 2 but include both in the head.
if I insert two script tags, first and second, any code in first must fire before the second, no matter who finishes loading first. I have tried with the async attribute and defer attribute
No, async and defer won't help you here. Whenever you dynamically insert script elements into the DOM, they are loaded and executed asynchronically. You can't do anything against that.
My understanding is that RequireJS seems to be doing just this
No. Even with RequireJS the scripts are executed asynchronous and not in order. Only the module initialiser functions in those scripts are just define()d, not executed. Requirejs then does look when their dependencies are met and executes them later when the other modules are loaded.
Of course you can reinvent the wheel, but you will have to go with a requirejs-like structure.
Ok, I think I have now came up with a solution.
The trick is that we keep track of each script to be loaded and their order as we insert them into the dom tree. Each of their callback is then registered accordingly to their element.
Then we keep track of when all has finished loading and when they all have, we go through the stack and fire their callbacks.
var stack = [];
stack.loaded = 0;
function loadScriptNew(path, callback) {
var o = { callback: callback };
stack.push(o);
loadScript(path, function() {
o.callbackArgs = arguments;
stack.loaded++;
executeWhenReady();
});
}
function executeWhenReady() {
if ( stack.length == stack.loaded ) {
while(stack.length) {
var o = stack.pop();
o.callback.apply(undefined, o.callbackArgs);
}
stack.loaded = 0;
}
}
// The above is what has been added to the code in the question.
function loadScript(path, callback) {
var element = document.createElement('script');
element.setAttribute("type", 'text/javascript');
element.setAttribute("src", path);
return loadElement(element, callback);
}
function loadElement(element, callback) {
element.setAttribute("defer", "");
// element.setAttribute("async", "false");
element.loaded = false;
if (element.readyState){ // IE
element.onreadystatechange = function(){
if (element.readyState == "loaded" || element.readyState == "complete"){
element.onreadystatechange = null;
loadElementOnLoad(element, callback);
}
};
} else { // Others
element.onload = function() {
loadElementOnLoad(element, callback);
};
}
(document.head || document.getElementsByTagName('head')[0] || document.body).appendChild(element);
return element;
}
function loadElementOnLoad(element, callback) {
if (element.loaded != true) {
element.loaded = true;
if ( callback ) callback(element);
}
}
loadScriptNew("http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js",function() {
alert(1);
});
loadScriptNew("http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js",function() {
alert(2);
});
Ok, some of you might argue that there is missing info in the question, which I will give you and here we are actually just solving the callback. You are right. The code in the script is still executed in the wrong order, but the callback is now.
But for me this is good enough, as I intend to wrap all code that is loaded in a method call, alá AMD, such as a require or define call and will put on stack there, and then fire them in the callback instead.
I am still hoping out for Asad and his iframe solution, which I believe might provide the best answer to this question. For me though, this solution will solve my problems :)
I am posting here just like a draft
This do not work because cross-domain police
Here the idea is to obtain all scripts first and when they are in memory, execute them in order.
function loadScript(order, path) {
var xhr = new XMLHttpRequest();
xhr.open("GET",path,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300 || xhr == 304){
loadedScripts[order] = xhr.responseText;
}
else {
//deal with error
loadedScripts[order] = 'alert("this is a failure to load script '+order+'");';
// or loadedScripts[order] = ''; // this smoothly fails
}
alert(order+' - '+xhr.status+' > '+xhr.responseText); // this is to show the completion order. Careful, FF stacks aletrs so you see in reverse.
// am I the last one ???
executeAllScripts();
}
};
}
function executeAllScripts(){
if(loadedScripts.length!=scriptsToLoad.length) return;
for(var a=0; a<loadedScripts.length; a++) eval(loadedScripts[a]);
scriptsToLoad = [];
}
var loadedScripts = [];
var scriptsToLoad = [
"http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js",
"http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js",
"http://nowhere.existing.real_script.com.ar/return404.js"
];
// load all even in reverse order ... or randomly
for(var a=0; a<scriptsToLoad.length; a++) loadScript(a, scriptsToLoad[a]);
After a while of fiddling around with it, here is what I came up with. Requests for the scripts are sent off immediately, but they are executed only in a specified order.
The algorithm:
The algorithm is to maintain a tree (I didn't have time to implement this: right now it is just the degenerate case of a list) of scripts that need to be executed. Requests for all of these are dispatched nearly simultaneously. Every time a script is loaded, two things happen: 1) the script is added to a flat list of loaded scripts, and 2) going down from the root node, as many scripts in each branch that are loaded but have not been executed are executed.
The cool thing about this is that not all scripts need to be loaded in order for execution to begin.
The implementation:
For demonstration purposes, I am iterating backward over the scriptsToExecute array, so that the request for CFInstall is sent off before the request for angularJS. This does not necessarily mean CFInstall will load before angularJS, but there is a better chance of it happening. Regardless of this, angularJS will always be evaluated before CFInstall.
Note that I've used jQuery to make my life easier as far as creating the iframe element and assigning the load handler is concerned, but you can write this without jQuery:
// The array of scripts to load and execute
var scriptsToExecute = [
"http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js?t=" + Date.now(),
"http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js?t=" + Date.now()
];
// Loaded scripts are stored here
var loadedScripts = {};
// For demonstration purposes, the requests are sent in reverse order.
// They will still be executed in the order specified in the array.
(function start() {
for (var i = scriptsToExecute.length - 1; i >= 0; i--) {
(function () {
var addr = scriptsToExecute[i];
requestData(addr, function () {
console.log("loaded " + addr);
});
})();
}
})();
// This function executes as many scripts as it currently can, by
// inserting script tags with the corresponding src attribute. The
// scripts aren't reloaded, since they are in the cache. You could
// alternatively eval `script.code`
function executeScript(script) {
loadedScripts[script.URL] = script.code
while (loadedScripts.hasOwnProperty(scriptsToExecute[0])) {
var scriptToRun = scriptsToExecute.shift()
var element = document.createElement('script');
element.setAttribute("type", 'text/javascript');
element.setAttribute("src", scriptToRun);
$('head').append(element);
console.log("executed " + scriptToRun);
}
}
// This function fires off a request for a script
function requestData(path, loadCallback) {
var iframe = $("<iframe/>").load(function () {
loadCallback();
executeScript({
URL: $(this).attr("src"),
code: $(this).html()
});
}).attr({"src" : path, "display" : "none"}).appendTo($('body'));
}
You can see a demo here. Observe the console.
cant you nest the loading using ur callbacks?
ie:
loadScript("http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js",function() {
alert(1);
loadScript("http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js",function() {
alert(2);
})
})

Categories