JavaScript in IE11 populating an input field from an iFrame - javascript

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.

Related

IE11 shows newly added element only after some random click

I have a realy confusing problem with IE 11.
I use AngularJS to fill an element and display the element afterwards.
It works perfectly in FireFox and Google Chrome. In IE11 it wouldn't show until I click somewhere. It doesn't matter where I click. It could be somewhere on the page itself or my windows taskbar or on my second monitor.
I don't get any javascript errors on the console. After the random click IE shows at first only blank HTML. The styling is applied a moment later.
EDIT:
My Porblem is super strange. I've never seen something like this bug. My Code is running perfectly. All elements are thier with right values at the right place. All CSS rules should be applied. The pagination shows only after a completly random click somewhere but this only happens in IE11. Every other browser works like a charm.
Have any body saw this before?
I've asked two ather web devellopers in my company and we did code reviews but can't find any bugs in the code.
We think it's an IE11 bug. But there seems to be no one that can confirm this.
Try using $scope.apply and surround your scope change statements with $scope.apply.
$scope.$on("showPaging", function(){
$scope.apply(function() {
$scope.showPaging = true;
}
});
The use of $scope.apply is not encouraged though.

I can't click buttons in Firefox when I edit the <body> of a page

When I use Firefox developer tools to edit the body of a webpage, the page buttons either disappear or stop functioning like in the example below. This does not happen in Chrome and all the buttons work fine as they suppose to.
here are the steps that lead to the problem:
I go to the webpage that I need to work with, then I need to edit a few things in the page so I press Ctrl+Shift+C to open the dev tools, right click on <body> then Edit As HTML and change what I need to change and apply it and it works just fine with Chrome but in Firefox and other browsers the buttons stops working or disappear.
Here's the link to the example page. (This is only an example not the real page I'm working with, because the real one is in Arabic and requires more steps.)
This is because the Firefox DevTools obviously do the same as when you copy the outer HTML and then execute this
document.body.outerHTML = `*copied HTML*`;
inside the DevTools' console.
That's why all the event handlers as well as iframe contents are gone after you finish editing the HTML, e.g. in this case you can't edit the code at the left side and there is no output shown at the right anymore.
The Chrome DevTools seem to do something smarter here and recognize what has changed and only update those parts when you save the HTML. Therefore the output on the example page is still visible afterwards and the code can still be edited.
I've filed an enhancement request for that, so the behavior in this case can get improved.

Dropdown Menu doesn't update textfield values in Chrome, but works fine in Firefox and IE

I am making a simple calculator web application using HTML and Javascript. I will style it once I get it to work.
Here is the link to the source code in Javascript:
Calculator, unnecessary parts blanked out
My problem:
The calculator has certain percentage values depending on the calendar year, hence changing the year should change the values in the input text fields.
This works fine in Firefox and IE (once you enable blocked content) but refuses to work in Chrome. I've released that Chrome has tighter security policies, so I added a document event handler but this still does not work while using Chrome. I've attached the relevant code please help this is driving me mad.
The event listens to click not change, try this.
document.getElementById('year').addEventListener('change', handleOnclick);

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!

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.

Categories

Resources