Compreso le variables ListItem nella chiamata di function JavaScript

Ho un ListView nidificato (Master / Detail) e desidero ricall una function JavaScript nel dettaglio ItemTemplate in modo che questa function possa call un metodo statico sul sito del server e submit l'aggiornamento del field. Devo includere tre variables di dati nella chiamata di function, due dei quali devono provenire dai dati di ListItem. La chiamata JavaScript a SaveAnswer contenuto in un elemento di elenco incorporato nell'elenco interno non viene eseguita correttamente. Il codice deve passare tre variables: ThisPAQID è una variabile pubblica dal codebehind. Potrei probabilmente renderla una variabile nascosta in questa pagina. QuestionID è una variabile dell'attuale listitem e è contenuta nella cella di tabella che precede immediatamente la chiamata di metodo SaveAnswer.

L'elenco di listini nidificato funziona ottimamente e se faccio dummy i valori PAQID e QuestionID nella function chiamata (ad esempio SaveAnswer (1,1, this.Value), funziona bene.

<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> 

Vecchio codice:

 <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> 

Nuovo codice:

 <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> 

Resto del codice:

  <td style="vertical-align: top; font-size: -1;"><%#Eval("Description")%></td> </tr> <tr> <td colspan="3">&nbsp;</td> <td style="font-size: smaller; font-style: italic;"><%# Eval("ScaleText") %><br /><br /></td> </tr> </ItemTemplate> 

Il codice generato per SaveAnswer ora è simile:

 <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;">Eg, books, reports, office notes, articles, job instructions, or signs</td> </tr> 

Quando ho messo un punto di interruzione in questo codice in FireFox, la pausa non si accende mai. Ho bisogno di un "OnBlur" legato a questo codice? Chiaramente non sono un mago di JavaScript.

Non funziona perché il tuo id generato automaticamente è "ctl00_body_lstQuestions_ctrl0_lstAnswers_ctrl0_txtAnswer" Qual è Garbage + txtAnswer.

Ci sono due modi per affrontarla, o si pensa a qualcosa di intelligente o utilizza jQuery

var textBox = $("[id$='txtAnswer']");

Il modo più semplice per gestire questo è un piccolo tag di script

 <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>