Inconsistency in the invocation of PageMethod within AJAX script manager

My AJAX call to a method in the code-behind seems to be unreliable even though I have everything set up correctly.

The JavaScript function utilizes PageMethods to invoke the method in the code-behind. While most of the time it works fine, occasionally it fails to call the method without any apparent pattern.

I'm puzzled as to why it sometimes doesn't work and there doesn't seem to be any consistent reason for the failures.

This issue occurs when clicking a link in a child window where you can repeatedly click the same link and successfully trigger the method multiple times before encountering a sudden failure.

The AJAX call in the parent window:

function Update(custtype) {
    PageMethods.CustType(custtype)
}

The script in the child window that initiates the function:

<script type="text/javascript">
    function sendval(value) {
        window.parent.onSave();
        window.parent.Update(value);
        window.top.document.getElementById('txtCustomerType').value = value;
        window.parent.location.reload()
        }
    </script>

The method in the parent window that is intermittently not called:

[System.Web.Services.WebMethod]
public static string CustType(string custtype)
{
    HttpContext.Current.Session["CustType"] = "";
    HttpContext.Current.Session["CustType"] = custtype;
    return custtype;
}

Answer №1

Seems like a competition - the location.reload function is causing the page to reload faster than the MS-Ajax infrastructure can handle, resulting in a race condition. To avoid this issue, it's important to place all subsequent code within the onSuccess callback function.

function sendval(value) {
   window.parent.onSave();
   window.parent.Update(value, onSuccess, /*onFailure*/);
   function onSuccess(result){
      window.top.document.getElementById('txtCustomerType').value = value;
      window.parent.location.reload()
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to create a self-referencing <div> in HTML?

After extensive research, I turn to seeking advice and guidance on Stack Exchange. I have a seemingly straightforward goal in mind. I want to create a <div> id/class that will automatically generate a link to itself using scripting of some sort. Be ...

Is there a way to automatically change specific characters as a user types in an input field?

I'm facing an issue with replacing some characters dynamically. The goal is to ensure that user-input text is URL-friendly for constructing a URL: function slugify(string) { const a = "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïí ...

Questions and confusion surrounding Ajax with Jquery

What is the purpose of including jquery.mn.js file in the SCRIPT tag for form validation and other jquery and ajax applications? Is there a specific location to download this file, and where should it be saved on a personal computer? ...

Encountering a message error for the Collapse component in Material UI

I'm currently working on creating a hamburger menu using Material UI List in Next.js, inspired by the Nested List example in the Material UI documentation. However, I've encountered an error when using "collapse" in my code. The rest of the code ...

What could be causing the JQuery Post and Get methods to not respond or execute when they are invoked?

I'm currently working on a project where I need a webpage to automatically open other pages using the post method through a script, without requiring direct user input. I've tried using the JQuery post method, but haven't had any success so ...

Is there a way to incorporate a method into a JavaScript object dynamically without encountering any unusual errors?

I am dealing with an array of JavaScript objects that I need to modify. Here is an example of the initial setup: let headers = [ { text: 'something', value: 'something else' }, { text: 'something1', value ...

Using AngularJS's $watchCollection in combination with ng-repeat

Encountering difficulties receiving notifications for changes in a list when utilizing an input field within ng-repeat directly. However, I am able to modify values and receive notifications from $watchCollection. To illustrate: <!DOCTYPE html> < ...

Combining two sets of JSON data in JavaScript with JQUERY

I am looking to combine two JSON datasets using JavaScript or jQuery. var object1 = [{ "id": 11, "name": "Vasanth", "username": "Vasanth.Rajendran", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c5a ...

Opinions on crafting a new gadget?

I will only provide each website interested in my widget with the code to copy and paste once. It is crucial that the code is future-proof. After much consideration, this is the widget code I have developed: <script type="text/javascript" src="http:/ ...

Two separate entities link to a shared occurrence

Two namespaces are at play here: '/' and /notification If I trigger an event in the '/' namespace, how can I listen to the same event in the '/notification' namespace? It would be helpful if someone could provide an explanati ...

Rails successfully processed the request with a 200 OK status code, however, the $.ajax() function is triggering the 'error' callback instead of the 'success' callback

In my controller, the ajax request is handled as shown below (simplified): def create ... @answer = Answer.new(video: video_file) if @answer.save render json: @answer.video.url else ... end end This is how I have defined my ajax function: $.aja ...

Utilize React-markdown to interpret subscript text in markdown format

I tried to create subscript text in an .md file using the following syntax: x_i x~i~ Unfortunately, react-markdown did not interpret this as subscript. After some research, I discovered the package remark-sub-super and implemented it with the plugin ...

Mapping prop passed to client component in NEXT 13: A step-by-step guide

Hello, I'm currently navigating through the Next 13 APP directory and have encountered a scenario where everything functions smoothly when I integrate the server component as shown below: const Tasks = async () => { const { tasks } = await getAll ...

Encountering a next-i18next 404 error while attempting to access pages with localeSubpaths configuration enabled

I have encountered a 404 error while trying to access any page of my Next.js application. The application functions properly when the localeSubpaths configuration is not provided. However, upon implementing the localeSubpaths config in next.config.js: co ...

Exploring Next.js with getServerSideProps

My code has a warning from the console attached. I would appreciate it if someone could help me identify the problem... When I use the "data" hardcoded as props, I can display them in the components, but when I try to fetch from an API, I can retrieve the ...

In order to ensure that the multiselect bootstrap dropdown options drop outside of the div and prevent scroll bubbling, there are specific

I am trying to customize a bootstrap multiselect dropdown located within a div. You can find an example of what I'm working on at this link: http://jsfiddle.net/The_Outsider/8watL2L1/9/ In my design, I want the multiselect dropdown options to drop ou ...

Is it possible to alter the page color using radio buttons and Vue.js?

How can I implement a feature to allow users to change the page color using radio buttons in Vue.js? This is what I have so far: JavaScript var theme = new Vue({ el: '#theme', data: { picked: '' } }) HTML <div ...

Multiple tabs open with inactive sessions

I am currently facing an issue regarding user idle timers in jQuery. I have implemented a timer that logs the user out of the app if they are inactive for 30 minutes, and this works perfectly with one browser tab open. However, I now need to extend this ...

Guide to display half of an image and allow for full image viewing upon mouse hover

After creating my bootstrap 4 website, I encountered an issue with the code below where only half of the image is displayed initially due to a conflict in the code. It also fails to work properly when moving the mouse after shifting the whole image from ri ...

Attempting to utilize ng-click on an element that has been added using element.append() in the postlink phase?

I have been working on customizing a particular angular library to incorporate some new features. https://github.com/southdesign/angular-coverflow/blob/master/coverflow.js As part of this process, I am looking to attach click events to the elements being g ...