homepage Welcome to WebmasterWorld Guest from 54.226.136.179
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Calling Sub in InnerHTML
Calling Sub in InnerHTML
buck1107

10+ Year Member



 
Msg#: 4198515 posted 2:43 pm on Sep 8, 2010 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4198515 posted 3:40 pm on Sep 8, 2010 (gmt 0)

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

10+ Year Member



 
Msg#: 4198515 posted 4:08 pm on Sep 8, 2010 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4198515 posted 5:02 pm on Sep 8, 2010 (gmt 0)

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

10+ Year Member



 
Msg#: 4198515 posted 6:00 pm on Sep 8, 2010 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4198515 posted 7:02 pm on Sep 8, 2010 (gmt 0)

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

10+ Year Member



 
Msg#: 4198515 posted 7:21 pm on Sep 8, 2010 (gmt 0)

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

Kind Regards

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved