在JavaScript函数调用中包含ListItem变量 [英] Including ListItem variables in JavaScript function call
问题描述
我有一个嵌套的ListView(Master/Detail)，并且想要在详细信息ItemTemplate中调用JavaScript函数，以便该函数可以在服务器站点上调用静态方法并发布字段更新.我需要在函数调用中包含三个数据变量，其中两个必须来自ListItem数据.内部列表视图中嵌入的列表项中包含的对 SaveAnswer 的JavaScript调用无法正确呈现.该代码必须传递三个变量: ThisPAQID 是后面代码中的公共变量.我可以在此页面上将其设置为隐藏变量. QuestionID 是当前列表项中的变量，包含在表单元格中，紧接在SaveAnswer方法调用之前.
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.
嵌套的listview效果很好，并且如果我在函数调用中虚拟PAQID和QuestionID值(例如SaveAnswer(1,1，this.Value)，就可以正常工作.
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>
旧代码:
<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>
新代码:
<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>
代码其余部分:
<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>
为SaveAnswer生成的代码现在看起来像这样:
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>
当我在FireFox中的代码中添加断点时，该断点永远不会触发.我需要与该代码绑定的"OnBlur"吗?显然，我不是JavaScript向导.
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.
推荐答案
它不起作用，因为您自动生成的ID为"ctl00_body_lstQuestions_ctrl0_lstAnswers_ctrl0_txtAnswer"，即垃圾+ txtAnswer.
It doesn't work because your auto generated id is "ctl00_body_lstQuestions_ctrl0_lstAnswers_ctrl0_txtAnswer" Which is Garbage + txtAnswer.
有两种处理方式，要么是您认为很聪明，要么是使用 jQuery
There are two ways to deal with it, either you think of something clever or use jQuery
var textBox = $("[id $ ='txtAnswer']");
处理此问题的最简单方法是添加一个小脚本标签
The easiest way to handle this is a little script tag
<script>
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>
这篇关于在JavaScript函数调用中包含ListItem变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
