I have a form which submits via ajax to the back-end and I'm writing a general disable function in javascript that I can use to set the onclick of an element. Typing this into the browser so ignore any syntax errors in the following.
function(elementID , processingText) {
var element = document.getElementById(elementID);
if (element) {
element.setAttribute("onClick", "alert('test')");
}
}
So basically the element should have an onclick event to set an alert. I can confirm that the onclick attribute is being set correctly and it fires in IE8+, Chrome and Firefox. It will not fire in IE7.
The element I'm testing on is a submit button in a form (one form on the page). It has many fields and one submit button.
EDIT The code dispatches with an action so it should submit anyway but not until after the alert has been acknowledged /EDIT
I've trawled the net for the past two hours and the following solutions do not work or are not an option-
Add a hidden input field to form.
Wrap submit button in tag and set the onclick in this tag.
Changing case of onclick to onClick
Any solutions which involve altering the html without using javascript are not an option, I'm trying to create a general disableElement function. I can target the script at IE7 so it does not have to work in all browsers, just IE7.
Any help would be greatly appreciated
IE7 has a lot of compatibility issues, of which this is just one. If you're writing javascript that needs to be compatible with IE7, you will end up writing a lot of redundant code that does the same thing in two different ways to cater for different browsers you're supporting.
Issues like this in old browsers are precicely the reason why libraries like jQuery exist. jQuery does a lot of things, but one thing it does very well is iron out many of these nasty little quirks that crop up when writing cross-browser javascript.
The cross-browser issues have become less important in recent years, as modern browsers (including IE) have much better standards support, but if you're supporting old browsers , and old IE versions in particular, my recommendation is to use jQuery (or a similar library), because they have already solved this problem, and plenty of others that will catch you out.
If you do use jQuery, your code will become:
$(element).click(function() {alert('test');});
Before anyone points it out, yes I know the OP didn't specify jQuery in the question, and may not want a jQuery answer, but in this case I would say it is the best answer available, because if you don't use it, you will end up having to write much of the same compatibility code yourself that is already in jQuery.
IE 7 does support setAttribute method but it seems that it is not possible to change an onclick attribute with it. For more info about this issue check this: Why does an onclick property set with setAttribute fail to work in IE?
Cheers
Related
Internet Explorer Last version show a very ugly alert about addEventListener, I was reading some fixes here but in my case I believe the solution is to delete the part of the javascript code giving me problems BUT I am a zero to the left with Javascript.
Here is the code and I am sure this code has 2 or more funtions. The first one is for my drop down menu using also JQuery. But it seems like the last part where addEventListener is maybe is not necessary to make my drop down menu works. I got this drop down menu from a website I buyed pre-made with lots of funtions
LMenu=$(".menu>ul>li");LMenu.find("ul").siblings().addClass("hasUl").append('<span class="hasDrop iconoflecha icono-flecha"></span>');LMenuLink=LMenu.find("a").not(".submenu a");LMenuLinkAll=LMenu.find("a");LMenuSubLink=LMenu.find(".submenu a").not(".submenu li");LMenuCurrent=LMenu.find("a.current");if(LMenuLink.hasClass("hasUl")){$(this).closest("li").addClass("hasSub")}LMenuLink.click(function(a){$this=$(this);if($this.hasClass("hasUl")){a.preventDefault();if($this.hasClass("drop")){$(this).siblings("ul.submenu").slideUp(250).siblings().toggleClass("drop")}else{$(this).siblings("ul.submenu").slideDown(250).siblings().toggleClass("drop")}}});LMenuSubLink.click(function(a){$this=$(this);if($this.hasClass("hasUl")){a.preventDefault();if($this.hasClass("drop")){$(this).siblings("ul.submenu").slideUp(250).siblings().toggleClass("drop")}else{$(this).siblings("ul.submenu").slideDown(250).siblings().toggleClass("drop")}}});if(!("boxShadow" in document.body.style)){document.body.setAttribute("class","noBoxShadow")}document.body.addEventListener("click",function(b){var a=b.target;if(a.tagName==="INPUT"&&a.getAttribute("class").indexOf("liga")===-1){a.select()}});(function(){var e=document.getElementById("fontSize"),d=document.getElementById("testDrive"),c=document.getElementById("testText");function b(){d.innerHTML=c.value||String.fromCharCode(160);if(window.icomoonLiga){window.icomoonLiga(d)}}function a(){d.style.fontSize=e.value+"px"}e.addEventListener("change",a,false);c.addEventListener("input",b,false);c.addEventListener("change",b,false);a()}());
I have a Fiddle with the javascript code it will be easier to read the code.
https://jsfiddle.net/epo5es5n/1/
EDIT: I really don't know where javascript code starts and ends. I just need it to make the Lmenu works its a dropdown UL LI menu only
IE browsers up to IE8 do not support addEventListener (I'm assuming you meant the latest version you have when you said Internet Explorer Last version). attachEvent is the IE equivalent (well, not exactly equivalent).
If your target browser is only IE8, you can just replace the addEventListeners with attachEvent calls, but a better option (seeing that you already seem to have jQuery) have be to change these to jQuery .bind (or .on if you have a later version of jQuery)
Check out this fiddle (partial code snippet below): http://jsfiddle.net/QJJb8/
<button id='mybutton'>MY BUTTON</button>
mybutton.addEventListener('click', mybuttonClick, false);
function mybuttonClick(e){
alert(e.target.textContent+' WAS CLICKED!');
}
Note how I'm not using getElementById() to get a reference to the button. Why does it still work? (Tested in Firefox, Chrome and IE9 & 10.)
Is it bad-practice/quirk, or is it built in functionality for button elements? If the latter, that's an awesome perk/shortcut when using button elements! Or perhaps I've just been over-using getElementById() all this time?
//ANSWER UPDATE//////////////////////////////////////////////////////////////////////
After some research it seems the behavior discussed above is in fact part of the HTML5 spec. In addition to RobG's answer below, see also the following links for more insight:
http://tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/
https://stackoverflow.com/a/3434388/2434324 (link supplied by yoelp)
http://jsperf.com/named-access-on-the-window-object
Because way back at the begining of browser scripting, IE decided to make element names and IDs global variables that referenced the element. Everyone else thought that was a bad idea (it was) and didn't do it.
However, IE grabbed about 95% of the browser market and developers developed for IE's quirks, so other browsers implemented the same behaviour but didn't advertise it (same with support for document.all). So now all browsers do it, but (almost) no one uses it.
Except when someone stumbles across it…
So where you have:
<button id='mybutton' ...>
browsers create a global mybutton variable that references the element.
This works on all DOM elements, not only buttons, Its probably a bad practice since any one may change mybutton to something else (ie.mybutton = "BLABLA") then your code breaks
also see this
I've seen several threads about reading contents, but nothing on writing to noscript.
$('body').append('<noscript><div></div></noscript>');
In Chrome and IE9 I get a noscript-element with a empty div inside like I expect, but in IE7 and IE8 I just get a empty noscript-element without the div inside.
Example: http://jsfiddle.net/cEMNS/
Is there a way to add HTML inside the noscript-tag that works in all browsers? What I need is to add some tracking code into a noscript-element at the end of the page, but the info I need isn't available until after document ready.
Edit: I'm getting a lot of comments on "why". It's some poorly done tracking library that requires this. We don't have access to the code to change it. Regardless, I find it interesting that it works in some browsers and not in others since jQuery was supposed to work equally in all browsers. Is it simply a bug?
Edit2: (2 years later) Adding a noscript on the browser doesn't make sense, I know. My only excuse not the question the task I had was because of lack of sleep, like everyone else in the project. But my rationale was that jQuery should behave the same on all browsers and someone might want to do this on the server.
Regardless of the tracking code, what you are doing (or are required to do) makes no sense!
Why? There are two cases possible here:
user has JavaScript enabled in which case the NOSCRIPT get's inserted into the DOM but is ignored by the browser (does nothing)
user does not have JavaScript enabled, NOSCRIPT does not get inserted and does not "execute"
The end result of both cases is that nothing actually happens.
Just an idea: You could try giving your noscript tag an ID, and then try to use native js.
for example:
$('body').append('<noscript id="myTestNoScript"></noscript>');
document.getElementById('myTestNoScript').innerHTML = '<div></div>';
I would claim that if it does not work with native js, it will not work with any library (feel free to correct me on this one).
I tried following simple HTML code:
<html>
<body>
<noscript>I'm a noscript tag.</noscript>
</body>
</html>
Then I did analyse this with IE8 (in IE7 mode) and his integrated code insprector. Apparently the IE7 checks are script allowed. If so he declared it as empty. And empty tags will be ignored. Unfortunatly I could not try that with disabled script option, because only the Systemadministrator can change the settings (here at my work).
What I can assure you, the noscript does exists. If you add
alert($('noscript').size());
after the creation, the result will be 1.
I'm trying to make a checkbox check when I click not only the checkbox, but also the container it's in. The problem I faced is that when I checked a checkbox, it fired it twice because it was also clicking the container. I've come up with the following solution that seems to work fine, but I have a feeling there's a simpler way to do this and I'm looking to learn to really why short and compact javascript, so any advice would be helpful :)
http://jsfiddle.net/masedesign/8q5TQ/
$(function(){
$('td.cell input').click(function(e){
e.stopPropagation();
});
$('td.cell').click(function(){
$(this).find('input').click();
});
});
The e.stopPropagation() method prevents the event from bubbling.
just for fun I tried to achieve the same effect without javascript: if you're interested in a pure CSS solution working only on newer browser (it relies on :checked pseudoclasses) look at this fiddle: http://jsfiddle.net/g6Sx7/2/ (but if you're interested I can improve it with a js fallback for old IE)
Edit: a fiddle with js fallback: http://jsfiddle.net/g6Sx7/7/ this code should work fine also on IE6 but here the problem is about CSS support (the adjacent sibling operator + is not supported on IE6) : the whole effect won't work there, but anyway you cannot have a box shadow in that browser... so I think it's not a great problem.
If you are not performing any other task when the checkbox is checked i.e. the js that you have written is just for the sake of making the box clickable then i would suggest to take a CSS approach rather then JS.
here's a working example http://jsfiddle.net/8q5TQ/6/
Note: this works in IE7/8/9 FF (latest installed in my machine) and Chrome (latest installed in my machine)
Update: (after reading ur comment) i don't have IE 6 (sorry) but tried in quirk's mode and is working fine. Hope this helps :)
I am dynamically generating checkboxes for a popup window (displayed using AJAX) using javascript and on a button click I also need to call a function that checks all the check boxes before the popup is rendered.
All pages in use are JSPs and the popup is also included using the tag so it is generated already when the parent page gets loaded.
The problem is that I'm able to check all the custom generated checkboxes using the same function in IE7 and IE8. But it does not work for IE6.
I'm using something like:
var i;
for(i=0; i<size; i++){
document.getElementById('chk'+i).checked = true;
}
That code ought to work fine, even in IE6 (which, lets be honest, is a really awful browser).
However, if you have inserted those checkboxes into the page dynamically, IE6 has a known issue with dynamically added checkboxes, where it doesn't respect the .checked property.
See this page for a few possible solutions: http://bytes.com/topic/javascript/insights/799167-browser-quirk-dynamically-appended-checked-checkbox-does-not-appear-checked-ie
Hope that helps. :-)
(But my solution is: Don't support IE6. Honestly, it's usage is down to a few percent now and getting lower, so unless it's more well used by your particular demographic, just cut your losses and drop it; the remaining users will upgrade soon enough. ;-))
Without wanting to sound like a 'use jQuery' pat answer, if you were to do this with a library like jQuery, any IE6 inconsistencies would probably be nicely abstracted away.