innerHTML IE Problem, please help!

Hi All,

I am a newbie in terms of Javascript, I found some code on the net to swap rows in a table using innerHTML, this works fine in Firefox but IE is complaining, after some googling around I found that innerHTML is read only for tables in IE which is a problem, please see my code below.

I need urgent help if anyone has an idea or a helpfull link, any help will be greatly appreciated!

PS: dont mind the PHP
CODE BELOW ---

Expand|Select|Wrap|Line Numbers

  <?php 
 
$array = explode(",", %4$sPOST["order"]);
 
for($i=0; $i<count($array); $i++)

{

$newold[$i]['new_position'] = $i+1;

$newold[$i]['old_position'] = $array[$i];

if ($newold[$i]['new_position'] != $newold[$i]['old_position'])

{

echo "<b>SQL is:</b> UPDATE -table name- SET step = ".$newold[$i]['new_position']." WHERE step = ".$newold[$i]['old_position']."<br>";

}

}

?>

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language = "Javascript">

var activeRow = 0;

function setActiveRow(el) {

var rows = document.getElementById('movingTable').rows;

for(var i = 0; i < rows.length; i++) {

if(rows[i] == el) activeRow = i;

}

}
 
function moveActiveRow(move) {

var rows = document.getElementById('movingTable');

var oldRow = rows.rows[activeRow].innerHTML;

var newRow = rows.rows[activeRow+move].innerHTML;

alert(newRow);

//swap bug in IE

rows[activeRow].innerHTML = newRow;

rows[activeRow+move].innerHTML = oldRow;

//end swap

setActiveRow(rows[activeRow+move]);

}
 
function moveRow(cell, move) {

setActiveRow(cell.parentNode);

moveActiveRow(move);

}
 
function doSubmit() {

var rows = document.getElementById('movingTable').rows;

var ret = new Array();

for(var i = 0; i < rows.length;i++) {

ret[i] = rows[i].getElementsByTagName('td')[0].innerHTML;

}

return ret;

}

</script>

</head>

<body>

<table width="300" border="2" cellspacing="0" cellpadding="0" id="movingTable">

<tr>

<td>1</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

<tr>

<td>2</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

<tr>

<td>3</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

<tr>

<td>4</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

<tr>

<td>5</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

<tr>

<td>6</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

<tr>

<td>7</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

<tr>

<td>8</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

</table>
 
<form name="form1" method="post" action="sample.php" onSubmit="this.order.value=doSubmit()">

<input type="hidden" name="order">

<input type="submit" name="Submit" value="Submit">

</form>

</body>

</html>

May 17 '06 #1

Subscribe Post Reply

11393

ilia

sorry their is a bug...

please see corrected code below:

Expand|Select|Wrap|Line Numbers

  <?php 
 
$array = explode(",", %4$s POST["order"]);
 
for($i=0; $i<count($array); $i++)

{

$newold[$i]['new_position'] = $i+1;

$newold[$i]['old_position'] = $array[$i];

if ($newold[$i]['new_position'] != $newold[$i]['old_position'])

{

echo "<b>SQL is:</b> UPDATE -table name- SET step = ".$newold[$i]['new_position']." WHERE step = ".$newold[$i]['old_position']."<br>";

}

}
 
//print("<pre>");

//print_r($newold);

//print("</pre>");

?>

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language = "Javascript">

var activeRow = 0;

function setActiveRow(el) {

var rows = document.getElementById('movingTable').rows;

for(var i = 0; i < rows.length; i++) {

if(rows[i] == el) activeRow = i;

}

}
 
function moveActiveRow(move) {

var rows = document.getElementById('movingTable').rows;

var oldRow = rows[activeRow].innerHTML;

var newRow = rows[activeRow+move].innerHTML;
 
//swap bug in IE

rows[activeRow].innerHTML = newRow;

rows[activeRow+move].innerHTML = oldRow;

//end swap

setActiveRow(rows[activeRow+move]);

}
 
function moveRow(cell, move) {

setActiveRow(cell.parentNode);

moveActiveRow(move);

}
 
function doSubmit() {

var rows = document.getElementById('movingTable').rows;

var ret = new Array();

for(var i = 0; i < rows.length;i++) {

ret[i] = rows[i].getElementsByTagName('td')[0].innerHTML;

}

return ret;

}

</script>

</head>

<body>

<table width="300" border="2" cellspacing="0" cellpadding="0" id="movingTable">

<tr>

<td>1</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

<tr>

<td>2</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

<tr>

<td>3</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

<tr>

<td>4</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

<tr>

<td>5</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

<tr>

<td>6</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

<tr>

<td>7</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

<tr>

<td>8</td>

<td style="cursor: hand;" onClick="moveRow(this, 1)">Down</td>

<td style="cursor: hand;" onClick="moveRow(this, -1)">Up</td>

</tr>

</table>
 
<form name="form1" method="post" action="sample.php" onSubmit="this.order.value=doSubmit()">

<input type="hidden" name="order">

<input type="submit" name="Submit" value="Submit">

</form>

</body>

</html>

May 18 '06 #2

Banfa

9,065

Expert Mod 8TB

Instead of tables use Divs and CSS to make them look like tables, the only disadvantage of this is that you have to explicitly set the width of each column, like this (works in IE and Firefox)

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Tables Using CSS</title>

<script language = "Javascript">
var activeRow = 0;
function setActiveRow(el) {
var rows = document.getElementById('movingTable').childNodes;
for(var i = 0; i < rows.length; i++) {
if(rows[i] == el) {
activeRow = i;
break;
}
}
}

function getSwapRow(move)
{
var rows = document.getElementById('movingTable').childNodes;
var delta = move<0 ? -1 : 1;
var end = move<0 ? -1 : rows.length;

for( var i = activeRow+delta; i != end; i += delta ) {
if ( rows[i].nodeName == "DIV" )
{
move -= delta;

if (move == 0) {
return i;
}
}
}

/* Only get here if attempted invalid operation
like move up top row */
return -1;
}

function moveActiveRow(move) {
var rows = document.getElementById('movingTable').childNodes;
var swapRow = getSwapRow(move);

if (swapRow == -1 )
return;

var oldRow = rows[activeRow].innerHTML;
var newRow = rows[swapRow].innerHTML;
//alert(oldRow + " : " + activeRow +" : " + (swapRow) + " : " + newRow);
rows[activeRow].innerHTML = newRow;
rows[swapRow].innerHTML = oldRow;
setActiveRow(rows[activeRow+move]);
}

function moveRow(cell, move) {
setActiveRow(cell.parentNode);
moveActiveRow(move);
}

</script>

<style>
#movingTable {
width: 300px;
border: 2px solid gray;
}

#movingTable div { /* this is the row */
clear: both;
margin: 0;
padding: 0;
}

#movingTable div div { /* this is the cell */
float: left;
clear: none;
border: 1px solid gray;
margin: 0;
padding: 0;
cursor: pointer;
}

/* Set column widths these can be set separately
and named appropriately if required */
#movingTable div .col1, #movingTable div .col2, #movingTable div .col3 {
width: 98px;
}

#movingTable div .spacer {
float: none;
clear: both;
border: 0;
margin: 0;
padding: 0;
cursor: default;
overflow: hidden;
height: 1px;
}
</style>
</head>
<body>
<div id="movingTable">
<div>
<div class="col1">1</div>
<div class="col2" onClick="moveRow(this, 1)">Down</div>
<div class="col3" onClick="moveRow(this, -1)">Up</div>
<div class="spacer"></div>
</div>
<div>
<div class="col1">2</div>
<div class="col2" onClick="moveRow(this, 1)">Down</div>
<div class="col3" onClick="moveRow(this, -1)">Up</div>
<div class="spacer"></div>
</div>
<div>
<div class="col1">3</div>
<div class="col2" onClick="moveRow(this, 1)">Down</div>
<div class="col3" onClick="moveRow(this, -1)">Up</div>
<div class="spacer"></div>
</div>
<div>
<div class="col1">4</div>
<div class="col2" onClick="moveRow(this, 1)">Down</div>
<div class="col3" onClick="moveRow(this, -1)">Up</div>
<div class="spacer"></div>
</div>
<div>
<div class="col1">5</div>
<div class="col2" onClick="moveRow(this, 1)">Down</div>
<div class="col3" onClick="moveRow(this, -1)">Up</div>
<div class="spacer"></div>
</div>
<div>
<div class="col1">6</div>
<div class="col2" onClick="moveRow(this, 1)">Down</div>
<div class="col3" onClick="moveRow(this, -1)">Up</div>
<div class="spacer"></div>
</div>
<div>
<div class="col1">7</div>
<div class="col2" onClick="moveRow(this, 1)">Down</div>
<div class="col3" onClick="moveRow(this, -1)">Up</div>
<div class="spacer"></div>
</div>
<div>
<div class="col1">8</div>
<div class="col2" onClick="moveRow(this, 1)">Down</div>
<div class="col3" onClick="moveRow(this, -1)">Up</div>
<div class="spacer"></div>
</div>
</div>
</body>
</html>
[/html]

May 18 '06 #3

pigfox

This solution is really good, but does anyone know how to create a new row via an "Add Row" link and also have another link for deleting the row the delete link is on while the numbering is autoupdated.

Dec 22 '06 #4

by: Jason | last post by:

I have a web page that contains textareas. These are dynamically added via asp when the page loads based on database records. The user also has the ability to add more text areas via innerhtml. ...

Javascript

Problems with innerHTML and "

by: Anders Nielsen | last post by:

Hi :-) I'm currently working with innerHTML , but it is giving me some problems with " and '. Basically (there is also some ASP involved), my problem looks like this: I would like to,...

Javascript

.innerHTML bug with mozilla/firefox (Ajax)

by: Clément | last post by:

Hi! I am currently developping a user interface with Ajax/C#/.net. And I am facing a problem with Mozilla, and Firefox. I use the function innerHTML to load a Web UserControl into a div, this...

Javascript

innerHTML problem in Safari

by: garthusenet | last post by:

I have a fairly complicated application written in Javascript+DOM, and I've run into an odd problem that only shows up in Safari. Basically, after setting innerHTML of a DIV, the div ends up empty...

Javascript

IE only show the first line after set innerHTML.

by: huzheng001 | last post by:

I have develop a on-line dictionary website, http://www.stardict.org I meet a problem: Here is two lines of js codes: document.getElementById("wordlist").innerHTML = "";...

Javascript

Memory Leak with InnerHTML

by: m0nkeymafia | last post by:

I have spent the past few weeks trying to figure a way around this problem, and have yet to find a good enough solution. Internet Explorer leaks memory when I update a div container using...

Javascript

The need for speed: innerHTML versus DOM manipulation

by: Andrew Hedges | last post by:

Wherein I attempt to debunk some myths about the relative merits of the two methods for programmatically adding content to a web page: ...

Javascript

innerHTML performance in multimonitor system

by: ppRaistlin | last post by:

Hi, I understand that it s a very rare question that I m ready to ask and that only few people can actually test but a theoric explanation and solution will be really grateful. Here is my...

Javascript

Problem with innerHTML and Javascript and Ajax in IE

by: harikumarmpl | last post by:

Hi to all Here is the code i am trying for <html> <head> <title>XMLHttpRequest</title> <script type="text/javascript">

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

innerHTML IE Problem, please help!

Similar topics