[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Set Attribute Not working with IE

Posted on 2009-12-16
3
Medium Priority
?
1,015 Views
Last Modified: 2013-12-08
HI Here is my code

Here appending Element to div
                  $("#txtBtn").click(function(event){
                        var txtBox=getTextbox("txt"+ txtCount );
                        txtCount ++;
                         $("#testDiv").append(getLineItem(txtCount));
                        });
  #########################CREATING ELEMENT#################################

                  function getLineItem(number) {
                        var div = document.createElement('div');
                        //Give the div a unique id
                  
                        div.setAttribute('id','lineitem_' + number);
                  
                        //pass unique values to the getTextbox() function
                        var t1 = getTextbox('txt_' + number + '_1');      
                        var r1 = getRadio('rdoEmail');      
                        var b1 = getDelButton('btn_'+ number,number);                              
                        div.appendChild(t1);                                          
                        div.appendChild(r1);      
                        div.appendChild(b1);                                          
                        return div;
                  }

                  function getTextbox(id) {
                        var textbox = document.createElement('input');
                        textbox.setAttribute('id',id);
                        textbox.setAttribute('name',id);
                        return textbox;
                  }
                  
                  function getRadio(id) {
                  
                        var radio = document.createElement('input');                  
                        radio.setAttribute('type',"radio");
                        radio.setAttribute('id',id);
                        radio.setAttribute('name',id);
                        return radio;
                  }
                  
                  function getDelButton(id,number) {                  
                        var btn = document.createElement('input');                  
                        btn.setAttribute('type',"button");
                        btn.setAttribute('value',"Remove");                        
                        btn.setAttribute('id',id);
                        btn.setAttribute('name',id);
                        var divID='lineitem_' + number;
                        //btn.setAttribute('OnClick','removeEmail('+ divID +');');
                        btn.setAttribute.OnClick=removeEmail(divID);
                        return btn;
                  }
                  
                  function removeEmail(id)
                  {                              
                        alert(id);
                        var divMail=document.getElementById('testDiv');
                        divMail.removeChild(id);                        
                     $(id).hide();

                                          
                  }
                  

I am able to append the element on button Click. while appending I am creating a button to remove the row. It is working fine  in firefox but not in IE.

Please help. Also tell me if there is any alternative method to append and delete element dynamically in the form using JQuery or javascript
0
Comment
Question by:pankajrathod84
  • 2
3 Comments
 
LVL 9

Accepted Solution

by:
araim earned 668 total points
ID: 26062246
try this (changes only in the last two functions):


                  function getDelButton(id,number) {                  
                        var btn = document.createElement('input');                  
                        btn.setAttribute('type',"button");
                        btn.setAttribute('value',"Remove");                        
                        btn.setAttribute('id',id);
                        btn.setAttribute('name',id);
                        var divID='lineitem_' + number;
                        //btn.setAttribute('OnClick','removeEmail('+ divID +')');
                        btn.onclick=function(){removeEmail(divID);};
                                    
                                    //btn.setAttribute.onclick=removeEmail(divID);
                        return btn;
                  }
                 
                  function removeEmail(id)
                  {                              
                        alert(id);
                        var divMail=document.getElementById('testDiv');
                        divMail.removeChild($('#'+id)[0]);                        
                                    $('#'+id)[0].hide();                                          
                  }
0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 1332 total points
ID: 26073922
>> Also tell me if there is any alternative method to append and delete element dynamically in the form using JQuery or javascript
...ABC easy as 123 as simple as do ray me...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>hielo</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
<script language="JavaScript" type="text/javascript">
$(function(){
	$(".add").live("click",
		function(){
			if(2 == $("tr", $(this).closest("table")).size() )
			{
				$("<input type='button' class='delete' name='delete' value='Delete' />").insertAfter(this);
			}
			$("input:text",$(this).closest("tr").clone(true).insertAfter( $(this).closest("tr") ) ).attr("value","");

		});

	$(".delete").live("click",
		function(){
			var t=$(this).closest("table");
			if( $("tr", t).size() > 2)
			{
				$(this).closest("tr").remove();
				if(2 == $("tr", t).size() )
				{
					$("tr:eq(1) > td > input.delete", t).remove();
				}
			}
		});

});
</script>

	</head>
	<body>
	<table>
		<tr><th>Primary</th><th>Email</th></tr>
		<tr><td><input type='radio' name='primary' value='1'/></td><td><input type='text' name='email' value=''/> <input type='button' class='add' name='add' value='Add'/> </td></tr>
	</table>
	</body>
</html>

Open in new window

0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 1332 total points
ID: 26097832
>>Set Attribute Not working with IE
A workaround to this for IE would be to NOT use the setAttribute() method at all. Intead assume the attribute is already "attached" to the button object and simply specify its value - ex:

function getDelButton(id,number) {                  
                        var btn = document.createElement('input');                  
                        btn.type="button";
                        btn.value="Remove";                        
                        btn.id'=id;
                        btn.name=id;
                        var divID='lineitem_' + number;
                        btn.onclick=function(){ removeEmail(divID) };
                        return btn;
                  }

Now, that SHOULD work, but a long time ago I ran into the following article:
http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html

So if the above doesn't work on your original code, then I guess that bug is not limited to radio buttons, but with INPUT alement in general. Having said that, I suspect my first post will be easier for you to work with/customize.

Regards,
Hielo

Open in new window

0

Featured Post

Technology Partners: 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!

Question has a verified solution.

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

I made this because I wanted to get e-mail with a attached csv file so I'd would be able to import user input into a MS Excel template, but I also wanted to register/save all inputs from each day in a file on the server. 1st - It creates a temp C…
In this article you will learn how to create a free basic website on Bitbucket, a git service provider. Polymer creates dynamic HTML components, which allow more flexibility than static HTML. This tutorial uses Ubuntu Linux but can also be done on W…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
Suggested Courses

830 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