Call javascript after a code behind function has just populated a text box

Question

I have an aspx page with an asp button that calls a function from code behind in order to do some some stuff involving DLL files. The output of the function is stored in a textbox. I'd like to call a javascript function just after this textbox is filled up. None of the below attempts worked. Any tips?

<asp:TextBox ID="TextBox2" runat="server" Width="300px" onchange="javascript:Draw();"></asp:TextBox> <input type="text" size="20" id="TextBoxHtml" runat="server" onchange="Draw()" /></td> <input type="text" size="20" id="TextBoxHtml" runat="server" onblur="Draw()" /></td>

Summary of the code:

//File chart.aspx <!DOCTYPE html> <html> <head runat="server"> </head> <body> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Process" Width="100px" /> <asp:TextBox ID="TextBox2" runat="server" Width="300px" ></asp:TextBox> <script src="JavaScript.js"></script> </body> </html> //File chart.aspx.cs protected void Button1_Click(object sender, EventArgs e) { //Do some stuff ... TextBox2.Text = "200"; } //File: JavaScript.js function Draw() { //Do some stuff ... } document.addEventListener('DOMContentLoaded', function () { document.getElementById("MainTool_TextBox2").addEventListener('change', function () { Draw(); }); });

Have you tried handling this on a onload event of the body, or $(document).ready() in jQuery? — Seano666
– Seano666, Commented Dec 24, 2018 at 16:40

VDWWD · Accepted Answer · 2018-12-24 19:31:54Z

The TextBox is already filled with content after PostBack, so onchange or onblur are never triggered client side.

You can call it from code

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "callDraw", "Draw()", true);

Or check if the value is not empty and call Draw like this.

<script> $(document).ready(function () { if ($('#<%= TextBox2.ClientID %>').val() !== '') { Draw(); } }); </script>

Just to be more complete, it is also necessary to have "<script src="JavaScript.js"></script>" just after <body>

MPawlak · Accepted Answer · 2018-12-24 17:01:55Z

0

Try waiting until the DOM is loaded, then attach the event listener to the element.

document.addEventListener('DOMContentLoaded', function() { document.getElementById("TextBox2").addEventListener('change', function() { draw(); }); });

answered Dec 24, 2018 at 17:01

MPawlak

7155 silver badges18 bronze badges

6 Comments

Douglas Moura Over a year ago

I got this error: "SCRIPT5007: Unable to get property 'addEventListener' of undefined or null reference JavaScript.js (107,4) "

MPawlak Over a year ago

What actually ends up existing as the DOM element? As it appears in your browser's dev tools?

Douglas Moura Over a year ago

The cause of the error of the 'addEventListener' was the name of the text box. I think because runat="server", the name changes to "MainTool_TextBox2". Now the problem is not happening, but it has not solved my original issue. By debugging, I see the function "draw();" is not being called...Any idea of the reason?

Douglas Moura Over a year ago

With more tests, I see the function "draw();" is not being called just after the text box is filled by the code behind. It is called only when the user changes the text box. But this is not what I want to according to my original question. Any ideas?

MPawlak Over a year ago

Sounds good, then we should be able to just change the event we're listening to. Can you elaborate on what you mean by when the textbox filled? I don't quite understand.

|

Collectives™ on Stack Overflow

Call javascript after a code behind function has just populated a text box

2 Answers 2

1 Comment

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Related