Solved

Converting JavaScript function to work in Internet Explorer

Posted on 2007-12-02
8
1,290 Views
Last Modified: 2013-12-08
I created a JavaScript function that will add a row to a table dynamically.  However, the code only works in Firefox and Safari (well, probably some others, but those are two I've tested).  The issue is that I need to have it work in Internet Explorer (6 and up).  I'm somewhat new to this kind of functionality with JavaScript so I really have no idea how to go about having a version that will work on Internet Explorer.  Any help would be greatly appreciated!
var tbl = document.getElementById('DynamicInfo');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
var cell = row.insertCell(0);  
 
var textNode = document.createTextNode('Name:   ');
cell.appendChild(textNode);
	
var el = document.createElement('input');
el.type = 'text';
el.name = 'ElementName' + iteration;
el.id = 'ElementName' + iteration;
el.size = 25;
cell.appendChild(el);
	
var textNode = document.createTextNode('      ');
cell.appendChild(textNode);
 
var sel = document.createElement('select');
sel.name = 'ElementType' + iteration;
sel.options[0] = new Option('Checkbox', 'Checkbox');
sel.options[1] = new Option('Selection', 'Selection');
sel.options[2] = new Option('Short Text', 'ShortText');
sel.options[3] = new Option('Long Text', 'LongText');
sel.options[4] = new Option('Hidden Date', 'HiddenDate');
sel.options[5] = new Option('Password', 'Password');
cell.appendChild(sel);

Open in new window

0
Comment
Question by:dyarosh
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 29

Expert Comment

by:Göran Andersson
ID: 20393102
What happens when you try to use it in Internet Explorer? Do you get any error messages?

(Have you enabled error messages in the advanced settings in IE?)
0
 

Author Comment

by:dyarosh
ID: 20393207
Hmm, well something weird just happened.  I commented out a line and it started working in Internet Explorer.  So, I can add rows dynamically but the remove row (which I have included below) doesn't work in IE (though it does elsewhere).  I used to get errors with the add function, but not anymore, and the delete button produces no errors in IE (yes, it's turned on).
function addRowToTable()
{
	var tbl = document.getElementById('DynamicInfo');
	var lastRow = tbl.rows.length;
	// if there's no header row in the table, then iteration = lastRow + 1
	var iteration = lastRow;
	var row = tbl.insertRow(lastRow);
	var cell = row.insertCell(0);  
	
	var textNode = document.createTextNode('Name:   ');
	cell.appendChild(textNode);
	
	var el = document.createElement('input');
	el.type = 'text';
	el.name = 'ElementName' + iteration;
	el.id = 'ElementName' + iteration;
	el.size = 25;
	cell.appendChild(el);
	
	var textNode = document.createTextNode('      ');
	cell.appendChild(textNode);
	
	var sel = document.createElement('select');
	sel.name = 'ElementType' + iteration;
	sel.options[0] = new Option('Checkbox', 'Checkbox');
	sel.options[1] = new Option('Selection', 'Selection');
	sel.options[2] = new Option('Short Text', 'ShortText');
	sel.options[3] = new Option('Long Text', 'LongText');
	sel.options[4] = new Option('Hidden Date', 'HiddenDate');
	sel.options[5] = new Option('Password', 'Password');
	cell.appendChild(sel);
	
	var textNode = document.createTextNode('     Options:   ');
	cell.appendChild(textNode);
	
	var el = document.createElement('input');
	el.type = 'text';
	el.name = 'ElementOptions' + iteration;
	el.id = 'ElementOptions' + iteration;
	el.size = 40;
	cell.appendChild(el);
	
	var textNode = document.createTextNode('      ');
	cell.appendChild(textNode);
	
	var el = document.createElement('input');
	el.type = 'button';
	el.value = 'Remove Element';
	el.id = 'RemoveElement' + iteration;
	el.setAttribute('onclick', 'removeRow('+iteration+')');
	//el.setAttribute('disabled', 'false');
	cell.appendChild(el);
	
	var number = document.AddForm.ElementCount.value
	document.AddForm.ElementCount.value = parseInt(number) + 1;
}
 
function removeRow(rowToDelete)
{
	var tbl = document.getElementById('DynamicInfo');
	var lastRow = tbl.rows.length;
	if (lastRow > 2)
	{
		tbl.deleteRow(rowToDelete);
		var number = document.AddForm.ElementCount.value
		document.AddForm.ElementCount.value = parseInt(number) - 1;
	}
}

Open in new window

0
 
LVL 17

Expert Comment

by:gops1
ID: 20393502
Check what you are passing to rowToDelete and verfiy if you have that row or that number of rows available?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:dyarosh
ID: 20393672
I'm passing it 'iteration' when it is created, which is the length of the rows array, which should be the last element (where the new row is added).  I have noticed that even though the removal of rows works in  Firefox, it can be erratic often: for example, if you've deleted all but two rows, you cannot delete the last of the 2, but when you click the delete button for the first row, it deletes the second and it gets worse from there the more rows you add and remove.  Interesting...
0
 
LVL 17

Expert Comment

by:gops1
ID: 20395208
Ok do one thing make these changes to addRowToTable function:

                        //el.setAttribute('onclick', 'removeRow('+iteration+')');
                        el.onclick=function(){
                              removeRow(iteration);
                        }

What I have done commented the line for onlick and added a new one
0
 

Author Comment

by:dyarosh
ID: 20400362
Great, thanks, that did the trick.  However, I still have row deleting issues.  To elaborate: When I delete rows the first time, any row will delete fine, however, after the first delete, the delete function will act relatively erratic.  Sometimes it will delete the row it corresponds to, other times it will delete the row below it, and other times it will not remove anything (and produces an error, see below).  So, I'm not quite sure why it would do that...


Error:
Line:  139
Char:  3
Error:  Invalid Argument
Code:  0

and line 139 is

tbl.deleteRow(rowToDelete);

Thanks for your help so far!
0
 
LVL 17

Accepted Solution

by:
gops1 earned 500 total points
ID: 20408825
Change this line again. The whole concept of passing the iteration is wrong. For the firs time it will be correct as they are generated sequentially but once you delete the rows the sequence is lost and hence behaves erratic.

Replace the onclick statement with this:

                        el.onclick=function(){
                              removeRow(this.parentNode.parentNode.rowIndex);
                        }
0
 

Author Closing Comment

by:dyarosh
ID: 31412240
Great response, worked perfectly!
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html date format 9 20
web page freezes after ajax post 7 46
Make a span connected to the price so when qty changes so does pricing 11 28
AngularJS: ng-repeat 25 24
I recently found myself in a Corporate Situation where the client had requested blocking access to any and all websites except his own Domain? Easy? I am sure this would be your answer but their requirement was, this has to be done without using…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question