1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:44 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

Calling Sub in InnerHTML

Calling Sub in InnerHTML

         

buck1107

2:43 pm on Sep 8, 2010 (gmt 0)

10+ Year Member



Hi,
I wasn't sure where to post this, as it involves both ASP(VB) and Javascript. However, as the script is calling a vscript sub, I thought it might be appropriate.

The question is - I have a javascript function that creates a new table row 'on the fly.' The Javascript is designed to write the new table row, and hopefully reference/call the sub "option1". One of the rows calls this vb sub for the creation of an html select box, but whenever I include that row, it renders the javascript inoperable.
If I change the row
txtNotes +="<%option1 ""&strGoalPrefix&a&"", ""&a&"", "strGoalNumForNotes"%>";
to regular html version
txtNotes +="<option value='<%=strGoalPrefix%><%=a%>'><%=a%></option>";
, then it all works. Here's the code below - thanks for any help or resources. 


<%
sub option1(value1, data, select_name) 
 Response.Write("<option value=""" & value1 & """")
 if request.form(select_name) = value1 then
 Response.Write("selected") 
 end if
 Response.Write(">" & data & "</option>")
end sub
%>
<script type="text/javascript">
function addRowToTable()
{
 var tbl = document.getElementById('tblSample').tBodies[0];
 var row = tbl.insertRow(-1); 

//notes
var newCell0 = row.insertCell(0);

txtNotes = "<form action='strategic_plan_c.asp' name='Notes' id='notes' method='post'><br>" ;
txtNotes +="<%strGoalCategory="E.S1.1."%>";
txtNotes +="<%strGoalPrefix=strGoalCategory%>";
txtNotes +="<%strGoalNum=Request.Form("strGoalNum")%>";
txtNotes +="<%Dim objRS%>";
txtNotes +="<%Set objRS = Server.CreateObject("ADODB.Recordset")%>";
txtNotes +="<%objRS.Open "SELECT NotesNum FROM AMS_StrategicPlanNotes WHERE left(GoalNum,5) = 'E.S1.';", objConnection, 2, 2 %>";
txtNotes +="<%If Not objRS.EOF Then%>";
txtNotes +="<%aTable1Values = objRS.GetRows()%>";
txtNotes +="<%objRS.Close%>";

txtNotes +="<select name='strGoalNumForNotes' id='strGoalNumForNotes'>";
txtNotes +="<%for iRowLoop = 0 to UBound(aTable1Values,2)%>";
txtNotes +="<%strStripGoal=left(right(aTable1Values(0,iRowLoop),2),1)%>";
txtNotes +="<%strExistingValues = strExistingValues & "," & strStripGoal & ","%>";
txtNotes +="<%next%>";
txtNotes +="<%strStripGoal=left(right(strGoalNum,2),1)%>";
txtNotes +="<%for a=1 to 30%>";
txtNotes +="<%If InStr(strExistingValues, "," & CStr(a) & ",")<1 Then%>";
txtNotes +="<%option1 ""&strGoalPrefix&a&"", ""&a&"", "strGoalNumForNotes"%>";
txtNotes +="<%End If%>";
txtNotes +="<%next%>";
txtNotes +="<%end if%>";


txtNotes +="</select>";
txtNotes +="</form>";
 
newCell0.innerHTML = txtNotes;
newCell0.style.verticalAlign = "top";
}
function removeRowFromTable()
{
 var tbl = document.getElementById('tblSample');
 var lastRow = tbl.rows.length;
 if (lastRow > 2) tbl.deleteRow(lastRow - 1);
} 
</script>


</head>
<body>

 <table border="1" cellpadding="1" cellspacing="2" bordercolor="#CCCCCC" id="tblSample" >
 <tr bgcolor="#999999">
 <th width="82" bordercolor="#999999"><h3>Number<b><a name="frmHeader" id="test2"></a></b></h3></th>
 <th width="205"><h3>Goal</h3></th>
 <th width="220"><h3>Objectives</h3></th>
 <th width="220"><h3>Implementation of Objectives</h3></th>
 <th width="200"><h3>Outcome<br> Measures<br> (Responsible<br> Party)</h3></th>
 <th width="200"><h3>Notes</h3></th>
 <th width="256"><h3>Action</h3></th>
 </tr> 
 </table>
<form name="e">
 <input type="button" name="frmAddRow" value="Add Row" onClick="addRowToTable();">
 <input type="button" value="Remove" onClick="removeRowFromTable();" />

 <div id="myDiv"> </div>
 <input type="hidden" name="AddCourseTest" value="True">
</form>

</body>
</html>



Fotiman

3:40 pm on Sep 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I think you have too many quotes. If you view the source of the page (after it renders in the browser) I think you'll see that the JavaScript contains too many quotes. Try this: 

txtNotes +="<%option1 strGoalPrefix & a, a, "strGoalNumForNotes"%>";

buck1107

4:08 pm on Sep 8, 2010 (gmt 0)

10+ Year Member



Thanks - I tried it, but it still isn't working. Also tried altering the number of quotes in the last parameter.

Does the Sub need to be included in the innerhtml as well? Not sure about how the order of rendering would affect it, etc?

Thanks

Fotiman

5:02 pm on Sep 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Well, the Sub piece is happening server side, before the page even reaches the client. Just wanted to make sure you were aware of that.

Can you do a View > Source on the page in the browser, and then past the results here so we can see what the browser thinks it has?

buck1107

6:00 pm on Sep 8, 2010 (gmt 0)

10+ Year Member



Thanks - here's the source HTML. Thanks again. 


<html>
<head>
<script type="text/javascript">
function addRowToTable()
{
 var tbl = document.getElementById('tblSample').tBodies[0];
 var row = tbl.insertRow(-1); 
 

//notes
 var newCell0 = row.insertCell(0);


txtNotes = "<form action='strategic_plan_c.asp' name='Notes' id='notes' method='post'><br>" ;
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<b>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";

txtNotes +="E.S1.1. ";

txtNotes +="<select name='strGoalNumForNotes' id='strGoalNumForNotes'>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">3</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">4</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">5</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">6</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">7</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">8</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">9</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">10</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">11</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">12</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">13</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">14</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">15</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">16</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">17</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">18</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">19</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">20</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">21</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">22</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">23</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">24</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">25</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">26</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">27</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">28</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">29</option>";
txtNotes +="";
txtNotes +="";
txtNotes +="";
txtNotes +="<option value="E.S1.1.">30</option>";
txtNotes +="";
txtNotes +="";

txtNotes +="</select>";      
      
txtNotes +="";
txtNotes +=".";
txtNotes += "</strong>";
txtNotes += "<br><strong>Enter Notes Text:</strong><br>";
txtNotes +="<textarea name='strNotesDesc' cols='25' rows='10'></textarea><br>";
txtNotes +="</form>";
 
 newCell0.innerHTML = txtNotes;
 newCell0.style.verticalAlign = "top";
 
 }

function removeRowFromTable()
{
 var tbl = document.getElementById('tblSample');
 var lastRow = tbl.rows.length;
 if (lastRow > 2) tbl.deleteRow(lastRow - 1);
} 

</script>


</head>
<body>




   <table border="1" cellpadding="1" cellspacing="2" bordercolor="#CCCCCC" id="tblSample" >
    <tr bgcolor="#999999">

    <th width="82" bordercolor="#999999"><h3>Number<b><a name="frmHeader" id="test2"></a></b></h3></th>
    </tr> 
    </table>
<form name="e">
 <input type="button" name="frmAddRow" value="Add Row" onClick="addRowToTable();">
 <input type="button" value="Remove" onClick="removeRowFromTable();" >
 <input type="hidden" name="AddCourseTest" value="True">
</form>

</body>
</html>

Fotiman

7:02 pm on Sep 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Ah, the problem, I think, is the quotes.

txtNotes +="<option value="E.S1.1.">3</option>";

The quote before E.S1.1 ends the quote started before <option.

Try replacing the quotes with single quotes in your sub method.

buck1107

7:21 pm on Sep 8, 2010 (gmt 0)

10+ Year Member



Ah - that did the trick!
Many thanks for your help in this.

Kind Regards
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:44 pm May 13, 2026