I have a nested ListView (Master/Detail) and want to invoke a JavaScript function in the detail ItemTemplate so that this function can call a static method on the server site and post the field update. I need to include three data variables in the function call, two of which must come from the ListItem data. The JavaScript call to SaveAnswer that is contained in a list item embedded in the inner listview does not render properly. The code must pass three variables: ThisPAQID is a public variable from the codebehind. I could probably make it a hidden variable on this page. QuestionID is a variable from the current listitem and is contained in the table cell immediately preceeding the SaveAnswer method call.
The nested listview works great, and if I dummy the PAQID and QuestionID values in the function call (e.g. SaveAnswer(1,1, this.Value), it works fine.
<asp:ListView ID="lstQuestions" runat="server" OnItemDataBound="lstQuestions_ItemDataBound">
<LayoutTemplate>
<table>
<asp:PlaceHolder ID="ItemPlaceholder" runat="server" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td style="width: 40px;" valign="top">
<asp:Label ID="lblSectionCode" runat="server" Text='<%#Eval("SectionCode")%>' />.
<asp:Label ID="lblSubsectionNumber" runat="server" Text='<%#Eval("SubsectionNumber")%>' />
</td>
<td colspan="2" valign="top" style="font-size: larger; font-weight: bold; text-decoration: underline;"><%#Eval("SectionName")%></td>
<td valign="top" style="font-size: larger; font-weight: bold; text-decoration: underline;"><%#Eval("SubsectionName")%></td>
</tr>
<tr>
<th align="left">Q #</th>
<th align="left">Question</th>
<th align="left">Answer</th>
<th align="left">Description / Scale</th>
</tr>
<asp:ListView ID="lstAnswers" runat="server" DataKeyNames="QuestionID" OnItemDataBound="lstAnswers_ItemDataBound">
<LayoutTemplate>
<tr id="ItemPlaceholder" runat="server" />
</LayoutTemplate>
<ItemTemplate>
<tr>
<td style="vertical-align: top; font-weight: bold;"><asp:Label ID="lblQuestionID" runat="server" Text='<%#Eval("QuestionID")%>' /></td>
<td style="vertical-align: top;"><asp:Label ID="lblQuestionText" runat="server" Text='<%#Eval("Question")%>' /></td>
Old Code:
<td style="vertical-align: top;"><asp:TextBox ID="txtAnswer" runat="server" Text='<%#Eval("Answer")%>' CssClass="DataEntry" MaxLength="3" Width="30px" onblur='SaveAnswer(<%#=Eval("ThisPAQID"%>,<%#=Eval("QuestionID"%>,this.value)' /></td>
New Code:
<td style="vertical-align: top;">
<asp:TextBox ID="txtAnswer" runat="server" Text='<%#Eval("Answer")%>' CssClass="DataEntry" MaxLength="3" Width="30px" />
<script type="text/javascript">
var textBox = document.getElementById("txtAnswer");
if (document.attachEvent) {
document.attachEvent("onblur", textBox, function() {
SaveAnswer('<%#Eval("ThisPAQID")%>', '<%#Eval("QuestionID")%>', window.event.target.value);
});
} else {
document.addEventListener("blur", textBox, function() {
SaveAnswer('<%#Eval("ThisPAQID")%>', '<%#Eval("QuestionID")%>', this.value);
}, false);
}
</script>
</td>
Rest of Code:
<td style="vertical-align: top; font-size: -1;"><%#Eval("Description")%></td>
</tr>
<tr>
<td colspan="3"> </td>
<td style="font-size: smaller; font-style: italic;"><%# Eval("ScaleText") %><br /><br /></td>
</tr>
</ItemTemplate>
The generated code for the SaveAnswer now looks like this:
<tr>
<td style="vertical-align: top; font-weight: bold;">
<span id="ctl00_body_lstQuestions_ctrl0_lstAnswers_ctrl0_lblQuestionID">1</span>
</td>
<td style="vertical-align: top;"><span id="ctl00_body_lstQuestions_ctrl0_lstAnswers_ctrl0_lblQuestionText">Written materials</span>
</td>
<td style="vertical-align: top;">
<input name="ctl00$body$lstQuestions$ctrl0$lstAnswers$ctrl0$txtAnswer" type="text" value="2.0" maxlength="3" id="ctl00_body_lstQuestions_ctrl0_lstAnswers_ctrl0_txtAnswer" class="DataEntry" style="width:30px;" />
<script type="text/javascript">
var textBox = document.getElementById("txtAnswer");
if (document.attachEvent) {
document.attachEvent("onblur", textBox, function() {
SaveAnswer('13242', '1', window.event.target.value);
});
} else {
document.addEventListener("blur", textBox, function() {
SaveAnswer('13242', '1', this.value);
}, false);
}
</script>
</td>
<td style="vertical-align: top; font-size: -1;">E.g., books, reports, office notes, articles, job instructions, or signs</td>
</tr>
When I put a breakpoint into this code in FireFox, the break never fires. Do I need an "OnBlur" tied to this code? Clearly I am not a JavaScript wizard.
