I wrote simple code to check is image loaded
imageLoadErrorCheck: function() {
$('img').on('error', function() {
$(this).addClass('img_errorShowInfo');
$(this).prop('src', '/assets/default/img/404.png');
});
},
but somehow in some cases this code is not working approx in 1 on 20 refreshes it's not triggering (I'm checking now in Chrome only).
Is any better way to recognize when an image was not loaded?
E.g. console always throwing GET 404 error, maybe is a way to catch this?
Related
jQuery Error
I've done some extensive searching, and have found samples of code to handle an alert box when you expect it; but I haven't been able to find anything on handling a random alert box that might, or might not appear.
The website I'm dealing with is very stubborn to begin with. Several elements without any kind of ID's, timeouts, network failures, etc.
98% of the time when I run the tests, they run without getting the alert box error and everything is good. When the alert box does popup the other 2% of the time which says "Error:jQuery not found," all my other tests fail with unexpected alert errors.
My first question is, could it be something in my code that's causing the error to happen? (see code below) My gut tells me it's probably the website. So if that's the case, could someone please show me an example that would handle a "possible" alert box and accept it, without failing my test? The swithTab() test is running first, and then the setDates() test is running next. The alert box error pops up after the switch tab, as the page is loading. I've tried using a deferred promise to handle the alert, and catch the error, but it fails before it can even catch the error. It fails as soon as it hits browser.switchTo().alert() because the alert usually doesn't exist. I really appreciate any help I could get.
this.switchTab = function(){
browser.getAllWindowHandles().then(function(handles){
browser.switchTo().window(handles[1]);
browser.sleep(2000);
var lockBoxTitle = element(by.css('td.title'));
browser.driver.wait(EC.visibilityOf(lockBoxTitle),5000);
});
}
this.setDates = function(yesterdayDate){
browser.sleep(3000);
//handleAlert();
startDateTextBox.clear();
startDateTextBox.sendKeys(yesterdayDate);
endDateTextBox.clear();
endDateTextBox.sendKeys(yesterdayDate);
retrieveBtn.click();
browser.sleep(5000);
expect(validateStart.getText()).toEqual(yesterdayDate);
expect(validateEnd.getText()).toEqual(yesterdayDate);
}
You can check if popup is displayed and if is displayed click the button for closing it:
var popUpElm = element(by.model(""));
var closeBtn= element(by.model(""));
popUpElm.isDisplayed().then(function(isDisplayed) {
if (isDisplayed) {
closeBtn.click();
console.log("Popup is closed");
} else {
console.log("Popup is not displayed");
}
});
I am trying to delete a database for unit testing:
var DeleteDb = indexedDB.deleteDatabase(dbName);
this piece of code gets directly called in the first beforeEach in jasmine.
with chrome devTools i can see that DeleteDb.error has the following value:
error: [Exception: DOMException: Failed to read the 'error' property from 'IDBRequest': The request has not finished.]
DeleteDb.onsuccess or DeleteDb.onerror are never fired. Also i am never trying to read an 'error' property in the code.
Does somebody know what this error means, where it is coming from or how i can solve it?
UPDATE:
This code still sometimes fails for me. it gives me the same error as above.
<html>
<head>
<script>
var deleteDb = window.indexedDB.deleteDatabase('fakeNonExistentDatabase');
deleteDb.onsuccess = function() {
console.log('complete');
};
</script>
</head>
</html>
I am still not sure why this is happening. sometimes opening a new tab or closing another one works.
Also it never gives an error when removing the onsuccess callback
UPDATE 2
Well it seems that the code is actualy working, but the onsuccess event is never getting fired because no events are getting fired anymore when pressing F8 in chrome devtools. The error i;m getting now is:
Uncaught InvalidStateError: Failed to execute 'transaction' on 'IDBDatabase': The database connection is closing.
I thought the above error message was a result of the first error message in this post but actualy it was the other way around. There are a few pages i can find about this topic on the internet but there isn't really provided a answer.
Any thoughts?
Also check onblocked. There might be another db connection that keeps your delete request from neither succeeding nor failing.
It is possible to avoid this behaviour by listening to onversionchange on your opened connections and make sure to close the connection when that event is triggered.
Okay as it turns out all of my code was good but deleting a database a second time takes somwhere between 10 seconds and several minutes.
you can test this for yourself: the code in this post shows it
what was happening is that jasmine times out after 5 seconds by default (i changed this to a higher number but who would think i takes THAT long)
browser: Chrome 39.0.2171.71 m
Make sure when deleting
the RESULT from DB creation is not empty
close the RESULT before deleting
delete through the same connection you created
var init=function(){
var request = this.connection.open(name,version);
request.onupgradeneeded=function(e){
var version=e.target.result;
};
request.onsuccess=function(e){
db.result=e.target.result;
};
request.onerror=function(e){
};
};
var remove=function(){
if (typeof db.result !== 'undefined') {
db.result.close();
return this.connection.deleteDatabase(version);
}
}
This is 5 years late, but just in case there are more guys like me...
close the connection to the database before deleting it...
This question already has an answer here:
Check if file exists but prevent 404 error in console from showing up [duplicate]
(1 answer)
Closed 8 years ago.
I'm running a script that is dynamically loading images depending on a few criteria. The script does not know beforehand whether a specific image source actually exists and will thus need to check before displaying the image. I do this by replacing the onerror handler on the element with a function that attempts to gracefully handle the event.
At first glance this works rather well, however even though I have replaced the event, the browser still audits 404 errors in the console which I don't want. Even worse is that IE displays the infamous JS error icon in the status bar which I find rather awkward.
I've tried to summarise the problem in a JSFiddle.
var img = new Image();
img.onerror = function (ev) {
alert("This does not exist!");
return true;
}
img.onload = function (ev) {
document.body.appendChild(this);
}
img.src = "foo.png"; //Missing image
Basically, I want to suppress all error reporting for this element such that the console doesn't get flooded with superfluous error output.
I know that I could solve this by prefetching and evaluating the HTTP headers with AJAX and server side scripting, which while technically a possible solution, is something I would prefer to avoid. However, while I only use standard JS in my example, JQuery code is also acceptable.
I have tried reading up on the event specification, but since web scripting is still the mess of confusing ECMAScript, HTML DOM, client, pixy dust and now HTML5 definitions that we all love to hate, it really didn't make me any wiser. The closest I got was Mozilla's documentation (that interestingly doesn't even state the correct function parameters) which suggested that letting the event return true would suppress errors, but that didn't really work.
I believe you can not check if image link is broken/does not exist without getting 404 error. Which is actually is information about link is broken.
You mentioned that other way is ajax to check existance...
function UrlExists(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status != 404;
}
UrlExists('img_url');
but still you will get 404 in console.
I need a script that can determine the reason an image didn't load based on the HTTP status code supplied.
I am aware of the onError event on images and objects, but it does not pass the error code. So if an image has a broken source or a time out occurred are dealt with the same way.
What I would like is to have a script that can determine the error code and act accordingly.
For example:
404 - replace image with a predefined one
403 - notify admin using an callback function
504 - try to reload
etc.
I've done some searching on google, but other than the onError event I came up short.
Any ideas?
the only thing i can think of is to go to a xhr request on fail, with Asset.image from more handling the loading:
new Asset.image('foo.jpg', {
onload: function() {
someel.adopt(this);
},
onerror: function() {
new Request({
url: this.get('src'),
onComplete: function() {
console.log(this.status); // 404
}
}).get();
}
});
http://jsfiddle.net/dimitar/2hwej/
not exactly the greatest as it would mean 2 requests. to go around that, you can put your image loading into a xhr request to begin with and then use base64 data to output or something.
I am looking to change the URL of a clip when the stream is not found. I am properly configuring the onError event, as I can debug the specific line or add an alert, but what I am having trouble with is the following:
onError : function(errorCode, errorMessage) {
this.getClip(0).update( { url : 'http://full-url.com/images/stream-not-found.png' } );
}
The problem is this image is never being loaded to the player upon the error -- I get a stream not found error message and then the player continues to look for this 'unfound' stream. I'm able to hit the URL and see the image, but am unable to change over upon stream not found. Per the documentation it is supposed to be able to take an image as the URL, but using a fully qualified or relative URL doesn't seem to be working.
This is somewhat simplified as we are looking to use customized images for each error code.
No real answer was determined for this, the best that could be done was to unload the player, and display the HTML which was in the container prior to the player being loaded.
At that point we still had an error number, so we were able to then use jQuery to set the html to display the new image.
Don't have code in front of me, but was similar to:
onError: function(errorCode, errorMessage) {
this.unload();
switch (errorCode) {
case 200:
$('#idOfPlayer a').attr('src', link-to-200-error.jpg);
break;
}
}