Bob Jones
Bob Jones

Reputation: 2048

Javascript code not being executed

I have a nested ListView (Master/Detail) questionaire that was described in this posting: The inner list item must call a server method with three arguments. Thanks to several of you, I have code that properly generates the JavaScript; however, that code is not actually firing. Here is the declaration of the inner list view:

<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="lblPAQID" runat="server" Text='<%#Eval("ThisPAQID") %>' Visible="false" />
            <asp:Label ID="lblPAQVersion" runat="server" Text='<%#Eval("PAQVersion") %>' Visible="false" />
            <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" Class="PAQAnswer" Text='<%#Eval("Answer")%>' />
              <script type="text/javascript">   **THIS SCRIPT IS NOT FIRING**
              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>
      </tr>
  </ItemTemplate>
</asp:ListView>

The generated code looks like this:

<input name="lstQuestions$ctrl0$lstAnswers$ctrl0$txtAnswer" type="text" value="2.0" maxlength="3" id="lstQuestions_ctrl0_lstAnswers_ctrl0_txtAnswer" Class="PAQAnswer" 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>

The embedded values in the SaveAnswer calls are correct; however, I don't know how to tie the input statement to the JavaScript. Probably amazingly simple, but I don't see it... yet.

Upvotes: 0

Views: 395

Answers (2)

Victor
Victor

Reputation: 4721

this line looks like the problem:

var textBox = document.getElementById("txtAnswer");

txtAnswer is not the actual ID of the control, so your script is not finding it. The ID of the input is lstQuestions_ctrl0_lstAnswers_ctrl0_txtAnswer

You should try something like:

var textBox = document.getElementById("<%= txtAnswer.ClientID %>");

which would translate to:

var textBox = document.getElementById("lstQuestions_ctrl0_lstAnswers_ctrl0_txtAnswer");

EDIT: Why not do this instead?

<asp:TextBox ID="txtAnswer" runat="server" Class="PAQAnswer" Text='<%#Eval("Answer")%>' onBlur="SaveAnswer('<%#Eval("ThisPAQID")%>', '<%#Eval("QuestionID")%>', this.value);" />

Upvotes: 2

JCOC611
JCOC611

Reputation: 19719

Try attaching the event like this:

var textBox = document.getElementById("txtAnswer");
if (textBox.attachEvent) {
  textBox.attachEvent("onblur", function() {
    SaveAnswer('13242', '1', window.event.target.value);
  });
} else {
  textBox.addEventListener("blur", function() {
    SaveAnswer('13242', '1', this.value);
  }, false);
}

PS: I Think Victor is right too, txtAnswer isn't the actual ID of your node.

Upvotes: 0

Related Questions