Develop Reference

JavaScript in IE11 populating an input field from an iFrame

I have a calendar which is currently displaying in an iframe of a form created in a third party software to select the date. In chrome, Firefox and edge the behaviour of clicking the link in the date auto-fills the input field for 'date selected' on the parent page.
However in IE11, this doesn't happen. There's also nothing appearing as an error in the console on IE11 when I check that. The code for the link is as follows;
<a name="01/08/2018" id="date" onclick="myFuncclick(this.name);" href="javascript:myFuncclick(this.name)" target="_self">1</a>
with the following code to catch it at the bottom of the calendar page;
function myFuncclick(name){
parent.myFuncread('#Field38',name);
}
and on the parent page the following script;
function myFuncread(field, value){
$(field).val(value).change();
}
Already I'd seen that there have been posts about JS onclick not playing nice with IE11, and had attemtped to remedy this by using the href="javascript:myFuncclick()" addition but IE11 still seems to be blissfully ignorant of the whole thing.
Has anyone had similar issues with IE11 & managed to work around it?
EDIT -
So in IE11 I can (by changing the function to have an alert line as well) get IE11 alerting the variable that Chrome and Edge are happy passing. For me this means that the parent window JavaScript might be where the error lies, maybe something in the way IE11 handles cross-window scripts.

Chrome browser not working as expected (onclick/onsubmit error?)

Here is one strange thing. Thanks for ideas.
My Chrome browser does not interact with some web pages as expected. When opening the pages on a different device (such as Browserstack or colleages' computers), everything works fine. There must be a problem with my device, it is obviously not linked to the browser version itself.
Example 1: click on element does not show reaction
When clicking on the small gray dots below the main image here, Chrome usually performs a caroussel switch. On my device, it does not. Clicks are constantly being ignored, although the automatic caroussel switch works just as on any other device.
Screenshot: i.stack.imgur.com/KR64m.png
Example 2: click on button does not show reaction
When clicking the button "Weiter" on this page in the lower right section of the page, my Chrome does not show any reaction. Works as expected on any other device.
Screenshot: i.stack.imgur.com/g8dHN.png
My Chrome Version: 33.0.1750.146 m (plugins disabled, surfing in anonymous mode)
OS: Win 7 Pro SP1 64 Bit
Thanks for help!
UPDATE:
I found out that my Chrome shows different results to a VisualEvent-check than Browserstack.
Have a look here:
My chrome (buggy): i.stack.imgur.com/Earrs.png
Browserstack (working): i.stack.imgur.com/zRRgA.png
What can I learn from that? There are two more event handlers
There are no VisualEvent differences for the second example, however.
UPDATE 2: On a MS Virtual Machine, everything works as expected:
My comment below

Hm do you deactivted your Javascript by accident?
https://support.google.com/adsense/answer/12654?hl=de
Have u tried a different browser on the same device?

I had this problem too, but it was solved by itself the next day. Maybe you just need to do a reboot?

Concerning my device, the issue is related to the fact that my device has a touch screen which Chromium does not know how to handle in the standard configuration. Considered a bug.
nzolghadr#chromium.org
The problem is with "'ontouchstart' in window" expression which the jquery.flexslider library uses. Right now on Windows Chrome returns that as true when you have chrome://flags/#touch-events enabled/automatic. Related issues are: crbug.com/467934, crbug.com/555746, and crbug.com/392584 which based on those it seems that Windows thinks something is touch enabled and Chrome just reflects that.
https://bugs.chromium.org/p/chromium/issues/detail?id=373991#c13

HTML jquery onclick event not working on dynamically-created links on Android phones only

I am having an issue where dynamically-created links are working on all devices I have tested (in all desktop browsers, on my iPhone, on my iPad, and on my Samsung Galaxy Tablets Chrome Browser), but will not work when clicked on Android phones (I've tested on three Android phones running Chrome, sorry don't have the Chrome versions, but one phone is really new and the others are 1-2 years old at most).
I am dynamically-creating the links to add items to a cart (inside of a larger dynamically-created entity) in a loop.
The link in question is constructed basically like this:
var itemHTML = "";
...
itemHtml += '...<span>\n'
...
Where gAddLink is just a standard URL. I am then inserting that itemHTML (in addition to other HTML) onto the page dynamically using document.write().
Since this is being dynamically created on page load (for reasons out of scope for this question, but it is a necessity), I know I have to have a click handler set up as so:
$('.elementToInsertTo').on('click', '.add2CartLink', function() { ... });
Where '.elementToInsertTo' is the parent element that is NOT dynamically created, and is present on the page at page load. There are multiple of these parents, hence why I can't use an element ID. Don't think it makes a difference though.
Again, I can confirm that the function call in this click listener works everywhere except Android phones (as far as I can tell). Any idea why this may be? I've read StackOverflow pages all day, but nothing seems related to this. I've read a bunch about JS closures (which may still be the issue) and the like, but none of that seems to be relevant since the link click listener is working on most all devices I have tested on (even the Android tablet's Chrome browser, which is the part that really is confusing to me).
If you happen to have seen this issue before or have any idea why this may be happening, please write it out before reading the next part, so as not to confuse or bias you.
Ok, now to the part that is even more mind-boggling, though I hope this only helps figure this out and doesn't confuse the situation.. I connected one of the phones to my computer with a USB and did some remote debugging using Chrome developer tools as described here (https://developers.google.com/chrome-developer-tools/docs/remote-debugging). I could confirm there that the click listeners were not working (they weren't being triggered)... (and now here comes the crazy part) UNTIL I did some element inspection on the link (i.e. the link was highlighted on my phone as I was inspecting the DOM-element in my browser, again using Chrome dev tools) and then clicked the link. This made it so that the click listener worked! What?? To debug further, if I inspected any of the DOM elements on the page and clicked the link, the click listener worked. If I changed tabs away from the dev tools tab, or simply stopped inspecting the DOM elements in Chrome Dev tools, the link click listener no longer worked. I really don't know what to make of this, but I'm hoping this part of information narrows down what may be going on with the Android phones and the click listeners.
Happy to try to provide any other info I can, though I am without the Android phone for testing at the moment.
Thanks!

Tap was still needed (thanks for both suggestions), but the issue was with a 3rd party JS library stopPropogation() call. Apparently this only happened on Android phones, but regardless, after removing the line, the click (on computers) and tap (on mobile) now works everywhere. Thanks!

Safari 5.1 broke HTML native drag and drop?

Last night, I thought I'd do a quick project to demonstrate HTML5 capabilities and to try some things out. However, I can't seem to figure out how to get drag and drop to work in Safari, while it works perfectly in Chrome and Firefox. More precisely, it seems that drop event does not fire in Safari, when you try to drag an image inside the website into the drop area. At the same time it does fire when you drag and drop a file from desktop.
I'm not really sure, but I'm pretty certain that when I tried the same script at work (where I have Safari 5.0.2 etc), it fired the drop event (going to check it tomorrow to be sure) and gave me the FileReader-related errors that were expected. But when I just installed Safari 5.1 on my own PC, I only get dragover, enter and leave events (and drop too if the file was dragged into the browser).
I've been Googling for some time now and don't seem to find a single example of drag and drop that actually works in Safari 5.1. Even Safari's dev-centre's sample doesn't work, let alone html5demo.com 1 and html5demo.com 2. This leads me to think whether the Safari has a bug, or maybe they have implemented something mandatory that isn't reflected in the dev-centre (last updated in 2009).
The script I'm trying to fix is at my site (sorry guys, no problem specific code to post, as it seems to be broken elsewhere too).
PS! I might have introduced some bugs into my own site while desperately trying to fix the drag and drop in Safari, but I'm too tired to fix them right now.
UPDATE: Just confirmed at work that the drop event does fire in Safari 5.0.2 on Mac OS X.
UPDATE 2: Also confirmed that everything works perfectly fine with Safari 5.0.6 on Win 7, the same computer that fails with 5.1

Testing with Safari 5.1.7 Mac:
To see the drop event fire, you have to handle the dragover event and call event.preventDefault().
Here's the (quite entertaining) discussion where I found the answer:
http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html
I don't know if this really solves the question because the asker's site (at least as of today) does this. It works fine on my machine (as do the HTML5 demo pages). But this may help someone coming to this thread with this problem who doesn't know about this rather unintuitive implementation detail.

I am using Safari 5.1.5 (7534.55.3) on a Windows 7 PC which I just installed the other day, no previous installs of Safari and I cannot get any of the online HTML5 drag-n-drop demos to work.
I am working on a project with drag-n-drop and Modernizr tells me that I'm good to go with Safari (Modernizr.draganddrop == true), but when I actually drop the item the drop event does not fire.
I've added alert debugging and nothing.
My testing shows that Safari 5.1.5 (7534.55.3) on a Windows 7 PC drop event is broken. All other drag events seem to work: dragstart, dragend, dragenter, dragleave, dragover.

Just to clarify: Visited your site and found no errors. Opened the console, no error, and everything appeared to function as designed. Tried all provided examples with no error.
All examples work fine Safari Version 5.1 (7534.48.3). Sorry, mate – Maybe it's a setting you've changed?
Allow me to suggest a possibility:
Go to Safari->Empty Cache... Then Safari->Reset Safari... Try reloading the page.
Likely, there's something cached that's creating a conflict. There seems to be nothing wrong with your script in the slightest.
Edit
Some things to check...
Are any of your function names containing reserved words? I've done this, had it not throw any errors, but it simply wouldn't work.
I've had some weird issues with Safari not running methods written as funcName = function(){}. If you can pin down the method that isn't firing (I add a little function when I'm developing called DBG which I'll add below – basically, if a debug flag is set, you log to the console), you can try rewriting the function.
// Some sort of boolean flag.
var debug = true;
// This is kind of an obvious function, but can be expanded as you like.
// Little tricks to make life easier.
function DBG(str) {
debug ? console.log(str) : return;
}
I still think ultimately this boils down to something caching wrong, but it's worth a try.

I encountered similar issues, the drop event appeared to not be firing. Safari apparently expects the "dragover" event to also be bound. As soon as I also added that, it worked. So ... I'm sharing in case it's relevant.
My first attempt:
$(document).bind
drop: (e) ->
// This never gets fired in safari (does work in chrome)
console.log e.originalEvent.dataTransfer.files
false
My "fix":
$(document).bind
dragover: (e) ->
console.log e
false
drop: (e) ->
// This does get fired (in chrome and safari)
console.log e.originalEvent.dataTransfer.files
false

Javascript disappearing on refresh IE

I'm having some issues with Javascript content on Internet Explorer, specifically, a page will appear to be empty on refresh but if you open the page from a link it will display correctly.
Site: ABuenPaso.cr
User: sof
Pass: stackoverflow
To go to the page with issues click on 'Registro' on the top menu.
The calendar uses the Fullcalendar plugin
The reviews are Ajax calls to a php file
General page usage instructions*
When the page first loads you'll be able to see a calendar with events and a weekly/monthly activity review. If you reload the page in IE, however, neither will show. Click on the 'Registro' button on the top menu again and they should display properly.
Also, in IE the form won't autocomplete in its entirety when clicking an event; the extra text areas that display when selecting 'Otros' in the 'Entrenamiento' and 'Tipo' drop-down menus won't show either.
Chrome and FF 3.6 are both working without a hitch (I've gotten some error reports from people using FF 3.5 but it worked fine for me). I've tried using the debugger that comes with IE8 but the only error reported is caused by an undefined variable used by a poll plugin that is used elsewhere.
The fact that the calendar/reviews work fine in Chrome/FF and will load on first entry at IE makes me think its not strictly a JS code problem. Other than that I have no clue what could be the problem and I've been stumped for a couple of days now.
Any help would be appreciated.
Thanks,
Tom
General page usage instructions:
You can reach the page with problems by clicking on 'Registro' on the top menu bar and logging in with the information provided above.
The 'Aceptar' button will create a new event on the selected day, the only required values are 'Entrenamiento' and 'Tipo'.
The 'Borrar actividad' button will delete a selected event, it requires the 'Entrenamiento' to match the events value (this will set itself on Chrome/FF).

Turns out IE wasn't executing the onload that loaded/executed the scripts. Moving this to a $(document).ready solved the problem.