Javascript code not being executed

Question

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.

do textBox.attachEvent not document.attachEvent (also for addEventListener) (remove the textBox attribute from both too) — JCOC611
– JCOC611, Commented Jan 31, 2011 at 22:51

Victor · Accepted Answer · 2011-02-01 16:48:19Z

2

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);" />

edited Feb 1, 2011 at 16:48

answered Jan 31, 2011 at 22:54

Victor

4,7311 gold badge29 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bob Jones Over a year ago

When I try setting textBox = document.getElementById("<%=txtAnswer.ClientID %>", the compiler barfs and says "txtAnswer does not exist in the current context." What I did not show in the code is that lstAnswers is nested within another listview, so the id of ListView doesn't get defined until the ItemDataBound of the parent listview executes.

Victor Over a year ago

added a suggestion to the answer.

Bob Jones Over a year ago

The edit doesn't work because "Code blocks are not supported in this context".

JCOC611 · Accepted Answer · 2011-01-31 22:58:55Z

0

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.

answered Jan 31, 2011 at 22:58

JCOC611

19.8k15 gold badges72 silver badges90 bronze badges

2 Comments

Bob Jones Over a year ago

The code looks right, but it doesn't execute. I put a breakpoint on the var = textBox line and it never gets there. How do I associate this code with the text box?

JCOC611 Over a year ago

run this code after the document has loaded (ex. place the <script> tag at the end of the body). Any element has a method attachEvent or addEventListener, in your code you where appending the event to the document, but you can append it directly to your element.

Collectives™ on Stack Overflow

Javascript code not being executed

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related