Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts

    cloneNode problems

    I have a table, with a number of rows. At the end of each row, in a cell, is a checkbox that is used to 'select' a row.
    I have a button that, when clicked, iterates through the checkboxes and copies the selected table-rows and 'pastes' them at the bottom of the table.
    The table-rows contain form-elements, that want to be cloned exactly, except for one that needs to increase in value.

    I have most of this working, except that select elements, when cloned, don't seem to recognise that they have been changed. e.g. if, after the page has loaded, I change the value of a select, then when the row is copied, the copy has the original value selected.

    The (I think...) relevant code (there are a couple of prototype.js bits, but they should be self-explanatory...):

    Code:
    function copySelected() {
    	var boxes=document.getElementsByClassName('copyrow','gridform');
    	var newid=count;
    	var checkedboxes = new Array();
    	
    	var els=$('gridform').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    
    	boxes.each(function(box) {
    		if(box.checked) {
    			var oldrow=box.parentNode.parentNode;
    			var clonerow=oldrow.cloneNode(true);
    			clonerow.id='row'+newid;
    			clonerow.hide();
    			clonerow.getElementsByTagName('input')[0].value=newid;
    			$('gridform').getElementsByTagName('tbody')[0].appendChild(clonerow);
    			var newrow=$('row'+newid);
    			box.checked=false;		
    			Effect.Appear(newrow);
    			newid++;
    		}
    	});
    count+=100;
    }

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 512 Times in 499 Posts
    There is no problem in cloning selects
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function AddSel(){
     var frm=document.getElementById('Frm');
     var cl=document.getElementById('Clone').getElementsByTagName('SELECT')[0].cloneNode(true);
     frm.appendChild(cl);
    }
    
    function Tst(obj){
     alert(obj.selectedIndex);
    }
    /*]]>*/
    </script>
    </head>
    
    <body onload="AddSel();AddSel();AddSel();AddSel();" >
    
    <form id="Frm" >
    
    nn
    </form>
    <br />
    <br />
    <br />
    
    <div id="Clone" >
    <select onchange="Tst(this);" >
    <option >Option 0</option>
    <option >Option 1</option>
    <option >Option 2</option>
    <option >Option 3</option>
    </select>
    </div>
    </body>
    
    </html>


    t they should be self-explanatory.
    than may be so but are they correct??
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder
    Join Date
    Sep 2005
    Posts
    1,791
    Thanks
    5
    Thanked 36 Times in 35 Posts
    If I adjust that script so that AddSel() is called on a button-click, rather than onload, then it acts with exactly the problem I'm having.
    The select clones fine, but if I change it's value after the page loads, that change isn't preserved.
    If I explicitly tell it to copy the selectedIndex then that works (in FF at least, IE was problematic, but this can afford to be FF-only), but I was hoping not to have to add more steps...


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    function AddSel(){
     var frm=document.getElementById('Frm');
     var cl=document.getElementById('Clone').getElementsByTagName('SELECT')[0].cloneNode(true);
     frm.appendChild(cl);
    }
    
    function Tst(obj){
     alert(obj.selectedIndex);
    }
    /*]]>*/
    </script>
    </head>
    
    <body>
    <input type="button" onclick="AddSel();" />
    <form id="Frm" >
    
    nn
    </form>
    <br />
    <br />
    <br />
    
    <div id="Clone" >
    <select onchange="Tst(this);" >
    <option >Option 0</option>
    <option >Option 1</option>
    <option >Option 2</option>
    <option >Option 3</option>
    </select>
    </div>
    </body>
    
    </html>

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    PHP Code:
    function AddSel(){
     var 
    frm=document.getElementById('Frm');
        var 
    sel=document.getElementById('Clone').getElementsByTagName('select')[0]
     var 
    cl=sel.cloneNode(true);
        
    cl.options[sel.selectedIndex].selected=true;
     
    frm.appendChild(cl);

    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •