Delay in Response of OnTextChanged Event in ASP.NET

Question

Delay in Response of OnTextChanged Event in ASP.NET

The functionality is there, but it doesn't respond immediately. It only works when I click on something.

I attempted using the onkeyPress method as well:

<asp:TextBox ID="txtWriter" runat="server" onkeyPress="txtOnKeyPress"  ></asp:TextBox>

However, I'm getting an error message saying:

Attribute 'onkeyPress' is not a valid attribute of element 'TextBox'.

javascript asp.net

Answer 1

Answer №1

What is the preferred version of ASP.NET? I have found success with the following method^*:

<script>
    function txtOnKeyPress() {
        console.log("txtOnKeyPress");
    }
</script>
<asp:TextBox ID="txtWriter" runat="server" onkeypress="txtOnKeyPress<b>()</b>" />

_{^*However, I did make sure to include () in the function name.}

If ASP.NET encounters a problem with that attribute name, you can alternatively set up a client-side handler. Depending on your requirements, using the input event might be more suitable. It functions as a dynamic change event that triggers while the input value is being modified (through keystrokes, cut, paste, etc). Below is an example:

document.querySelector("input").addEventListener("input", function(e) {
  console.log("value: %o", this.value);
});

<input autofocus placeholder="type here"></input>

_{Please refer to browser compatibility here.}

The previous example will trigger with every single modification to the input value… which could add up, for instance: 4 times simply by typing “test”. To ensure it calls your server-side code, we need to delay posting the form until after any rapid consecutive changes have been made:

function __doPostBack(name, argument) {
  // simplified version of ASP.NET's __doPostBack  
  console.log("value: %o", document.getElementsByName(name)[0].value);
}

var t; // handle for our timeout
document.querySelector("input").addEventListener("input", function(e) {
  // input received... cancel the previous timeout, if any
  clearTimeout(t);
  // wait 1000 milliseconds (1 second) for more input before posting
  t = setTimeout(__doPostBack, 1000, this.name);
});

<input autofocus placeholder="type here" name="test-input"></input>

_{See also:}

window.<a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout" rel="nofollow noreferrer">setTimeout()</a>

,

document.<a href="https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector" rel="nofollow noreferrer">querySelector()</a>

,

document.<a href="https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName" rel="nofollow noreferrer">getElementsByName</a>

, and

EventTarget.<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener" rel="nofollow noreferrer">addEventListener()</a>

.

In your code behind:

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack && Request.Form["__EVENTTARGET"] == txtWriter.UniqueID) {
        GridView1.DataSource = /* some data source */;
        GridView1.DataBind();
    }
}

Answer 2

What is the preferred version of ASP.NET? I have found success with the following method^*:

<script>
    function txtOnKeyPress() {
        console.log("txtOnKeyPress");
    }
</script>
<asp:TextBox ID="txtWriter" runat="server" onkeypress="txtOnKeyPress<b>()</b>" />

_{^*However, I did make sure to include () in the function name.}

If ASP.NET encounters a problem with that attribute name, you can alternatively set up a client-side handler. Depending on your requirements, using the input event might be more suitable. It functions as a dynamic change event that triggers while the input value is being modified (through keystrokes, cut, paste, etc). Below is an example:

document.querySelector("input").addEventListener("input", function(e) {
  console.log("value: %o", this.value);
});

<input autofocus placeholder="type here"></input>

_{Please refer to browser compatibility here.}

The previous example will trigger with every single modification to the input value… which could add up, for instance: 4 times simply by typing “test”. To ensure it calls your server-side code, we need to delay posting the form until after any rapid consecutive changes have been made:

function __doPostBack(name, argument) {
  // simplified version of ASP.NET's __doPostBack  
  console.log("value: %o", document.getElementsByName(name)[0].value);
}

var t; // handle for our timeout
document.querySelector("input").addEventListener("input", function(e) {
  // input received... cancel the previous timeout, if any
  clearTimeout(t);
  // wait 1000 milliseconds (1 second) for more input before posting
  t = setTimeout(__doPostBack, 1000, this.name);
});

<input autofocus placeholder="type here" name="test-input"></input>

_{See also:}

window.<a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout" rel="nofollow noreferrer">setTimeout()</a>

,

document.<a href="https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector" rel="nofollow noreferrer">querySelector()</a>

,

document.<a href="https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName" rel="nofollow noreferrer">getElementsByName</a>

, and

EventTarget.<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener" rel="nofollow noreferrer">addEventListener()</a>

.

In your code behind:

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack && Request.Form["__EVENTTARGET"] == txtWriter.UniqueID) {
        GridView1.DataSource = /* some data source */;
        GridView1.DataBind();
    }
}

Delay in Response of OnTextChanged Event in ASP.NET

Answer №1

Similar questions

Using jQuery to access the ID of a div and create a custom close button

The jquery script tag threw an unexpected ILLEGAL token

Having trouble with the Document.createElement function not functioning properly when trying to download a

Create a self-bot that can generate a new server

Adding styling to my project using @material-ui v5 has resulted in a CSS rule being injected, although I did not define it myself

How to eliminate subdomains from a string using TypeScript

Retrieving the ID value and activating a click function for each link sharing a common class using jQuery

In a Javascript scenario, only the initial button can successfully submit to an Ajax form even when having unique

Tips for compressing user data in JavaScript prior to transmitting it to the server using zip/gzip technology

Exclude the CSS file from all elements except for the ones that are being appended to a specific div

Incorrect behavior of responsive background images

Encountering a 'TypeError: app.address is not a function' error while conducting Mocha API Testing

Send information to a function until the array reaches its maximum length

The result of the $.post() request is back

"Did you come across `item()` as one of the methods within the array

MongoDB Stitch retrieves all data fields

Is there a way to dynamically create a Vue component for every tier of a nested JSON object without prior knowledge of the total number of tiers available?

Incorporating a hyperlink into an Iframe triggered by Fancybox2-AJAX, specific to the Iframe's unique identifier

After props have been passed, the ReactJS ComponentWillMount() function is triggered

Unable to retrieve dynamic controls (within ascx) using javascript (on aspx page)