Ajax undoes any modifications enacted by JavaScript

Question

Ajax undoes any modifications enacted by JavaScript

When using ajax, I trigger an OnTextChangedEvent. Before this event occurs, there is a Javascript function that validates the input field and displays text based on its validity. However, once the Ajax is executed, it resets any changes made by the Javascript in the following sequence:

Javascript triggers!

Text changes are displayed

Ajax triggers!

Text changes are reset

The Ajax partial autopostback is enclosed within an update panel. Does anyone have ideas on how to prevent the reset of changes made by the Javascript? Any insights would be appreciated. I will update with code as I can throughout the day. Thank you in advance.

c#javascript asp.net ajax

Answer 1

Answer №1

Modifications to the DOM model do not get sent to the server. When the ajax request is triggered, any changes made by JavaScript in the DOM will be overwritten.

The solution is to send the validation texts to the server and then add them back through an ajax call.

Answer 2

Modifications to the DOM model do not get sent to the server. When the ajax request is triggered, any changes made by JavaScript in the DOM will be overwritten.

The solution is to send the validation texts to the server and then add them back through an ajax call.

Answer 3

Answer №2

When an update occurs, the UpdatePanel completely refreshes its contents. This results in any previously subscribed events being lost due to the new elements present in the updated panel.
For more details, check out the complete answer here

To address this issue, include the following script within your Page or MasterPage:

<script type="text/javascript">
  Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

  function EndRequestHandler(sender, args)
  {
    Validate(); //method that checks input fields
  }   
</script>

Answer 4

When an update occurs, the UpdatePanel completely refreshes its contents. This results in any previously subscribed events being lost due to the new elements present in the updated panel.
For more details, check out the complete answer here

To address this issue, include the following script within your Page or MasterPage:

<script type="text/javascript">
  Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

  function EndRequestHandler(sender, args)
  {
    Validate(); //method that checks input fields
  }   
</script>

Ajax undoes any modifications enacted by JavaScript

Answer №1

Answer №2

Similar questions

What could be causing the Autocomplete feature to display as undefined?

The functionality of AJAX is hindered in the browser when attempting to fetch data from a URL

Converting a PHP string into a JSON array

Is there a way for me to insert a variable into the src attribute of my img tag like this: `<img alt="Avatar" src=`https://graph.facebook.com/${snAvatarSnuid}/picture`>`

Utilizing AngularJS: Transforming JSONP information into HTML

Is there an issue with MVC5 in passing JSON data to Controller using Ajax?

jQuery does not support animations for sliding up or down

When the canvasJS range column chart is below the horizontal axis, modify the color and width of the bars

Transformation of Array of Objects to Array of Values using Node.js

Utilize jQuery to target elements containing more than one class

Retrieve the Content-Type header response from the XHR request

Creating a custom image component in React that is capable of rendering multiple images

Google's AJAX crawling scheme using the shebang syntax is failing to crawl pages

Utilizing ReactJS and TypeScript to retrieve a random value from an array

Choose a particular optgroup simultaneously using custom JavaScript

Contemplating the Sequence of DOM Execution

The selected element does not support the addition of setSelectionRange

Increase the options available in the dropdown menu by adding more selected items, without removing any already selected

What is the best way to extract the value from a textfield and then merge it with

Refresh the html of the contenteditable element with the most recent targeted information from the textarea