Including ListItem variables in JavaScript function call
<p>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 <strong>SaveAnswer</strong> that is contained in a list item embedded in the <strong>inner</strong> listview does not render properly. The code must pass three variables: <strong>ThisPAQID</strong> is a public variable from the codebehind. I could probably make it a hidden variable on this page. <strong>QuestionID</strong> is a variable from the current listitem and is contained in the table cell immediately preceeding the SaveAnswer method call. </p>

<p>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. </p>

<pre><code>&lt;asp:ListView ID="lstQuestions" runat="server" OnItemDataBound="lstQuestions_ItemDataBound"&gt;
  &lt;LayoutTemplate&gt;
    &lt;table&gt;
      &lt;asp:PlaceHolder ID="ItemPlaceholder" runat="server" /&gt;
    &lt;/table&gt;
  &lt;/LayoutTemplate&gt;
  &lt;ItemTemplate&gt;
    &lt;tr&gt;
      &lt;td style="width: 40px;" valign="top"&gt;
        &lt;asp:Label ID="lblSectionCode" runat="server" Text='&lt;%#Eval("SectionCode")%&gt;' /&gt;.
        &lt;asp:Label ID="lblSubsectionNumber" runat="server" Text='&lt;%#Eval("SubsectionNumber")%&gt;' /&gt;
      &lt;/td&gt;
      &lt;td colspan="2" valign="top" style="font-size: larger; font-weight: bold; text-decoration: underline;"&gt;&lt;%#Eval("SectionName")%&gt;&lt;/td&gt;
      &lt;td valign="top" style="font-size: larger; font-weight: bold; text-decoration: underline;"&gt;&lt;%#Eval("SubsectionName")%&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th align="left"&gt;Q #&lt;/th&gt;
      &lt;th align="left"&gt;Question&lt;/th&gt;
      &lt;th align="left"&gt;Answer&lt;/th&gt;
      &lt;th align="left"&gt;Description / Scale&lt;/th&gt;
    &lt;/tr&gt;
    &lt;asp:ListView ID="lstAnswers" runat="server" DataKeyNames="QuestionID" OnItemDataBound="lstAnswers_ItemDataBound"&gt;
      &lt;LayoutTemplate&gt;
      &lt;tr id="ItemPlaceholder" runat="server" /&gt;
      &lt;/LayoutTemplate&gt;
    &lt;ItemTemplate&gt;
      &lt;tr&gt;
        &lt;td style="vertical-align: top; font-weight: bold;"&gt;&lt;asp:Label ID="lblQuestionID" runat="server" Text='&lt;%#Eval("QuestionID")%&gt;' /&gt;&lt;/td&gt;
        &lt;td style="vertical-align: top;"&gt;&lt;asp:Label ID="lblQuestionText" runat="server" Text='&lt;%#Eval("Question")%&gt;' /&gt;&lt;/td&gt;
</code></pre>

<p><strong>Old Code:</strong></p>

<pre><code>&lt;td style="vertical-align: top;"&gt;&lt;asp:TextBox ID="txtAnswer" runat="server" Text='&lt;%#Eval("Answer")%&gt;' CssClass="DataEntry" MaxLength="3" Width="30px" onblur='SaveAnswer(&lt;%#=Eval("ThisPAQID"%&gt;,&lt;%#=Eval("QuestionID"%&gt;,this.value)' /&gt;&lt;/td&gt;
</code></pre>

<p><strong>New Code:</strong></p>

<pre><code>&lt;td style="vertical-align: top;"&gt;
  &lt;asp:TextBox ID="txtAnswer" runat="server" Text='&lt;%#Eval("Answer")%&gt;' CssClass="DataEntry" MaxLength="3" Width="30px" /&gt;
  &lt;script type="text/javascript"&gt;
    var textBox = document.getElementById("txtAnswer");
    if (document.attachEvent) {
      document.attachEvent("onblur", textBox, function() {
        SaveAnswer('&lt;%#Eval("ThisPAQID")%&gt;', '&lt;%#Eval("QuestionID")%&gt;', window.event.target.value);
      });
    } else {
      document.addEventListener("blur", textBox, function() {
        SaveAnswer('&lt;%#Eval("ThisPAQID")%&gt;', '&lt;%#Eval("QuestionID")%&gt;', this.value);
      }, false);
    }
  &lt;/script&gt;
&lt;/td&gt;
</code></pre>

<p><strong>Rest of Code:</strong></p>

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

<p>
  
</p>

<p>The generated code for the SaveAnswer now looks like this:</p>

<pre><code>&lt;tr&gt;
  &lt;td style="vertical-align: top; font-weight: bold;"&gt;
    &lt;span id="ctl00_body_lstQuestions_ctrl0_lstAnswers_ctrl0_lblQuestionID"&gt;1&lt;/span&gt;
  &lt;/td&gt;
  &lt;td style="vertical-align: top;"&gt;&lt;span id="ctl00_body_lstQuestions_ctrl0_lstAnswers_ctrl0_lblQuestionText"&gt;Written materials&lt;/span&gt;
  &lt;/td&gt;
  &lt;td style="vertical-align: top;"&gt;
    &lt;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;" /&gt;
  &lt;script type="text/javascript"&gt;
    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);
    }
  &lt;/script&gt;

  &lt;/td&gt;
  &lt;td style="vertical-align: top; font-size: -1;"&gt;E.g., books, reports, office notes, articles, job instructions, or signs&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>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. </p>
