innerHTML IE Problem, please help!

2 New Member

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 Reply

11441

ilia

New Member

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

Recognized Expert Moderator Expert

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.dt d">

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

<script language = "Javascript ">
var activeRow = 0;
function setActiveRow(el ) {
var rows = document.getEle mentById('movin gTable').childN odes;
for(var i = 0; i < rows.length; i++) {
if(rows[i] == el) {
activeRow = i;
break;
}
}
}

function getSwapRow(move )
{
var rows = document.getEle mentById('movin gTable').childN odes;
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(m ove) {
var rows = document.getEle mentById('movin gTable').childN odes;
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(ro ws[activeRow+move]);
}

function moveRow(cell, move) {
setActiveRow(ce ll.parentNode);
moveActiveRow(m ove);
}

</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="moveRo w(this, 1)">Down</div>
<div class="col3" onClick="moveRo w(this, -1)">Up</div>
<div class="spacer"> </div>
</div>
<div>
<div class="col1">2</div>
<div class="col2" onClick="moveRo w(this, 1)">Down</div>
<div class="col3" onClick="moveRo w(this, -1)">Up</div>
<div class="spacer"> </div>
</div>
<div>
<div class="col1">3</div>
<div class="col2" onClick="moveRo w(this, 1)">Down</div>
<div class="col3" onClick="moveRo w(this, -1)">Up</div>
<div class="spacer"> </div>
</div>
<div>
<div class="col1">4</div>
<div class="col2" onClick="moveRo w(this, 1)">Down</div>
<div class="col3" onClick="moveRo w(this, -1)">Up</div>
<div class="spacer"> </div>
</div>
<div>
<div class="col1">5</div>
<div class="col2" onClick="moveRo w(this, 1)">Down</div>
<div class="col3" onClick="moveRo w(this, -1)">Up</div>
<div class="spacer"> </div>
</div>
<div>
<div class="col1">6</div>
<div class="col2" onClick="moveRo w(this, 1)">Down</div>
<div class="col3" onClick="moveRo w(this, -1)">Up</div>
<div class="spacer"> </div>
</div>
<div>
<div class="col1">7</div>
<div class="col2" onClick="moveRo w(this, 1)">Down</div>
<div class="col3" onClick="moveRo w(this, -1)">Up</div>
<div class="spacer"> </div>
</div>
<div>
<div class="col1">8</div>
<div class="col2" onClick="moveRo w(this, 1)">Down</div>
<div class="col3" onClick="moveRo w(this, -1)">Up</div>
<div class="spacer"> </div>
</div>
</div>
</body>
</html>
[/html]

May 18 '06 #3

pigfox

New Member

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

Similar topics

1994

innerhtml.... produces Microsoft Internet Explorer error

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. If the user clicks the add text area button too fast or too many times.. they will get the following error: Internet Explorer Has Encountered a Problem and Needs to Close. After reading msdns page about this error I doubt that there is a fix...

Javascript

1819

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, dynamically, insert the following html into a table cell: <span id="soeskende5slet" style="position: absolute; right: 70px; cursor:hand; text-decoration:underline;" onClick="soeskendeSlet('5','Anders

Javascript

7773

.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 way the main page never gets refreshed. It works perfectly under IE, but with Mozilla and Firefox I got a problem : there is a space before the thing I want to display everytime I use ".innerHTML".

Javascript

9338

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 instead of with the correct content. In fact, the children of the DIV all vanish, and it becomes impossible to set the contents thereafter. The much simplified scenario: <div id='divname'> hello

Javascript

2198

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 = ""; document.getElementById("definition").innerHTML = "line1<br>line2"; The corresponding html codes are: <table width="100%"> <tr> <td width="25%" valign="top"><div id="wordlist" width="100%" style=' overflow-y:auto; height:352px;'></div></td>

Javascript

4757

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 innerHTML, this does not occur in firefox. This would not be a problem except the webpage is required to be left on for weeks on end without being restarted. I presume the issue with innerHTML is that Internet Explorer apparently parses what you give...

Javascript

1907

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: http://www.newfangledtelegraph.com/blog/entry/the-need-for-speed-innerhtml-versus-dom-manipulation/ Cheers, -Andrew ----- andrew@hedges.name / http://andrew.hedges.name/

Javascript

1548

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 problem : I have a computer with 3 video cards and 6 monitors plugged (for business purpose). The resolution for each monitor is 1280x1024 On each of this monitor I have a IE browser (full screen) showing the

Javascript

1567

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

9589

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9423

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10216

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10049

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9865

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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8873

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

5309

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

3965

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3565

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP