No onclick for button, div, img with IE 9 - javascript

Does anyone know of a workaround for the bug in IE9 where a function in the onclick for these page elements: button, div, img, isn't called? So you click on the element and nothing happens. This came up on a page that I am developing. If I launch the F12 debugger, the problem goes away. But I cannot ask site visitors to click F12 to browse the page! What are the solutions to this? I thought that this might only happen when the element is created dynamically in javascript. But this also happens if the element is defined in the HTML.

You mentioned that the code works if the user has the developer tools open, which means your problem is most likely that you are using console.log statements in your code.
in IE, printing to the console when the developer tools are not open will cause a javascript exception, which would cause your event handlers to stop working.
to get around this problem, wrap all of your console statements with an if statement:
if (console) {
console.log('foo');
}

Use jQuery, e.g.
$('#myButton').click(function() {
// code goes here
});
This will work out the correct code to fire the click event.

Related

Javascript alert locks up page on IOS Chrome after using a file input

Is this a problem with Chrome or something that I'm doing wrong? I noticed that if I use a file input element to get the file browser/camera prompt to show, then follow it up with something that would cause an alert message, it locks up the entire page forcing me to kill the app to make things work again. Here's a simple jsfiddle that shows the problem:
https://jsfiddle.net/etc4bxpq/
HTML:
<input type="file">
<button id="btn">Click me</button>
JS:
document.querySelector('#btn').addEventListener('click', event => {
alert(1);
});
Tap on the file input, then tap on the Click Me button. The alert won't fire and the page will lock up. It seems to only happen with Chrome on IOS. Safari seems to work just fine.
Having same error with same conditions. I tried wrapping my alerts and prompts with setTimeout function as suggested by some but it did not work for me, tried putting input in another page and calling it inside iframe, also did not works for me. The only solution works for me is using alert modals instead native javascript alert and prompt function. Also if you open chrome settings menu and close it, script continues it's execution which is very strange.

How to trigger <a>'s click event on safari

http://nycweb.io/test.html
Its html is
click
In chrome's console, if you do
document.getElementsByTagName('a')[0].click()
It will open a new page of google.com. Surprisingly, in Safari, this doesn't work. I searched around and found this page saying there is a bug with Mobile Safari which prevents the click event from being triggered. Also it lists some workarounds. I was hoping it would help when I started reading it, but it actually makes me more confused.
First of all, it says the bug only happens with Mobile Safari, but anyone with a Macbook can test from the link above that it doesn't work with Safari either; second of all, it says it only happens with "elements that aren't typically interative", and the workaround includes adding "href" to <a> to make it interative. But my test above shows that it doesn't work with <a> at all, no matter it has href or not.
The actual problem I am trying to solve is this page "http://fbnydob.applinzi.com/test.php", where you can see a warning message pushed by the Hosting company, which can only be prevented by click the little 'x'. I was trying to click it programmatically but it is an <a> even without href, so my program fails to work on Apple devices and my users keep seeing this unpleasant message.
Any workaround for this that actually works?
Could you try firing the click event?
document.getElementsByTagName('a')[0].fire('click')
This will call the click handler and close the popup window.

What could cause a Safari extension (toolbar button) to not trigger when Safari sends the "command" event?

I am working on a toolbar button for Safari 6 and I even have the button in my toolbar. I have a Global.html with all the code. It has an event listener like so:
safari.application.addEventListener("command", functionName, false);
The function contains this:
function functionName(event) {
console.log(event.command);
<!-- more code here -->
}
But that console.log is never triggered. Nothing happens at all when I press the button. I have looked at code for other extensions and I cannot find any issues with mine. When I inspect my Global.html, I get a ReferenceError saying that the variable 'safari' can't be found (in the first code snippet).
Am I missing something that is needed to make a button like this work? This is my first JS/extension project and I am unsure of how to debug.
Just to update: Don't open Global.html as a webpage. Use the Inspect Global Page button in Extension Builder.

debugging into a javascript anonymous function

I am trying to reverse engineer a Microsoft CRM 2011 web page. The page loads a massive number of scripts and HTML. My current development focus is on the click event of a checkbox element on the page. Clicking the element causes behavior on the page to change, and I want to walk through the code that handles this.
The problem is the checkbox's click handler is attached during page load via an anonymous method. So the code is there, but trying to find it is asking one to locate a needle in a haystack.
Is there a technique using the Internet Explorer debugging tools to somehow make the debugger stop when the checkbox is clicked? There may not be, but I thought I would ask.
Your best bet is to run this in the console:
document.getElementById('theCheckBoxId').onclick
If null appears in the console, you can continue reading. Otherwise the onclick handler and it's code should appear right there in the console.
Use Chrome's dev tools: Right click something on the page -> inspect element. You'll see this:
Go to "SOURCES" (no longer called "Scripts") and there is a '||' Pause button as you see in the screenshot. If the page doesn't fail, you can check the checkbox, and since scripts are paused, you'll see the code for the anonymous function become highlighted and the page will be frozen. You can then use the tools to step through the code.
However, we can certainly better help you with what you actually want from the page...
You can also use attach a onbeforescriptexecute from the console: https://developer.mozilla.org/en/DOM/element.onbeforescriptexecute
You would be something like this in the console:
document.getElementById('theCheckBoxId').onbeforescriptexecute = function (e) {
alert('hey same thing as pausing the script!');
console.error('script with this id about to run: ' + e.target.id);
//Could also try .src .innerText etc.
//Reference this: https://developer.mozilla.org/en/DOM/element.onbeforescriptexecute
//the full argument to checkout in the console:
console.error(e);
};
You can also play around with the currentScript method: https://developer.mozilla.org/en/DOM/document.currentScript
You can also right click and inspect the check box, and then on the right panel of dev tools, look at the 'Click' event listener code, but often this is garbled and hard to work with.
It sounds like you have no way of modifying the anonymous function that is tied to the checkbox click event. If not, perhaps you can create a second event handler, but define it before the definition of the existing event handler.
Event handlers in the browser typically fire in the order they were defined. See http://jsfiddle.net/aroder/kkYfX/2/. If you defined your own event handler, it will give you a place to attach the debugger at least somewhere close to the anonymous function you are trying to step through.
Also, use the debugger statement to automatically break your code. If you are using IE, ensure the options under Tools > Options > Advanced > Disable Script Debugging (Internet Explorer) is UNchecked.
<script>
// the debugger statement will automatically break in IE dev tools, Firebug, and Chrome dev tools
debugger;
</script>
Older version of IE is pretty lame specially when it comes to debugging AJAX applications. Firebug is the best that I have seen. It lets you replace an existing javascript function with your own. This is what I suggest.
Open the web application in Firefox
Copy sourcecode of existing function
Format it and add the following statement to the function at the place where you want it to stop and inspect the variables.
debugger;
Paste the new code in Firebug's console window and click on Run .. that's it!

I can't figure out why a link seems to be returning false when clicked - will Console help?

I have a pop-up window in a web app that allows you to edit details of a job. You can also click a link to cancel/delete that job. But when I click that link right now after making some edits to it, nothing happens.
It behaves as if javascript was targeting it with "return: false;" so it does nothing. The URL is correct. How can I check if there is JS intercepting my click event, and where it's doing that? Can Console do that? I'm not sure how if so.
Thanks!
In firebug you can debug your javascript code with:
console.log('text and '+variables);
You can click the console tab in firebug and see values. you can add a console.log line within your click handler to see if it's even getting inside the handler.
chrome's developer tools will list all handlers registered for an event on an element. i don't know of any other tools that provide this info.
Firebug is an invaluable tool for helping you debug javascript / coding javascript applications. I would suggest installing it to see what your error is etc.
Alternatively, Firefox has an Error Console, which you can view Javascript errors as well.

Categories