Selecting a table row in javascript causes IE8 to fail - javascript

document.getElementById("row").innerHTML = "";
This causes IE to raise "Unknown runtime error".
I know this is a known bug, but is there any workaround (except the obvious using a div instead).
Works fine in all other browsers.

Instead of "nuking" the row like that, just hide it:
document.getElementById("row").style.display = "none";
Same final result (row will disappear from view) without messing too much with the DOM.
Edit: another way to "clear" the element is:
var row = document.getElementById("row");
while (row.childNodes.length > 0)
row.removeChildNode(row.childNodes[0]);
Should be as cross browser as possible - live example.

can you provide the HTML code you use? Is there a reason you can't use jQuery?
maybe you could use:
document.getElementById('table1').deleteRow(_row.rowIndex);

Related

Appending options to a select

This is related to Adding options to a <select> using jQuery? but has a different focus
My problem is that I am not able to append option-elements to a select in IE8.
When changing the engine to IE7 in IE's developer-tools it does work.
It also works in FF and Chrome.
var valT = "some Text";
var charsToIgnore = 2;
var o = new Option(valT.slice(charsToIgnore), valT);
$(o).html(valT.slice(charsToIgnore));
$('#availablePages').append(o);
another method I tried:
$('<option/>', {value: valT, text: valT}).appendTo("#availablePages");
availablePages is the id of my select. The select does not contain any elements when the page is received by the client. My doctype is <!DOCTYPE html>.
I also tried to remove all other scripts and css from my site to make sure no side-effects apply.
Edit:\ Thanks for downvoting! It's not my fault if provided solutions do not work in all IE8-versions. Since my question was What DOES work in all IE8-versions? it is, from my point of view, understandable that I do not accept answers which do not work for me. As you can see in Adding options to a <select> using jQuery? I am not the only one for whom the other replies here do not work.
Using the Up-/Down-Vote functionalities as channel for your own mood is no good Wiki/QA-behaviour.
This should just do the trick for you:
$('#availablePages').append(new Option(valT.slice(charsToIgnore), valT));
(Tested and working in IE8)
What worked for me
var o = new Option("option text", "value");
$(o).html("option text"); // Without this line it does not work..
$("#availablePages").append(o);
What I also had to change / what one should consider:
display: table; is NOT allowed to be applied. For some reason it breaks everything.

Html table does not redraw after adding to its DOM ie8

IE bugs out on me with a large table by not redrawing the table when I add input's to it using jquery. It forces a redraw/update when I scroll the table up or down but otherwise it doesnt render the input properly.
<div style="overflow: auto;">
<table>
<tbody>
/// lots of rows
</tbody>
</table>
</div>
and the javascript snippet :
input = $(document.createElement("input"));
input.attr("type", "text");
input.attr("value", $.trim(div.html()));
TD.prepend(input);
This works just fine in firefox but refuses to behave in IE8. A way to fix is to force a redraw but I can't seem to find a way to do that.
I think ie8 is rendering in quirks mode but it doesnt work in either ie8 or quirks mode.
[Edit]
function forceIERedraw() {
if ($.browser.msie) {
obj = getThing();
obj.scrollTop = obj.scrollTop - 1;
obj.scrollTop = obj.scrollTop + 1;
}
}
This works but of course makes the screen shake ever so slightly. Horribly hacked but at least you can see things that I add to the dom.
hiding and showing the body usually works with issues like yours:
input = $(document.createElement("input"));
input.attr("type", "text");
input.attr("value", $.trim(div.html()));
TD.prepend(input);
document.body.style.display = 'none';
document.body.style.display = 'block';
Today I encountered somewhat similar problem, solved it by just rewriting the whole html of the div again. Later I found your question here...
Lets say your div had an id stupiddiv
Now you do something like this :
$('#stupiddiv').html($('#stupiddiv').html());
after appending the table and all... That would just work if you had small tables, but with huge tables, I guess it would take performance toll...
Turns out the problem was specific to the website im working on (10 years old at that.) and rendering in ie quirks mode. Basically the whole thing was a mess and this was a side effect of various other problems on the page.

JS : Compatibility problem with Safari

I have a small portion of code which works well on FF but I can't seem to get it to work on Safari unless I put an alert instruction anywhere inside of the whiles.
Anyone knows what may be the problem ?
var liste_ele = document.getElementsByClassName('accordion_content');
i=0;
while(i<liste_ele.length)
{
var j=0;
var liste_sel = liste_ele[i].getElementsByTagName('select');
while(j<liste_sel.length)
{
liste_sel[j].style.visibility = '';
j++;
}
i++;
}
Why don't you try setting visibility to visible instead of ''.
liste_sel[j].style.visibility = 'visible';
And are they really hidden by setting visibility to hidden or are the hidden by display:none that might also make a difference.
If putting an alert in your while loop solves the problem, it's almost certainly a timing issue. Where in the DOM is this code being run? Are you sure it's being run AFTER the elements you're trying to find are created?
A simple test would be to put your code inside a timeout:
window.setTimeout(function(){
// your code here
},100);
If that works, then your issue is related to order of operations; make sure your DOM is created before attempting to access it.
#jitter : I already tried to set visibility to visible, but I didn't have a result so I just tried '', hoping it would help. And yes, my elements are hidden and not undisplayed, otherwise my script wouldn't run perfect on FF.
#jvenema : This looks like a good solution indeed :)
Even though I don't know why would my elements not be created since they are initialised as visibility:hidden by another script in my firmware before I pass on them with this script :/
Anyway thanks, you just solved my problem (well I had solved it the good way, by modifying the script that sets it to hidden but I was curious :p) ! :)
If you don't need to block off the position then use the style display:none. Otherwise hide it initially as Safari will render the page initially with the style visibility:hidden you just won't be able to toggle it with Javascript. As a workaround just toggle the opacity with the javascript;
document.getElementById('Div').style.opacity = 0; to make it disappear
and
document.getElementById('Div').style.opacity = 100; to make it reappear.
Its holding up for me until Safari gets it together.

Onclick JavaScript not working properly in IE

Please excuse my ignorance I am not very familiar with JavaScript and have been tasked with repairing a bug by a developer no longer at the company.
The onclick works perfectly in FireFox, however in IE 7&8 (the only ones we test for), it appears to run through the onclick functions properly, then instead of the data being submitted to the form URL in goStep3(), it runs through every onclick on the page, with href="#" then finally submits with incorrect information as the variable has been overwritten 50 times.
view
EDIT:
When I run trackSponsor(62, 64265); goStep3(1896, 64265, 0); return false; in the Developer Tools in IE8 I get an error of returning false outside of a function....removing that it works just fine.
Is the line that I believe is causing the problems?
trackSponsor() is working properly and returns false
goStep3() is quite a large function however it works by retrieving values from 4 other functions within, assigning the values to a URL within theAction
It completes the function by EDIT:
var yr = $("#find-yr").attr('value');
var me = $("#find-me").attr('value');
var mo = $("#find-mo").attr('value');
var keywords = $("#find-keywords").attr('value');
var theAction = PATH_BASE+'find/step3/'+p_term+'/'+p_id+'/'+p_l_id+'/';
document.forms['FindForm'].action = theAction;
document.FindForm.submit();
return true;
I have tried returning false from this function, as well as changing the document.FindForm.submit() to the 'correct' syntax of document.forms['FindForm'].submit() and it still does not submit until running through all of the other onclick s on the page.
Thanks in advance!
Notes:
jQuery is being used as well.
Javascript is not throwing any errors.
This works fine in FireFox
I can see it going through all of the other functions in the other onclicks using Developer Tools and stepping through the page it does not submit the results of goStep3 until it has gone through all of the other onclick functions on the page.
"posting my earlier comment as an answer"
I see a lot of jQuery being used with attribute selectors, so plz check the code against those.
EDIT:
I noticed ur unfamiliar with JavaScript... so in-case u didnt know, a jQuery selector, will select all tags matching a certain "selector-filter" and perform a certain action on them... so if there is a selector that selects all A tags with a href attribute (or maybe another common attribute between them...) then that would be the cause of your problem.
EDIT: -after you posted your answer -
glad you found an answer...
though it is alittle werid,
cause according to your question it goes through "every element with href="#" ...
However According to msdn, Event bubbling simply passes these unhandled events to the parent element for handling. not through "similar" tags :)
oh well..nothing is logical when it comes to IE
I would start by removing "return false;" from the onClick event since it really isn't doing anything.
try changing
href="#"
with
href='javascript:void(0)' .
I can't say for sure where things are going wrong, but I discourage using a form's name attribute to reference it like you have done here:
document.forms['FindForm'].action = theAction;
document.FindForm.submit();
Why not try the following jQuery:
$("form:FindForm").action = theAction;
$("form:FindForm").trigger("submit");
You should also check that $("form:FindForm") is indeed referencing the desired form element.
The problem was called because of how IE uses the bubble! Thanks all for your help, I have included the code solution to be placed in goStep3().
var browserName = navigator.appName;
if (browserName == "Microsoft Internet Explorer") {
window.event.cancelBubble = true;
}

Style display not working in Firefox, Opera, Safari - (IE7 is OK)

I have an absolutely positioned div that I want to show when the user clicks a link. The onclick of the link calls a js function that sets the display of the div to block (also tried: "", inline, table-cell, inline-table, etc). This works great in IE7, not at all in every other browser I've tried (FF2, FF3, Opera 9.5, Safari).
I've tried adding alerts before and after the call, and they show that the display has changed from none to block but the div does not display.
I can get the div to display in FF3 if I change the display value using Firebug's HTML inspector (but not by running javascript through Firebug's console) - so I know it's not just showing up off-screen, etc.
I've tried everything I can think of, including:
Using a different doctype (XHTML 1, HTML 4, etc)
Using visibility visible/hidden instead of display block/none
Using inline javascript instead of a function call
Testing from different machines
Any ideas about what could cause this?
Since setting the properties with javascript never seemed to work, but setting using Firebug's inspect did, I started to suspect that the javascript ID selector was broken - maybe there were multiple items in the DOM with the same ID? The source didn't show that there were, but looping through all divs using javascript I found that that was the case. Here's the function I ended up using to show the popup:
function openPopup(popupID)
{
var divs = getObjectsByTagAndClass('div','popupDiv');
if (divs != undefined && divs != null)
{
for (var i = 0; i < divs.length; i++)
{
if (divs[i].id == popupID)
divs[i].style.display = 'block';
}
}
}
(utility function getObjectsByTagAndClass not listed)
Ideally I'll find out why the same item is being inserted multiple times, but I don't have control over the rendering platform, just its inputs.
So when debugging issues like this, remember to check for duplicate IDs in the DOM, which can break getElementById.
To everyone who answered, thanks for your help!
Can you provide some markup that reproduce the error?
Your situation must have something to do with your code since I can get this to work on IE, FF3 and Opera 9.5:
function show() {
var d = document.getElementById('testdiv');
d.style.display = 'block';
}
#testdiv {
position: absolute;
height: 20px;
width: 20px;
display: none;
background-color: red;
}
<div id="testdiv"></div>
Click me
Found the answer :
I need to use the following to make it work on both browsers :
document.getElementById('editRow').style.display = '';
Actually I was experiencing the same problem you're describing here. What actually fixed my issue was changing the document properties.
Old DOCTYPE/html spec
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Replaced with
<html>
Check the error console (Tools Menu > Error Console in Firefox 3) to make sure that there isn't another error happening that you're not seeing, which is stopping your script from working.
Try setting the height and width of the div, and make sure it is on top by setting its z-index higher than everything else. If the absolutely positioned div is inside an element that is relatively positioned, it's top and left location is based off the top and left of the relatively positioned element. Try putting your div just under the body element.
You must write a window.onload method:
window.onload = document.getElementById('testdiv').style.display='inline';
Or you can also make a variable:
var d = document.getElementById('testdiv');
window.onload = d.style.display = 'inline';
There is an annoying display error on Firefox 3.5 but not on IE7 or Firefox 2.0.9
I have 3 DIV's position absolute - the first with plain text; the second with a CSS menu (sucklefish type with UL and LI) and the third ditto. The third will not display at all even though the coding has been checked and found to be perfect with W3C's HTML validator.
As a temporary measure, I have merged the second and third DIV's contents.
Things must be bad at Mozilla when IE7 and FF2 display OK but not FF 3.5
I'll give you a BIG hint:
<div style="..." class="..."> ... </div>
If you have something in style, then document.style will work!
If you have something in class, it will not show up in document.style and class="..." will OVERRIDE it!
Think about this and this will clear up SO MANY ISSUES. Just this one little understanding will RID you of this MIND VIRUS. Have a good day. Cheers, Ron Lentjes, LC CLS.

Categories