Javascript works fine in firefox but not in ie and chrome - javascript

http://www.measureraajje.com/
The webpage works fine in firefox and opera,
but it doesn't work at all in internet explorer, google chrome and safari.
HOW IT SHOULD WORK:
The user should select an atoll first... then the adjacent combobox should display a list of islands.
After selecting 2 islands. the user will have to press add route... then the route will be added and the result will be displayed in the table below.

Use a single script tag at the end of the body tag and put in every js code which are using html elements of the page. Html elements must be present before excecuting javascript code.

Related

Open HTML file input with Javascript click not working in Firefox

I have a simple HTML file input that I can open with Javascript in Chrome but not in Firefox.
<input type="file" id="fileImportInput" style="display:none">
document.getElementById('fileImportInput').click(); // this works in Chrome but not Firefox
I'm not sure why this won't work in Firefox. I get no console error, etc. In Chrome the file browser opens and I can select my file no problem. Any ideas?
Thanks.
Edit: just to note that if I remove the display:none style from the input it makes no difference.
I actually got it working. Firefox has a default setting enabled to block pop ups. Just go to Options and check it off. Strange that it includes file dialogs in it's block list.
https://support.mozilla.org/en-US/kb/pop-blocker-settings-exceptions-troubleshooting#w_is-the-pop-up-blocker-on-and-enabled-for-this-sitehttps://support.mozilla.org/en-US/kb/pop-blocker-settings-exceptions-troubleshooting#w_is-the-pop-up-blocker-on-and-enabled-for-this-site

Automating embed content in Internet Explorer using Selenium

Table I am trying to access
I am trying to access a table on a webpage that lies in an embed tag. I'm unable to access (I need to check/uncheck the checkboxes) the table using Internet Explorer. The code works fine in Firefox and Chrome.
The HTML content is as below
My problem is that in IE I can't find any contents of the table even with page source or inspect element, so I can't do anything with my table.

ngPrint in IE10, IE11 browsers

I'm using ng print directive for angularjs that provides the ability to print pages built using angularjs.
https://github.com/gilf/ngPrint
It works in Chrome and Firefox, however in IE browsers, even in the latest ones, the content disappears. There is a line of code where innerHTML is set to "" and then the cloned DOM is appended using appendChild followed by a window.print() function.
function d(g) {
var h = g.cloneNode(true);
//f.innerHTML = "";
f.appendChild(h);
window.print()
}
The page I'm trying to print contains ui-grid tables. On clicking the print buttons, the original contents i'm trying to print shrink in size like shown in the attachment. May be there is some IE quirk that is not adding the css files? How to get around with making it work in IE browsers?

Images don't display in ie9 when inserted using ajax and innerHTML, until users right clicks on and clicks "Show Pictures"

I was upgrading a wesbite to work with IE9 (I really hate IE), and after much fiddling it all finally worked, except that when inserting html into the page using code like the below, none of the pictures would display.
$("#div").innerHTML(htmlToInsertWithImgTags);
The inserted HTML looked a little like this:
If you right clicked on any of the img's and then clicked on "Show Pictures", they all magically appeared, like below:
This happens due to a trust setting in Internet Explorer, but if the image's you want to insert are already present on the web page, then internet explorer trusts the new content and shows the pictures.
So we got round this problem but adding code like the following (I'm aware this isn't good html) to the static part of the page, and then when this picture was inserted using Ajax and innerHTML eveything worked as you would expect.
<img url="redcircle.gif" style="display:none" />

JavaScript Prepended Content Not Showing On Anchor Click In Safari

I'm working on a project in WordPress that is utilizing the Theme Customizer to assist other people working on the site with me. We're dynamically loading in a lot of content and options like Google Fonts, so the loading of the Customizer takes a few seconds to fully load (lingers on the admin page, then after a few seconds progresses to the /customize.php page).
Because of this, I wanted to add a simple "Customizer Loading" message that would pop up to let users know that something was happening. Everything works fine in Chrome and Firefox, but Safari and Internet Explorer (as far as I can tell from testing in Sauce) are giving me problems.
I'm using the following bit of JavaScript to add the loading message:
$('a[href="customize.php"]').click( function() {
$('head').prepend('<style type="text/css"></style>');
$('body').prepend('<div id="loading-message"></div>');
});
Inside the <style type="text/css"> block I simply included my styles and then <div class="loading-message"></div> is where I placed my content.
What is happening in Safari (and again, IE from what I can tell) is that when ... is clicked, the styles and content are getting added to the DOM (I can see them when I inspect the page), but they don't actually become visible, whereas in Chrome and Firefox they do.
If I use e.preventDefault() on the link, the loading message shows up just fine. Other events, like alert() and console.log() register fine, and the link will continue on through as expected. It's only the new content getting added to the DOM that doesn't become visible.
I can't figure out exactly what could be causing this and would greatly appreciate any help. I tried recreating the problem in JSFiddle, but I couldn't replicate the same result I'm getting in the WordPress Admin Panel (if you change out $('a[href="customize.php"]') for any other slug in the backend like "themes.php", it has the same result though).

Categories