Steps to address the conflict arising from two simultaneous ajax requests

On my nominal.jsp page, I have included header.jsp. This is my first time using Ajax for the request in header.jsp. However, when a second Ajax request is made to the nominal.jsp, I encounter a conflict issue with the Ajax request. As a result of this problem, my preferred drop-down list does not display properly. Sometimes, when the response is entered in the JavaScript, the drop-downs are displayed correctly. But if the response is not entered in the JavaScript, the drop-downs do not appear. I've tried my best to resolve the issue but have been unsuccessful. Any help would be greatly appreciated.

Thank you,

Here is the code from my header.jsp:

<script>
headerDisplay();
function headerDisplay()
{   
    var url ='<%=request.getContextPath()%>/summary?operation=header';
    transactionRequest(url);    
}  

function transactionRequest(url)
{
    if (window.XMLHttpRequest) 
    {              
        req = new XMLHttpRequest();                   
        req.onreadystatechange = transactionResponse;                   
        try
        { 
            req.open("POST", url, true); //was get         
        }
        catch(e) 
        {
            alert("Problem Communicating with Server\n"+e);
        }                  
        req.send(null);
    }       
    else if (window.ActiveXObject) 
    { 
        // IE
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req)
        { 

            req.onreadystatechange = transactionResponse;  
            req.open("POST", url, true);
            req.send();
        }
    }  
}
function transactionResponse()
{         
    if (req.readyState == 4) 
    {
        if (req.status == 200) 
        {      
            var servletVal = req.responseText;      
            var myObject = eval('(' + servletVal + ')');                      
            var userId = myObject.userId;
        }
}

//... more code goes here

</script>


And here is the code from my nominal.jsp:


<%@include file="/pages/common/header.jsp"%>

<script>
function displayNominal()
{
    document.getElementById("ajaxLoading").style.display="block";
    var url ='<%=request.getContextPath()%>'+'/nominalList';
    postRequest(url);
}

function postRequest(url) 
{
    if (window.XMLHttpRequest) 
    {
        req = new XMLHttpRequest();
        req.onreadystatechange = nominalSelect;
        try 
        {
            req.open("POST", url, true);        
        } 
        catch (e) 
        {
            alert("Problem Communicating with Server\n" + e);
        }
        req.send(null);
    } 
    else if (window.ActiveXObject) 
    {
        // IE
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) 
        {
            req.onreadystatechange = nominalSelect;
            req.open("POST", url, true);
            req.send();
        }
    }
}

function nominalSelect() 
{
    if (req.readyState == 4) 
    {
        if (req.status == 200) 
        {
            var servletVal = req.responseText;
            var myObject = eval('(' + servletVal + ')');
            var userId = myObject.userId;
            if (userId == null || userId == "") 
            {
                window.location = '/accounts1/?status=session';
            }
        }
}

//... more code goes here

</script>

<body class="bodystyle" onload="displayNominal()">

<% if("N".equals(roleDemoStatus)) {%>
<!-- /#demo Header -->
    <div style="top: 0px; display: block;" id="header" class="fixed">
        <div class="outer">
            <h1 class="blog-title" style="text-align:center;margin-top:10px;"><span style="font-weight: normal; color:#777777; font-size: 30px;">accounts<font color="#5DA915">1</font>.co</span> Demo Only - <a href="https://accounts1.co/accounts1/pages/userRegistration/signup1.jsp"><font color="red">Click Here</font></a> To Use For Free Forever</h1>
        </div><!-- .outer -->
        <div style="display: block;" class="shadow"></div>
    </div>
<!-- /#Demo Header -->
    <%}  %> 
</body>   

Once again, thank you in advance.

Answer №1

Implement a strategy using a single callback and a try/catch block to maintain the request order:

function transactionResponse()
  {
  // Determine if this is the first callback or a subsequent one
  if (!!transactionResponse.state)
    {        
      try
        {
        // Handle POST data from the GET request
        }
      catch(e)
        {
        // Retrieve data from the GET request
        }
      }

  // Set state after the initial callback has been referenced
  else
    {
    transactionResponse.state = this;
    }        
  }

Additional Resources

  • Exploring Long Polling with jQuery and ColdFusion

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

A guide on incorporating and utilizing third-party Cordova plugins in Ionic 5

Attempting to implement this plugin in my Ionic 5 application: https://www.npmjs.com/package/cordova-plugin-k-nfc-acr122u I have added the plugin using cordova plugin add cordova-plugin-k-nfc-acr122u but I am unsure of how to use it. The plugin declares: ...

Writing a function to determine if an HTML element is present

Is there a way to create a function that checks for the existence of an element with a specific id? I have a list of IDs stored in an array: let CartArray = ["cart-0", "cart-1", "cart-2", "cart-3"]; This is the Java ...

Using intricate document text as the input parameter in Vue: A guide

I am currently working with this Vue code snippet: <script> var starting_point = '{{ form.content.data }}'; vm = new Vue({ el: '#editor', data: { input: starting_point }, computed: { compiledMarkdown: function () ...

Adding the data from an ajax object response to an array

I'm encountering an issue where my Ajax response is not being properly looped through each object and pushed into the array. I've been stuck on this problem for quite some time now. The Ajax response looks like this... {type:'blog_post&apo ...

Express.js is unable to redirect to a customized URL scheme

I'm currently having an issue with redirecting users to a custom URL scheme using Express.js in order to launch an app on my iPad (using "example://"). Below is the code I have written to handle the redirection from a button press on a page hosted on ...

Differences in efficiency when comparing the performance of controller functions designated within `$scope` versus `this` in AngularJS

When working with Angular, it is common practice to define methods in your controller by attaching them to either $scope or this: $scope.myFunction = function () { ... } Alternatively, you can attach methods to this, which is often used for communication ...

What could be causing my React app to consistently reload whenever I save a file in my project?

Hi there, I am currently working on a project using React, GraphQL, Node, and MongoDB. I have been trying to upload images to a folder within my app, but I am facing an issue with the app reloading after saving the file. I attempted to manage a local state ...

What is the best way to remove multiple IDs from req.params using Sequelize?

Is there a way to handle req.params that contain multiple IDs? I need to search for and delete these multiple IDs. Here is the code snippet: const ids = req.params; const masterFunders = await masterFunder.findOne({ where: { id: ids ...

Unexpected behavior occurs in ReactNative when the keyboard pushes the content away, causing issues with KeyBoardAvoidingView

Currently, I am working on integrating a small input form in react-native. However, I have encountered an issue where when I open the keyboard, it disrupts the layout and content of the form. I attempted using KeyBoardAvoidingView and ScrollView in vario ...

What is the necessity for an additional item?

After exploring the Angular Bootstrap UI and focusing on the $modal service, I came across an intriguing discovery. In their demo at 'http://plnkr.co/edit/E5xYKPQwYtsLJUa6FxWt?p=preview', the controller attached to the popup window contains an i ...

What is causing the issue of subdomains not functioning properly in express.js?

Currently, I am conducting some local experiments and have made changes to my hosts file. Here are the entries: 127.0.0.1 example.dev 127.0.0.1 www.example.dev 127.0.0.1 api.example.dev Below is the code I am using: var subdomain = req ...

What is the best way to prompt Leaflet to refresh the map display?

I'm facing a challenge while integrating Leaflet with React, where Leaflet seems to want control over the DOM rendering as well based on my research. Currently, I have countries being properly colored according to specific color codes derived from ba ...

I would like to display the array in several separate tags, instead of just one tag

The json array data has been successfully placed in the functionSupplement variable. If you were to output this <p>functionSupplement </p>, the result would look something like this. Is there a way for me to modify my code so that it functions ...

jQuery: Implementing JavaScript on a page asynchronously through Ajax without triggering execution

When utilizing jQuery to execute an ajax request and insert code into my page, the added code includes both HTML and JavaScript. It seems that the JavaScript code is not being executed! What steps can I take to ensure that the newly added JavaScript sourc ...

Oops! Looks like the 'opennebula' module is missing in your Meteor.JS project

I've attempted using meteorhacks:npm but encountered the same issues. While working on a Meteor.JS application with iron:router installed, I'm facing difficulties loading the NPM module "opennebula" (found at https://github.com/OpenNebula/addon- ...

Can an onSnapshot event be set up for an array in order to track changes?

In my system, each user is associated with multiple groups. Each user's group membership is stored as an array within their user document. Additionally, there is a tasks collection where each task contains an array of authorizedGroups that correspond ...

The Vue.js instance is referencing the "options" property or method during render, but it has not been defined

Working with Vue.js (and Inertia.js), I encountered an issue while trying to build a select element in my form. After compiling, the select appears empty, and the developer console in the web browser shows the following error: The property or method "opti ...

Choose the shared parent or ancestor among the nested elements using jQuery and CSS Selector

I need help identifying the shared parent element of multiple nested elements based on their inner text. Consider the following code: <unknown> <unknown class="unknown"> .... <unknown> <unknown& ...

Sending DataView to controller using JavaScript

Struggling to establish communication between the view and controller for updating values in the database using JavaScript, MVC, and Asp.Net. Here is a snippet of my view: function updateRejectType() { $("#btnvalider").click(function () { var IdRTD ...

Using JavaScript to access private methods in Node

When working on a node application, I encountered an error when calling the _validations function. I want to make sure that _vali is kept private, even though JavaScript does not inherently support private functions. What is the recommended way to achiev ...