Internet Explorer Woes

P

Prince Al

Hi,

I have been messing with some Javascript over the last couple of days.
What I want to achieve inititally is to be able to have a set of
fucntions that adds/removes cells from a table row and add/delete
tables from the page. I have managed to hack some code together to add/
remove cells that works in FF, but when I try to run the code in IE,
it breaks and being somewhat of a JS novice, I have no idea why! If
anyone could give me some pointers, I would be most greatful :) My
code is below.

Thanks in advance

Tim

<html> <head>
<SCRIPT LANGUAGE="JavaScript">

function addCellToRow(row_id,cell_id,side) {
alert('test');
var datetime = new Date();
var time = datetime.getTime();
var addLeft="addCellToRow(\'"+row_id+"\',\'"+time+"\',\'left\');";
var addRight="addCellToRow(\'"+row_id+"\',\'"+time+"\',\'right
\');";
var rem="removeCellFromRow(\'"+row_id+"\',\'"+time+"\');";
var tbl = document.getElementById('table');
var row = document.getElementById(row_id);
var cell = document.getElementById(cell_id);
var new_break = document.createElement("p");
var new_cell = document.createElement("td");
var new_form = document.createElement("form");
var new_add_right = document.createElement("button");
var new_add_left = document.createElement("button");
var new_remove = document.createElement("button");
var add_right_text = document.createTextNode('Add right');
var add_left_text = document.createTextNode('Add Left');
var remove_text = document.createTextNode('Remove Column');

new_add_left.setAttribute("onclick",addLeft);
new_add_right.setAttribute("onclick",addRight);
new_remove.setAttribute("onclick",rem);
new_add_left.setAttribute("type","button");
new_add_right.setAttribute("type","button");
new_remove.setAttribute("type","button");
new_cell.setAttribute("id",time);

new_form.appendChild(new_add_left);
new_form.appendChild(new_add_right);
new_form.appendChild(new_break);
new_form.appendChild(new_remove);
new_add_left.appendChild(add_left_text);
new_add_right.appendChild(add_right_text);
new_remove.appendChild(remove_text);
new_cell.appendChild(new_form);

if (side == "right") {
row.insertBefore(new_cell,cell.nextSibling);
} else {
row.insertBefore(new_cell,cell);
}
}

function removeCellFromRow(row_id,cell_id)
{
var row = document.getElementById(row_id);
var cell = document.getElementById(cell_id);
//var lastRow = tbl.rows.length;
row.deleteCell(cell.cellIndex);
}

</script>
</head>

<BODY>
<form action="tableaddrow_nw.html" method="get">
<table border="1" id="table">
<tr id=000000>
<td id=0>
<input type="button" value="Add Left"
onclick="addCellToRow('000000','0','left');" /><br>
<input type="button" value="Add Right"
onclick="addCellToRow('000000','0','right');" /><br>
<input type="button" value="Remove"
onclick="removeCellFromRow('000000','0');" /><br>
</td>
</tr>
</table>
</form>
</body>
</html>
 
P

pete m

Prince Al said the following on 8/8/2007 10:10 AM:




IE doesn't like setAttribute and gets along with it about like a cat at
a dog show. Set the attribute directly with a function definition:

new_add_left.onclick = function(){addCellToRow(row_id,time,'left');}
new_add_right.onclick = function(){addCellToRow(row_id,time,'right');}
new_remove.onclick = function(){removeCellFromRow(row_id,time);}
Click to expand...

I was searching for a similar problem, and ran across this newsgroup
entry. Unfortunately, the above code does not solve the general
problem; it allows me to attach a function, but not any actual code .

What I need is an optional attachment a simple Content Management
System to selected images so that
<img class="couldupdate" src="/images/imagename.jpg" />
becomes:
<img class="canupdate" onclick="imagemgr(this)" src="/images/
imagename.jpg" />
during a CMS session.

Here's the code that ALMOST works in IE, and does work in Firefox and
elsewhere:

var dom = document.getElementsByTagName("img");
for (var i = 0; i < dom.length;i++) {
if (document.all) { // Hack: IE
if (dom.className == 'couldupdate') {
dom.alt = "Click to replace";
dom.className = "canupdate";
// ????? - WHAT GOES HERE - ????
}
} else if (dom.class = 'couldupdate') {
dom.title = "Click to replace";
dom.setAttribute("class", "canupdate");
dom.setAttribute("onclick",
"imagemgr(this)");
}
}



This works fine in FireFox, but there appears to be no way at all to
do a context-based attachment in IE. (Both attachEvent and the above,
don't let you do the general case.)



to a selection of images
 
D

David Mark

[snip]
Here's the code that ALMOST works in IE, and does work in Firefox and
elsewhere:

var dom = document.getElementsByTagName("img");
for (var i = 0; i < dom.length;i++) {
if (document.all) { // Hack: IE
Click to expand...

Other browsers support document.all. You can't infer anything from
its presence.
if (dom.className == 'couldupdate') {
dom.alt = "Click to replace";
Click to expand...


This makes no sense as an alternative for an image. I assume you are
trying to use alt to create a tooltip in IE. IE will do the same with
a title attribute.
dom.className = "canupdate";
// ????? - WHAT GOES HERE - ????
Click to expand...

From looking at the other branch, something like:
Click to expand...

dom.onclick = imagemgr;
}
} else if (dom.class = 'couldupdate') {
Click to expand...


This is wrong. Use className.
dom.title = "Click to replace";
dom.setAttribute("class", "canupdate");
dom.setAttribute("onclick",
"imagemgr(this)");
}
}

This works fine in FireFox, but there appears to be no way at all to
do a context-based attachment in IE. (Both attachEvent and the above,
don't let you do the general case.)
Click to expand...


Get rid of the branching and forget setAttribute exists. Because IE's
developers had no idea what setAttribute was supposed to do, this
example:

dom.setAttribute('onclick', "imagemgr(this)");

is the same as:

dom.onclick = "imagemgr(this)";

Furthermore, this example:

dom.setAttribute('class', "canupdate");

is the same as:

dom.class = "canupdate";

Obviously neither example is effective in IE.
From this it follows that you can't use setAttribute in IE for
Click to expand...
classes, event handlers, checked, for, etc. So just forget it and set
element properties instead.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I am trying to make an audio player, how do I get the selected file to be playable? 5
Help with code 0
I want to Display Excel As HTML In js 2
Only one table shows up with the information 2
Song requests 4
Image not changing between "mute" & "un-mute" images. 5
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button 3
Help with my responsive home page 2

Members online

No members online now.
Total: 24 (members: 1, guests: 23)
Robots: 343

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,045
Latest member
DRCM

Latest Threads

Top