I have an issue with my Javascript not working in Firefox.
I'm fetching images for a page from external sources (IP cameras). Where I am unable to fetch an image, I want to serve my own placeholder image so I don't show the browser default broken image. The solution I have works perfectly in Chrome. However, in Firefox it is automatically loading the missing image - but if I refresh the page it then works perfectly.
The code is:
$(function () {
// Replace Broken Image
$('img').error(function(){
$(this).attr('src', 'https://www.evercam.io/img/error.png ');
});
});
Does any one know why this wouldn't work in Firefox?
Cheers,
Ciarán
it about event binding use on/live instead.
https://api.jquery.com/on/
basicly what happens is it only bind event to imgs already there for more check JS event delegate.
try $(document).on("error", "img", func...);
basically document can be anything (selector, or object) that is a parent of actually element that triggers the event. what happen is with the event bubbling parent click event also get triggered and in the event jquery checks the trigger has given selector.
Cheers.
Related
I am having trouble getting something wo work in Safari (and on ios devices) that works fine on Firefox, Chrome, Edge and IE.
On my page there is an input field that sends input back to the server and adds an element to the dom after the server created this element (think of it as a complex combobox with server side rendering of search results).
This dom element that's added to the page contains clickable links like this one
Search result 1
Since nobody knows how many of these links will be present on a page, I register a a click handler on the document like this:
$(document).on("click touchstart tap", function(evt) {
if ($(evt.target).hasClass("stampOption")) {
some code...
});
While this is fine in all Browsers I've tested so far, the click handler is never called in Safari.
I've tried several alternatives like delegated events (which also seem to have problems on Safari/iOS) like so:
$(document).on("click touchstart tap", ".stampOption", function(evt) {
. And I applied the cursor:pointer CSS trick as well as the onclick="" trick that is suggested here on SO and elsewhere.
I also made sure no other click event handler prevents bubbling or such.
So any ideas what else I could try?
Nevermind. The problem was a blur handler on the same page that used relatedTarget, which, on Safari, was always Null, so some if()-statement never came to the right conclusion on Safari, while all was well in other Browsers.
Let's say some handler ate away the click event on Safari. A typical case of ignorance towards Browser incompatibilities...
I have an issue where a form is embedded in an iframe and after the form is submitted, the iframe is deleted from the DOM. Immediately after the form is deleted (the form was the last thing to have focus) I am unable to detect events that are bound to the root window element.
The frame is being loaded from a separate domain, although it does not matter for this example, it only matters that I have no control over the scripts on that page.
I understand that I cannot detect DOM events in the iframe, but all events are lost until the user clicks back on the DOM after iframe removal. This happens in both Firefox and Chrome. IE appears to return focus back to the original DOM as expected. I have not tested in other browsers.
$(window).keydown(function(e){
console.log (e.keyCode);
});
var $iframe = $("<iframe src='www.example.com'>");
$("body").append($iframe);
window.setTimeout(function(){
$iframe.remove();
}, 1000);
(The code above is just an example, i have included a working codepen to illustrate further- http://codepen.io/anon/pen/WQroqe)
To use the codepen -
Click the "click to load iframe button".
Make sure you click in the iframe so it has focus
After the iframe deletes, type anything and notice the DOM does not log your key strokes.
Click on the DOM and notice that your keystrokes are being logged properly.
Use Case: Form opens an iframe and submits, then removes itself from the DOM. I want to be able to detect keyboard events after the form is submitted without the user needing to use their mouse.
Question: I thought the top most DOM element was "window" and if this is not capturing the keyboard events, what is? There are no other DOMs currently present (i.e. iframes) as far as I know. I tested this is both firefox and chrome. Any explanation as to what is happening and why what I am trying to do is not possible or a way to capture the events would be greatly appreciated.
(My current solution is to use a MutationObserver to watch for the iframe to disappear and force focus back on the window. I also know I could use a setInterval to continually check for the iframe. Both solution feel like I am doing extra work).
after closing the iframe, focus the window using $(window).focus(); if you must
in the sample you'd do it like
$iframe.load(function(){
window.setTimeout(function(){
console.log("deleting");
$("#deleteMe iframe").remove();
$(window).focus(); // <======
}, 5000);
});
So I am trying to work out the differences between
link.click()
and
var event = document.createEvent("MouseEvents");
event.initEvent("click", true, false);
link.dispatchEvent(event);
As far as I can tell these should be the same things (however working with my jsfiddle example of exporting a csv from a URI this is not the case as they perform differently from browser to browser)
Using .click() with firefox the popup to download the csv will not show (it will in chrome)
see example -> http://jsfiddle.net/a5E9m/23/
Where as using the Mouse events it will
see example -> http://jsfiddle.net/a5E9m/25/
I think that Firefox has restrictions around the click function on an <a> element. See here. Whereas when you wire up the mouse event yourself, you are manually adding the click wiring. Also, see here and here.
Also, as Boris Zbarsky pointed out in the comments, the <a> element does not have a click function on it in the spec.
I am trying to implement the jQuery orbit slider. I have a div tag that contains several images. The problem I am encountering is the orbit() function is on occasion being called before all the images have loaded. I have tried to solve this by surrounding the orbit function call as follows:
window.onload = function(){jQuery('#img-container').orbit()}
This should ensure that orbit is only called after the page and all the content (including the necessary images) have loaded. However, the onload event is not consistently firing because the image slider does not always load. I notice that if I clear the cache and navigate to the page, then the onload event does not fire, and thus orbit never fires.
Other things I have tried:
I have also tried jQuery(window).load() which was unsuccessful. I also tried iterating over each individual image in the container with the .load() function but was not successful. I have been able to resolve this issue on Chrome and FF using something similar to this approach: jquery .one() load and error events not working
Does anyone have any other suggestions to fix this in IE?
ADDITIONAL INFO: I did a test where I use deelay.me to delay the image by a few seconds and doing so made the onload function work consistently. It's only when the image loads quickly that the onload doesn't seem to fire
The proper way to do this in jQuery using the jQuery function:
$(function(){
//onload stuff here...
});
That should work in IE as well as other browsers.
(Note: FireFox only)
The Back-Forward cache is a caching system in firefox that runs when the back button is clicked. It will then simply use the DOM from the previous page that is in it's cache instead of reloading the entire page (and re-requesting files).
I'm using piwik (an analytics service), that requires a tracking code snippet to be added to the footer. Upon adding this, the back-forward cache no longer works.
It is my understanding that, if there is an unload event (or beforeunload) the bfcache is automatically disabled. This is likely what is happening here.
Is there anything I can add to make the BFCache work anyway?
To make matters worse, I cannot add any custom code below the piwik code. That one is always last.
I added the code displayed below to try and remove any unload events that are registered, but the BFcache is still not working.
$(window).unbind('beforeunload');
$(window).unbind('unload');
window.onbeforeunload = null;
window.onunload = null;
I also tried:
function UnloadHandler() {
window.removeEventListener('unload', UnloadHandler, false);
}
window.addEventListener('unload', UnloadHandler, false);
$(window).unload(function () { $(window).unbind('unload'); });
but this too does not work.
I have placed some samples online. Remember to test this with Firefox:
this one shows a working BFcache (you will get an different alert based on whether or not the back button was clicked)
http://users.telenet.be/prullen/bfcache/a.html
Loaded piwik, BFCache no longer works
http://users.telenet.be/prullen/bfcache/b.html
Loaded piwik, tried to unset onload event, but still not working
http://users.telenet.be/prullen/bfcache/c.html
Using unloadhandler
http://users.telenet.be/prullen/bfcache/d.html
Suggestions by #roasted
http://users.telenet.be/prullen/bfcache/e.html
http://users.telenet.be/prullen/bfcache/f.html
More information about BFCache:
https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching
You can see another demo of the behavior here:
http://www.twmagic.com/misc/cache.html
If you add dom elements, and click the first link, then return - the dom elements are still there. However, if you add an onload or beforeunload event that is not the case. Again, test this in firefox.
Any ideas?
In order to enable BFCache you need to remove beforeunload event listener. It should be the same listener which was added by Piwik code, otherwise removeEventListener will do nothing.
That listener is unreachable outside of the Piwik's source, so one does not simply remove it.
But, if you have a possibility to insert code before the Piwik, you can try to override addEventListener, track added handlers and expose function to remove all tracked handlers at once.