pborregg
asked on
Dynamically adding javascript with createElement('script')
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("c mStds");
</script>
That's it.
//Standard Select Box
var cellStandard = row.insertCell(5);
var celS = document.createElement('se lect');
celS.name = 'standard' + iteration;
celS.id = 'standard' + iteration;
celS.size = 1;
celS.style.fontSize = '10px';
cellStandard.appendChild(c elS);
var option = document.createElement('op tion');
option.value = '0';
option.appendChild(documen t.createTe xtNode("Se lect One"));
celS.appendChild(option);
<% while (!cmStd.EOF) { %>
var option = document.createElement('op tion');
option.value = '<%=(cmStd.Fields.Item("cm _std_id"). Value)%>';
option.appendChild(documen t.createTe xtNode('<% =(cmStd.Fi elds.Item( "cm_stand_ txt").Valu e)%>'));
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('sc ript');
ss.type = 'text/javascript';
ss.language = 'javascript';
ss.text = "var z = dhtmlXComboFromSelect('cmS tds" + iteration + "');";
ss.defer = true;
var tt = document.createTextNode(ss );
cellStandard.appendChild(t t);
Instead of the script being written I get this:
[object HTMLScriptElement]
I just need to dynamically write this:
<script>
var z=dhtmlXComboFromSelect("c mStds");
</script>
Every time I add a new row. that's pretty much it.
Peter
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("c
</script>
That's it.
//Standard Select Box
var cellStandard = row.insertCell(5);
var celS = document.createElement('se
celS.name = 'standard' + iteration;
celS.id = 'standard' + iteration;
celS.size = 1;
celS.style.fontSize = '10px';
cellStandard.appendChild(c
var option = document.createElement('op
option.value = '0';
option.appendChild(documen
celS.appendChild(option);
<% while (!cmStd.EOF) { %>
var option = document.createElement('op
option.value = '<%=(cmStd.Fields.Item("cm
option.appendChild(documen
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('sc
ss.type = 'text/javascript';
ss.language = 'javascript';
ss.text = "var z = dhtmlXComboFromSelect('cmS
ss.defer = true;
var tt = document.createTextNode(ss
cellStandard.appendChild(t
Instead of the script being written I get this:
[object HTMLScriptElement]
I just need to dynamically write this:
<script>
var z=dhtmlXComboFromSelect("c
</script>
Every time I add a new row. that's pretty much it.
Peter
ASKER
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('d ataTable') ;
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('in put');
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('in put');
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(c ob);
// Checked IN Upload
var cellButUpload = row.insertCell(2);
var cbu = document.createElement('in put');
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('in put');
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(cb u);
// Checked out Update
var cbu = document.createElement('in put');
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(cb u);
// Document Name
var cellDocName = row.insertCell(4);
var docNm = document.createElement('in put');
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(do cNm);
//Standard Select Box
var cellStandard = row.insertCell(5);
var celS = document.createElement('se lect');
celS.name = 'standard' + iteration;
celS.id = 'standard' + iteration;
celS.size = 1;
celS.style.fontSize = '10px';
cellStandard.appendChild(c elS);
var option = document.createElement('op tion');
option.value = '0';
option.appendChild(documen t.createTe xtNode("Se lect One"));
celS.appendChild(option);
<% while (!cmStd.EOF) { %>
var option = document.createElement('op tion');
option.value = '<%=(cmStd.Fields.Item("cm _std_id"). Value)%>';
option.appendChild(documen t.createTe xtNode('<% =(cmStd.Fi elds.Item( "cm_stand_ txt").Valu e)%>'));
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('sc ript');
ss.type = 'text/javascript';
ss.language = 'javascript';
ss.text = "var z = dhtmlXComboFromSelect('cmS tds" + iteration + "');";
ss.defer = true;
var tt = document.createTextNode(ss );
cellStandard.appendChild(t t);
// Reference
var cellDocRef = row.insertCell(6);
var docRef = document.createElement('in put');
docRef.type = 'text';
docRef.name = 'reference' + iteration;
docRef.id = 'reference' + iteration;
docRef.size = 35;
docRef.maxlength = 50;
docRef.style.fontSize = '10px';
cellDocRef.appendChild(doc Ref);
// User Ver
var cellUserVer = row.insertCell(7);
var userVer = document.createElement('in put');
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(us erVer);
// CM Ver
var cellCMVer = row.insertCell(8);
var cmVer = document.createElement('in put');
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.backgroundColo r = '#CCCCCC';
cellCMVer.appendChild(cmVe r);
//END Table Cells
document.getElementById("M M_ROWCOUNT ").value = iteration;
}
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('d
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('in
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('in
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(c
// Checked IN Upload
var cellButUpload = row.insertCell(2);
var cbu = document.createElement('in
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(
// Checked out Read
var cellButRead = row.insertCell(3);
var cbu = document.createElement('in
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(cb
// Checked out Update
var cbu = document.createElement('in
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(cb
// Document Name
var cellDocName = row.insertCell(4);
var docNm = document.createElement('in
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(do
//Standard Select Box
var cellStandard = row.insertCell(5);
var celS = document.createElement('se
celS.name = 'standard' + iteration;
celS.id = 'standard' + iteration;
celS.size = 1;
celS.style.fontSize = '10px';
cellStandard.appendChild(c
var option = document.createElement('op
option.value = '0';
option.appendChild(documen
celS.appendChild(option);
<% while (!cmStd.EOF) { %>
var option = document.createElement('op
option.value = '<%=(cmStd.Fields.Item("cm
option.appendChild(documen
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('sc
ss.type = 'text/javascript';
ss.language = 'javascript';
ss.text = "var z = dhtmlXComboFromSelect('cmS
ss.defer = true;
var tt = document.createTextNode(ss
cellStandard.appendChild(t
// Reference
var cellDocRef = row.insertCell(6);
var docRef = document.createElement('in
docRef.type = 'text';
docRef.name = 'reference' + iteration;
docRef.id = 'reference' + iteration;
docRef.size = 35;
docRef.maxlength = 50;
docRef.style.fontSize = '10px';
cellDocRef.appendChild(doc
// User Ver
var cellUserVer = row.insertCell(7);
var userVer = document.createElement('in
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(us
// CM Ver
var cellCMVer = row.insertCell(8);
var cmVer = document.createElement('in
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.backgroundColo
cellCMVer.appendChild(cmVe
//END Table Cells
document.getElementById("M
}
>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.
no difference, onload was just for test page.
ASKER
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("M M_ROWCOUNT ").value;
if(curRows == null || curRows == 0) { curRows = rows }
//alert(curRows);
var tbl = document.getElementById('d ataTable') ;
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("c mStds");
</script>
MUST appear "AFTER" the combo box WITHIN the same cell as the combo box.
Peter
Here's the DELETE row script:
function removeRowFromTable()
{
var rows;
var curRows = document.getElementById("M
if(curRows == null || curRows == 0) { curRows = rows }
//alert(curRows);
var tbl = document.getElementById('d
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("c
</script>
MUST appear "AFTER" the combo box WITHIN the same cell as the combo box.
Peter
ASKER
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('se lect');
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(c elS);
var option = document.createElement('op tion');
option.value = '0';
option.appendChild(documen t.createTe xtNode("Se lect One"));
celS.appendChild(option);
<% while (!cmStd.EOF) { %>
var option = document.createElement('op tion');
option.value = '<%=(cmStd.Fields.Item("cm _std_id"). Value)%>';
option.appendChild(documen t.createTe xtNode('<% =(cmStd.Fi elds.Item( "cm_stand_ txt").Valu e)%>'));
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('sc ript');
ss.type = 'text/javascript';
ss.language = 'javascript';
ss.text = "var z = dhtmlXComboFromSelect('cmS tds" + iteration + "');"; <--- THIS IS THE REAL NAME OF THE ELEMENT (cmStds)
ss.defer = true;
cellStandard.appendChild(s s);
Once I fixed that... it worked....
Look below and see if you can find it....
//Standard Select Box
var cellStandard = row.insertCell(5);
var celS = document.createElement('se
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(c
var option = document.createElement('op
option.value = '0';
option.appendChild(documen
celS.appendChild(option);
<% while (!cmStd.EOF) { %>
var option = document.createElement('op
option.value = '<%=(cmStd.Fields.Item("cm
option.appendChild(documen
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('sc
ss.type = 'text/javascript';
ss.language = 'javascript';
ss.text = "var z = dhtmlXComboFromSelect('cmS
ss.defer = true;
cellStandard.appendChild(s
Once I fixed that... it worked....
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yup and it works great!!!!!!
Thanks for the points!
Open in new window