Solved

Dynamically adding javascript with createElement('script')

Posted on 2010-08-18
8
683 Views
Last Modified: 2012-05-10
I have this code below where I'm dynamically adding rows to a table...

I have 9 cells from 0 - 8.

This code works up to a point with no errors:

This is where it somewhat fails:  //Set the javascript for the Combo Box :: See Below.      

After the dynamic creation of the combo box I need to have the following script added to CELL 5 in the table, row after new row.

    <script>
      var z=dhtmlXComboFromSelect("cmStds");
    </script>

That's it.



        //Standard Select Box
        var cellStandard = row.insertCell(5);
        var celS = document.createElement('select');
        celS.name = 'standard' + iteration;
        celS.id = 'standard' + iteration;
        celS.size = 1;
        celS.style.fontSize = '10px';
               
        cellStandard.appendChild(celS);
        
      
        var option = document.createElement('option');
        option.value = '0';
        option.appendChild(document.createTextNode("Select One"));
      
        celS.appendChild(option);
        
        <% while (!cmStd.EOF) { %>
        var option = document.createElement('option');
        option.value = '<%=(cmStd.Fields.Item("cm_std_id").Value)%>';
        option.appendChild(document.createTextNode('<%=(cmStd.Fields.Item("cm_stand_txt").Value)%>'));
        
        celS.appendChild(option);
        
        <% cmStd.MoveNext(); } if (cmStd.CursorType > 0) { if (!cmStd.BOF) projs.MoveFirst(); } else { cmStd.Requery(); } %>

        //Set the javascript for the Combo Box      - THIS IS WHAT'S NOT WORKING!
             var ss = document.createElement('script');
            ss.type = 'text/javascript';
            ss.language = 'javascript';
            ss.text = "var z = dhtmlXComboFromSelect('cmStds" + iteration + "');";
            ss.defer = true;
            var tt = document.createTextNode(ss);
            cellStandard.appendChild(tt);

Instead of the script being written I get this:

[object HTMLScriptElement]

I just need to dynamically write this:

    <script>
      var z=dhtmlXComboFromSelect("cmStds");
    </script>

Every time I add a new row.  that's pretty much it.

Peter
0
Comment
Question by:pborregg
  • 4
  • 4
8 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 33469291
Check this :


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
	window.onload = function() {
		var iteration = 0;
		var ss = document.createElement('script');
		ss.type = 'text/javascript';
		ss.language = 'javascript';
		ss.text = "alert('ok');";
		ss.defer = true;
//		var tt = document.createTextNode(ss);
		var cellStandard = document.getElementById("cellStandard");
		cellStandard.appendChild(ss);
	}
</script>
</head>
<body  id="cellStandard">
</body>
</html>

Open in new window

0
 

Author Comment

by:pborregg
ID: 33476115
This is close but no cigar... here's the ENTIRE function... which is called when the user presses the "ADD ROW" button.  The line in BOLD is where the function MUST be dynamically written.

It can't be done on the window.onload.  It must appear in the DOM everytime a new row is created.

Thanks....

      function addRowToTable()
      {
        var tbl = document.getElementById('dataTable');
        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);
        //BEGIN CREATION of the cells of the table
        
        // Req'd Checkbox
        var cellReqd = row.insertCell(0);
        var reqd = document.createElement('input');
        reqd.type = 'checkbox';
        reqd.name = 'required' + iteration;
        reqd.id = 'required' + iteration;
        reqd.checked = 'checked';
        reqd.value = '1';
        reqd.style.textAlign = 'center';
        cellReqd.appendChild(reqd);


        // Checked out by
        var cellCkdoutBy = row.insertCell(1);
        var cob = document.createElement('input');
        cob.type = 'text';
        cob.name = 'chkd_out_by' + iteration;
        cob.id = 'chkd_out_by' + iteration;
        cob.size = 15;
        cob.maxlength = 15;
        cob.style.fontSize = '10px';
        cob.style.textAlign = 'center';
        cellCkdoutBy.appendChild(cob);

        // Checked IN Upload
        var cellButUpload = row.insertCell(2);
        var cbu = document.createElement('input');
        cbu.type = 'button';
        cbu.name = 'btnChkIn' + iteration;
        cbu.id = 'btnChkIn' + iteration;
        cbu.value = 'Upload';
        cbu.style.fontSize = '10px';
        cbu.onmouseover =  function(){return overlib('Click here to Check-In a document');};
        cbu.onmouseout =  function(){return nd();};
        cellButUpload.appendChild(cbu);
        
        // Checked out Read
        var cellButRead = row.insertCell(3);
        var cbu = document.createElement('input');
        cbu.type = 'button';
        cbu.name = 'btnChkOut' + iteration;
        cbu.id = 'btnChkOut' + iteration;
        cbu.value = 'Read';
        cbu.style.fontSize = '10px';
        cbu.onmouseover =  function(){return overlib('Click here to Read a document');};
        cbu.onmouseout =  function(){return nd();};
        cellButRead.appendChild(cbu);         
        
        // Checked out Update
        var cbu = document.createElement('input');
        cbu.type = 'button';
        cbu.name = 'btnChkUpdate' + iteration;
        cbu.id = 'btnChkUpdate' + iteration;
        cbu.value = 'Update';
        cbu.style.fontSize = '10px';
        cbu.onmouseover =  function(){return overlib('Click here to Check-Out a document for updating');};
        cbu.onmouseout =  function(){return nd();};
        cellButRead.appendChild(cbu);       
        
      
        // Document Name
        var cellDocName = row.insertCell(4);
        var docNm = document.createElement('input');
        docNm.type = 'text';
        docNm.name = 'doc_name' + iteration;
        docNm.id = 'doc_name' + iteration;
        docNm.size = 35;
        docNm.maxlength = 50;
        docNm.style.fontSize = '10px';  
        cellDocName.appendChild(docNm);       
      

        //Standard Select Box
        var cellStandard = row.insertCell(5);
        var celS = document.createElement('select');
        celS.name = 'standard' + iteration;
        celS.id = 'standard' + iteration;
        celS.size = 1;
        celS.style.fontSize = '10px';
               
        cellStandard.appendChild(celS);
        
      
        var option = document.createElement('option');
        option.value = '0';
        option.appendChild(document.createTextNode("Select One"));
      
        celS.appendChild(option);
        
        <% while (!cmStd.EOF) { %>
        var option = document.createElement('option');
        option.value = '<%=(cmStd.Fields.Item("cm_std_id").Value)%>';
        option.appendChild(document.createTextNode('<%=(cmStd.Fields.Item("cm_stand_txt").Value)%>'));
        
        celS.appendChild(option);
        
        <% cmStd.MoveNext(); } if (cmStd.CursorType > 0) { if (!cmStd.BOF) projs.MoveFirst(); } else { cmStd.Requery(); } %>

       <font color = maroon><b>//Set the javascript for the Combo Box HERE!!!!</b></font>      
            
                         var ss = document.createElement('script');
                                                        ss.type = 'text/javascript';
                                                        ss.language = 'javascript';
                                                        ss.text = "var z = dhtmlXComboFromSelect('cmStds" + iteration + "');";
                                                        ss.defer = true;
                                                        var tt = document.createTextNode(ss);
                                                        cellStandard.appendChild(tt);


        // Reference
        var cellDocRef = row.insertCell(6);
        var docRef = document.createElement('input');
        docRef.type = 'text';
        docRef.name = 'reference' + iteration;
        docRef.id = 'reference' + iteration;
        docRef.size = 35;
        docRef.maxlength = 50;
        docRef.style.fontSize = '10px';  
        cellDocRef.appendChild(docRef);       

        // User Ver
        var cellUserVer = row.insertCell(7);
        var userVer = document.createElement('input');
        userVer.type = 'text';
        userVer.name = 'user_ver' + iteration;
        userVer.id = 'user_ver' + iteration;
        userVer.size = 20;
        userVer.maxlength = 15;
        userVer.style.fontSize = '10px';  
        cellUserVer.appendChild(userVer);       


        // CM Ver
        var cellCMVer = row.insertCell(8);
        var cmVer = document.createElement('input');
        cmVer.type = 'text';
        cmVer.name = 'cm_version' + iteration;
        cmVer.id = 'cm_version' + iteration;
        cmVer.size = 5;
        cmVer.maxlength = 15;
        cmVer.style.fontSize = '10px';
        cmVer.readOnly = true;
        cmVer.style.backgroundColor = '#CCCCCC';  
        cellCMVer.appendChild(cmVer);
        
        //END Table Cells
        document.getElementById("MM_ROWCOUNT").value = iteration;
 
      }
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33476224
>It can't be done on the window.onload.  It must appear in the DOM everytime a new row is created.

no difference, onload was just for test page.
0
 

Author Comment

by:pborregg
ID: 33476969
I still get: [object HTMLScriptElement] next to the Combo Box... no more errors, just the editable combo box doesn't work... I got the editable combo box from www.dhtmlx.com. It's free, so if you want to test it with the code I wrote, you can download the editable combo box.  Create a table, call the combo box in CELL ZERO for testing, and eliminate all the rest of the code in the "addRowToTable()" function.  Create a BUTTON and onclick call the addRowToTable().  DO NOT put the btnADD in the same table as the combo box.  You have to create two tables... give it an ID of dataTable and create a header row.

Here's the DELETE row script:

      function removeRowFromTable()
      {
            
        var rows;
        
        var curRows = document.getElementById("MM_ROWCOUNT").value;
        if(curRows == null || curRows == 0) { curRows = rows }
        //alert(curRows);
        
        var tbl = document.getElementById('dataTable');
        var lastRow = tbl.rows.length;
        //alert(lastRow);
        
        if (lastRow > 2) tbl.deleteRow(lastRow - 1);
      
      }

put a HIDDEN field somewhere on your form: <input name="MM_ROWCOUNT" id="MM_ROWCOUNT" type="hidden" />  This is for the DOM to keep count of the new and deleted rows...

The script:

    <script>
      var z=dhtmlXComboFromSelect("cmStds");
    </script>

MUST appear "AFTER" the combo box WITHIN the same cell as the combo box.

Peter
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:pborregg
ID: 33478416
Got it to work... you won't believe what the problem was....

Look below and see if you can find it....

        //Standard Select Box
        var cellStandard = row.insertCell(5);
        var celS = document.createElement('select');
        celS.name = 'standards' + iteration;  <-- if you look here... I'm calling the element STANDARDS
        celS.id = 'standards' + iteration;  <-- and HERE TOO!!!!
        celS.size = 1;
        celS.style.fontSize = '10px';
        celS.style.width = '125px';
               
        cellStandard.appendChild(celS);
        
      
        var option = document.createElement('option');
        option.value = '0';
        option.appendChild(document.createTextNode("Select One"));
      
        celS.appendChild(option);
        
        <% while (!cmStd.EOF) { %>
        var option = document.createElement('option');
        option.value = '<%=(cmStd.Fields.Item("cm_std_id").Value)%>';
        option.appendChild(document.createTextNode('<%=(cmStd.Fields.Item("cm_stand_txt").Value)%>'));
        
        celS.appendChild(option);
        
        <% cmStd.MoveNext(); } if (cmStd.CursorType > 0) { if (!cmStd.BOF) projs.MoveFirst(); } else { cmStd.Requery(); } %>

        //Set the javascript for the Combo Box      
            
            var ss = document.createElement('script');
            ss.type = 'text/javascript';
            ss.language = 'javascript';
            ss.text = "var z = dhtmlXComboFromSelect('cmStds" + iteration + "');";  <--- THIS IS THE REAL NAME OF THE ELEMENT (cmStds)
            ss.defer = true;
            cellStandard.appendChild(ss);


Once I fixed that... it worked....
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 33478732
... and you removed the createTextNode("your code here")
0
 

Author Closing Comment

by:pborregg
ID: 33478935
Yup and it works great!!!!!!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33479087
Thanks for the points!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Tableau and Javascript: How to export an array to excel with formatting 11 60
Javascript create file issue 4 48
Animated .jpg? 13 60
how can i select 4 0
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

920 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now