Linking dynamically created element with a prototyped function

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Claus Mygind
    Contributor
    • Mar 2008
    • 571
    #1

    Linking dynamically created element with a prototyped function

    I understand how to link an element that exists on the form with a prototype function or class.

    But how do I link/bind a dynamically created element with the same prototype function or class

    In this example the existing element "txt1" is linked when the page is loaded:
    Code:
    <!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>
	<script type="text/javascript" src="autosuggest.js"></script>
        <script type="text/javascript">
            window.onload = function () {
                var oTextbox = new  AutoSuggestControl(document.getElementById("txt1"), new RemoteStateSuggestions());        
            }
        </script>
    </head>

    <body>
	    <p><input type="text" id="txt1" /></p>  
    </body>
</html>
    Now how can I do the same if "txt1" was created dynamically using .innerHTML like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
	<script type="text/javascript" src="autosuggest.js"></script>
        <script type="text/javascript">
            window.onload = function () {
                var oTextbox = new  AutoSuggestControl(document.getElementById("txt1"), new RemoteStateSuggestions());        
            }
        </script>
 <SCRIPT LANGUAGE="JavaScript">
 <!--
function makeElement() {
    var tr, td;
    var tbody = document.getElementById("placeHolder");
	
    tr = tbody.insertRow(tbody.rows.length);
	td = tr.insertCell(tr.cells.length);
	td.innerHTML =	'<INPUT type="text" id="txt1" />';
	}
 //-->
 </SCRIPT>

 </HEAD>

 <BODY>
	<input type="button" value="Make Element" onclick="makeElement();" />

	<table>
		<tbody id="placeHolder">
		</tbody>
	  </table>
 </BODY>
</HTML>
    Since txt1 does not exist when the page is loaded how can I bind "AutoSuggestCon trol" to this new element?
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      you can’t, you have to create that element first, and then you can bind it.

        Comment

        • Claus Mygind
          Contributor
          • Mar 2008
          • 571
          #3
          How would you add the prototype method to a dynamically created element?

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              just pass the element. e.g.
              Code:
              // instead of
var oTextbox = new  AutoSuggestControl(document.getElementById("txt1"), new RemoteStateSuggestions());

// create element
var inp = document.createElement("input");
// do some further stuff with inp
var oTextbox = new  AutoSuggestControl(inp, new RemoteStateSuggestions());

                Comment

                • Claus Mygind
                  Contributor
                  • Mar 2008
                  • 571
                  #5
                  Thank you for the simple suggestion works great!!

                    Comment

                    Previous template Next
                    Working...