I'm creating a button input on the fly with "document.createElement('input')". The button generates fine in all browsers, but the function does not fire in IE 8 (or IE 7) as it does in all other browsers. I tested the code of the function being called in IE 7 & 8 and it works. Does anyone know a way around this browser issue?
Thanks for your help.
<script type="text/javascript">
function killWindow(){
window.open('', '_self', '');
window.close();
}
document.observe("dom:loaded",function(){
var forceCloseButton = document.createElement("input");
forceCloseButton.setAttribute("id","forceClose");
forceCloseButton.setAttribute("type","image");
forceCloseButton.setAttribute("src","SurveyResource/Button-Close");
forceCloseButton.setAttribute("class","button");
forceCloseButton.setAttribute("onclick","killWindow()");
var a=$('datstat_bottomcenterbuttons');
a.appendChild(forceCloseButton);
})
</script>
You should never never set an event handler with setAttribute.
You need to use addEventListener/attachEvent or set onclick directly.
Also setting class is going to have issues, look at className.
Related
On a button click event in jQuery I have code that shows a div(and it's contents) which were previously set to 'display:none;". It works fine on all other browsers but not Safari on the iPad.
My code:
$(document).ready(function(){
<cfoutput>var cnt = #cnt#;</cfoutput>
$('##add_#dialog_label#_b').click(function() {
if (cnt < 10) {
cnt++
document.getElementById("#dialog_label#_dv_" + cnt).style.display = "";
}
});
});
I've also tried all the following 'show' functions:
$("###dialog_label#_dv_"+cnt).fadeIn();
$("###dialog_label#_dv_" + cnt).css('display','inline');
$("###dialog_label#_dv_" + cnt).show();
Everyone one of which work fine on all other browsers. Also the dozens of hash tags are Coldfusion evaluations. Another possibly important note is this is all taking place within a modal window.
Credit goes to #Wolff here:
document.getElementById("#dialog_label#_dv_" + cnt).style.display = "block";
This worked just fine on Safari. The apparent reasoning being that when I chose not to set display to any value (other than an empty string) it ignored the command. I don't understand whythe newest version of Safari on the newest version of iOS was refusing to do these things using jQuery, but I'm happy with this solution!
UPDATE: Still not working on the clients iPad. I'm at a loss.
I am having some problems with addEventListener in Firefox.
I have an iframe on my site for a WYSIWYG area I built myself.
I want the iframe to look more like a normal textarea so I want a border around the iframe on focus. First tp (textpreview) is found like this (and works well):
var tp = document.getElementById('iframe-textpreview');
var iframe = tp;
if(tp.contentDocument){ // normal
tp = tp.contentDocument;
}
else if(tp.contentWindow){ // old IE
tp = tp.contentWindow.document;
}
//Open and close for Firefox
tp.open();
tp.close();
tp.designMode = 'on';
Then I try to attach an eventlistener and log when the event fires. This works in Chrome, Opera and the most recent IE but not in Firefox:
//Doesn't work in Firefox
tp.body.addEventListener('focus', function(){ console.log('focus...')});
tp.body.addEventListener('blur', function(){ console.log('blur...')});
This does work however:
//Firefox
tp.body.onfocus = function(){ console.log('focus...')};
tp.body.onblur = function(){ console.log('blur...')};
I have cleared the cache on Firefox and tried with another computer, still no luck to get the first option working.
Firefox doesn't fire the event handler on the body element for some reason, instead you have to attach the event handler to the iframe itself or an actual element inside the iframe.
Focusing on the iframe itself, and not the body, seems to work in all browsers
tp.addEventListener('focus', function(){ console.log('focus...')});
tp.addEventListener('blur', function(){ console.log('blur...')});
I've been experiencing an odd problem with IE10 when redirecting the page on an 'oninput' event (with no equivalent issue when using Chrome). I've produced the most pared-down version of the code that still exhibits the problem, as follows:
<html>
<head>
<script type="text/javascript">
function onChangeInputText()
{
window.location.href = "oninput_problem.html"; // Back to this page.
}
</script>
</head>
<body>
<input type="text"
oninput="onChangeInputText()"
value="£"
/>
</body>
</html>
On my Windows 7 PC using IE10, this code when browsed to (either by double clicking or via Apache) repeatedly redirects as if the act of initialising the value of the input text box itself is generating an immediate 'oninput' event. However, when I change the initial input text box value from the '£' symbol to a letter 'A', the repeated redirection doesn't occur.
I first noticed this problem as part of a project I'm working on. In that case, the user's input should cause a delayed page refresh, which began repeatedly redirecting when I entered a '£' symbol. As I say, the above code is the most pared-down version I produced in trying to track what was causing the issue.
Does anyone else experience this using IE10? If so, can anyone explain why IE10 is behaving this way?
I've found the following that appears to indicate that this may be a bug in IE10:
social.msdn.microsoft.com: Event oninput triggered on page load
Also, there's a follow-up bug report (within the page linked to above):
connect.microsoft.com: onInput event fires on loading the page when input #value is non-ASCII
EDITED TO ADD: At the bottom of the page pointed to by the second link, there's what would seem to be an unhelpful reply from Microsoft stating that they are unable to reproduce the bug described, so it may be a while before the issue is fixed...
There's anoter bug report which is still open :
http://connect.microsoft.com/IE/feedback/de...
For anyone who might encounter this, you can use this "class" as an alternative to the onInput event.
const getFieldWatcherInstance = (function(watchedElement, onElementValueChange){
let intervalReference = null;
let lastValue = null;
if(!watchedElement instanceof Element) return new Error('watchedElement is not an HTML Element');
if(typeof onElementValueChange !== 'function') return new Error('onElementValueChange is not a function');
return {
toggleFieldWatching : function(){
if(intervalReference){
clearInterval(intervalReference);
intervalReference = null;
}
else{
intervalReference = setInterval(function(){
const currentValue = watchedElement.value;
if(lastValue !== currentValue){
onElementValueChange(currentValue);
lastValue = currentValue;
}
}, 100);
}
}
};
});
Set it up like this:
const myInputChangeWatcher = getFieldWatcherInstance(<**insert real element reference here**>, function(newValue){
console.log('The new value is: ' + newValue);
});
call myInputChangeWatcher.toggleFieldWatching() in the onfocus and onblur events of the input
Friends I need some help to fix IE 7 issues. This is my code.
<div id="thumb-slider-tabs">
<ul class="ibm-tabs">
<li class="active"><a href="#slide1" rel="0" class="no-mobile show-tab"><img
src="/i/slider/featured_icon_1.jpg" alt=""/></a><span class="icon-overlay"></span><span>Announcement</span></li>
this is how I target my href using the following:
dojo.query('#thumb-slider-tabs a').onclick(function(event){
var test = dojo.attr(event.currentTarget, 'rel');
alert(test);
switchTabs(dojo.attr(event.currentTarget, 'rel'), this.parentNode);
sliderClick = true;
});
IE 7 does not recognize the onclick and does not alert also it does not display the rel attribute in test.
Any suggestions please let me know what I can do to fix this issue in IE 7. This works in Chrome, Safari, Firefox, IE 8 & 9. I need to get it to work on IE 7.
I had two elements with ID thumb-slider-tabs, which is xhtml violation. In IE dojo finds the first node only and ignores the second one, hence dojo.query('#thumb-slider-tabs a') targets first 3 links on page, not the others as in firefox, chrome and safari. Bottom line, my 'onclick' handler is never attached to the actual nodes and thus the clicks were not being triggered on the tabs.
var anchors = dojo.query('[id="thumb-slider-tabs"] a').forEach(function(element){
dojo.connect(element, 'onclick', function(ev){
dojo.stopEvent(ev);
switchTabs( dojo.attr(element, 'rel'), element.parentNode);
sliderClick = true;
console.log(sliderClick + " " + "sliderClick value");
});
});
I made this change to my code and the onclick event handler triggers when I click the tabs.
my code
function hide()
{
var lblclear= document.getElementById("<%=Label1.ClientID%>");
if(lblclear!= null) {
lblclear.value="";
lblclear.innerText="";
lblclear.outerText="";
}
}
on button click i am calling this function
the above function works fine in IE it is clearing my label text value
in firefox browser it is not clearing my label text value
can any one help me out
thank you
Your problem is that innerText and outerText is not supported on Firefox.
http://www.java2s.com/Tutorial/JavaScript/0460__DOM-Node/GetouterTextvalueforatagFirefoxdoesnotsupporttheouterText.htm
In order to hide this you can remove it (as that looks like what you are doing) or, preferably, using css, either the element.style properties or set className, but you can set the visibility or display to a value that does what you want.
innerText will only work in IE, for other browser you should use innerHTML
function hide()
{
var lblclear= document.getElementById("<%=Label1.ClientID%>");
if(lblclear!= null) {
lblclear.value="";
if (document.all) { // check if IE
lblclear.innerText="";
lblclear.outerText="";
}
else{ // other browsers
lblclear.innerHTML="";
lblclear.outerHTML=""; // updated. thanks #cdmckay
}
}
}
please check working example
Add a call to Alert in your function to see if your function is even getting called.