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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    cloneNode issue, focus jumps back to cloned node in IE, OK in FF/Chrome

    Hi All,
    I'm having an issue with the code below, which clones a node using cloneNode and appendChild to give me a new blank row at the end of a form. This all works nicely in FF and Chrome, but in IE8 when I click into the new text box that has been generated by the clonenode, focus is switched to the row/node that was cloned so I can't enter any data. Can anyone see what I'm missing to allow this to work in IE8?

    Many thanks

    Mike

    Code:
    function addRow(theRegionId)
     {
     	var allTabs = document.getElementById(theRegionId).getElementsByTagName("table");
       
       for(var i =0 ; i < allTabs.length ; i++)
       {
        if (allTabs[i].id.indexOf("datatable") >= 0)
        {
        	 table = document.getElementById(allTabs[i].id);
          break;	
        }
       }  
       
       //var oRows = document.getElementById('report_'+theRegionId).getElementsByTagName('tr');
       //var iRowCount = oRows.length;
       //window.alert('num rows=' + iRowCount);
       
      var newRow = table.tBodies[0].rows[2].cloneNode(true);   
      table.tBodies[0].appendChild(newRow); 
      
      var oRows = document.getElementById('report_'+theRegionId).getElementsByTagName('tr').length
      
      var inputElements = newRow.getElementsByTagName("input");
      for (i = 0; i < inputElements.length; i++)
          {
            inputElements[i].value = "";
            inputElements[i].setAttribute('id',inputElements[i].getAttribute('name')+'_'+pad(oRows-3,4));
          }
     
     //  var optElements = newRow.getElementsByTagName("option");
     //  for (i = 0; i < optElements.length; i++)
     //    {
     //      optElements[i].value = "";
     //    }
      		
        var imgElements = newRow.getElementsByTagName("img");
        for (i = 0; i < imgElements.length; i++)
          {
            imgElements[i].src = "/i/1px_gray.gif";
            imgElements[i].title = "";
          }  		
     }

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Welcome to the forums!

    I think we would need to see the HTML of the item being cloned to be of more help. Really, a link to a test page for this would be best.

    My initial guess based on your description of the problem would be that you might have a <label> tag wrapped around your input item and that <label> tag might have a "for" attribute pointing to the other (original) input element because it was cloned without having that attribute updated. Firefox and Chrome may count your click on the input element as a click directly on the input element itself while IE may count it as a click on the label element wrapped around the input element - in which case the browser will put your cursor into the original input element because the "for" attribute of the label has not been updated to point to the cloned input element.

    That's my wild guess for the day.

    So if I'm way off base with my guess then please provide a link to your page so we can get a better look at the landscape...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi - thanks for the response, here is the HTML of the item that is being cloned: -

    Code:
    <tr class="delta-report-row"><td class="delta-report-data ui-widget-content" headers="EDIT_LINK"  align="center" >
    <a href="*removed*"><img src="/i/menu/pencil16x16.gif" alt="" title="Click to Create/Edit Bins" /></a></td>
    <td class="delta-report-data ui-widget-content" headers="LOCATION" >
    <input type="text" name="f03" size="30" maxlength="50" value="1236" "autocomplete=off" onchange="f_Change();" onkeyup="moveUpDown(this, event)" id="f01_0001"  /></td>
    <td class="delta-report-data ui-widget-content" headers="DEL_IND" ><input type="hidden" name="f01" value="508"  />
    <input type="hidden" name="f02" value="1040"  /><input type="hidden" name="fcs" value="B14626A512360329EB2BF1C0F3E32013" />
    <input type="checkbox" name="f04" value="508" onchange="f_Change();" />
    <input type="hidden" id="fcs_0001" name="fcs" value="A884FA378C851786DDFE3A33709CB23C">
    <input type="hidden" id="fcud_0001" name="fcud" value="U" /></td></tr>
    Thanks,

    Mike


  •  

    Posting Permissions

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