ajax is providing identical data when called too frequently

Using my barcode scanner triggers the function below, but scanning multiple barcodes quickly results in duplicate data being processed.

The issue seems to be related to the async setting - when it's false, the process slows down significantly. Is there a solution to prevent receiving duplicate data?

function getUnReadBox() { 

$("#unReadBoxList").children().remove('li') ; 

$.ajax({ 
        dataType: "json",
        url: xxxx.php ,     
        success: saveUnRead , 
        error: function ( xhr , b , c ) { 
            $("#reportMsg").html ( "error" ) ;  },
        async: true }); 

}

function saveUnRead ( json ) { 

var i ; 
var new_item ; 
var msg ; 

for ( i in json ) { 
    new_item = '<li>' + json[i].PACKAGE_ID + "</li>" ; 
    $("#unReadBoxList").append ( new_item ) ; 
    scShipping.unReadBox ++ ; 

    $("#unReadBox").html ( msg ) ; 
}
$("#unReadBoxList").listview('refresh') ;
}

Edit

I made some additions:

$("#unReadBoxList").children().remove('li') ; 
 var d = new Date();
 var num = d.getTime();

var mySQL = scShipping.jsonUrl+'scTripUnRead.php?T='+scShipping.tripId+"&O="+scShipping.whichOp+"?date="+num ; 

$.ajax({ 
        dataType: "json",
        url: mySQL ,     
        success: saveUnRead , 
        error: function ( xhr , b , c ) { 
            $("#reportMsg").html ( "error" ) ;  },
        async: true }); 

}

Despite these changes, I'm still facing issues with duplicated data retrieval.

Answer №1

I faced a similar problem in the past like you did. The workaround I found was to include either a numerical timestamp or a date as a parameter when executing the php script. For instance:

xxxx.php?date=2014-03-28 20:54:52:03

This approach resolved the issue for me, hopefully it will do the same for you...

Answer №2

Perhaps this situation arises because the web browser has cached the data you requested. To prevent this from happening, you can try the following:

  1. Utilize POST instead of GET in your request. Set POST as the value for the type parameter in the $.ajax method.

  2. Turn off caching. Set false for the cache parameter in the $.ajax method.

  3. Add an extra parameter and value to the URL, such as a random number or timestamp, like xxxx.php?t=Math.random() or xxxx.php?t=new Date(). This ensures that your request URLs are unique, preventing the response data from being cached.

Answer №3

Following the advice of @user3311636, consider adding an additional parameter to your Ajax call code. This will prevent the server or browser from caching the response.

Here is an example implementation (credit goes to @user3311636, I have included the entire function for clarity):

$.ajax({ 
    dataType: "json",
    url: "xxxx.php?date=2014-03-28 20:54:52:03" ,     
    success: saveUnRead , 
    error: function ( xhr , b , c ) { 
        $("#reportMsg").html ( "error" ) ;  },
    async: true }); 

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

The captivating logo animation of Google Chrome

For optimal viewing experience, it is recommended to use Chrome or any WebKit browser. https://www.google.com/intl/en/chrome/browser/ Hovering over the chrome logo reveals an amazing effect. I tried downloading the page source, but got lost in it. The s ...

Can a single file in NextJS 13 contain both client and server components?

I have a component in one of my page.tsx files in my NextJS 13 app that can be almost fully rendered on the server. The only client interactivity required is a button that calls useRouter.pop() when clicked. It seems like I have to create a new file with ...

What are the steps for integrating Socket.IO into NUXT 3?

I am in search of a solution to integrate Socket.IO with my Nuxt 3 application. My requirement is for the Nuxt app and the Socket.IO server to operate on the same port, and for the Socket.IO server to automatically initiate as soon as the Nuxt app is ready ...

Gridsome server-side rendering encounters issues with Auth0 authentication when the window object is not defined

After successfully following the Auth0 Vuejs tutorial with Gridsome during development, I encountered a problem when trying to build using gridsome build. The build failed because window was undefined in a server context. I discovered some issues in the A ...

Issues with Angular route links not functioning correctly when using an Array of objects

After hard coding some routerLinks into my application and witnessing smooth functionality, I decided to explore a different approach: View: <ul class="list navbar-nav"></ul> Ts.file public links = [ { name: "Home&quo ...

How can you conceal an HTML element when the user is using an iOS device?

I need the code to determine if a user is using an iOS device and, if not, hide the HTML input type "Play" button. So, I'm uncertain whether my iOS detection is correct, the hiding of the "Play" button in the code, or both: <!DOCTYPE html> < ...

What is the correct way to send an HTTP error code to an error handling middleware?

Currently, I am in the process of developing a RESTful API using node.js and express framework. I would like to create a single error handling middleware for this project. The approach I am currently considering involves: router.get('/some-resource&a ...

Transforming jQuery Object into a String after making an AJAX request

If I were to submit a form with some text in the value of user_input, let's say "I am free," through AJAX, and it comes back to me as a string. Once it becomes an Object, how could I convert it back into a string format? Thanks, <!DOCTYPE HTML> ...

Establishing Redux States within the Provider (error: Provider encountering useMemo issue)

Exploring redux for state management has been a new journey for me. I am hoping it will help reduce API calls and increase speed, but I've hit a roadblock with an error that I can't seem to figure out. To troubleshoot, I created a simplified vers ...

The footer seems to be losing its stickiness and not staying at the bottom when I

My goal is to create a sticky footer for my webpage. Once you click the add new sports button, a drawer slides out and the footer remains fixed at the bottom. However, as I scroll down the page, the footer moves up instead of staying in place. I have tried ...

Sorting and dividing an Array using Angular

Forgive me in advance if this sounds like a naive question, as Angular and Typescript are not my strong suits. I am assisting a friend with an issue that I can't seem to overcome. I have an array of players that includes details such as first name an ...

Choosing HTML elements within nested DIV tags

In the process of creating a Hangman-style game using javascript/jQuery, I encountered an issue with selecting HTML content from virtual keyboard keys : <div class="square keyboard"> <div class="content"> <div class="table"> ...

Enliven the character limit reaction by incorporating a thrilling shake animation when it reaches

I have implemented a feature in my component where if a user reaches the character limit, the component should shake. However, despite my efforts, the shaking effect is not working in the current code. const useStyles = makeStyles(() => ({ shake ...

Invoke the identical function in between two functions that make asynchronous AJAX calls

I seem to be a little lost at the moment. The code snippet below illustrates my intent, which is to use the insertChilds() function to insert child elements in the DOM in a cascading manner (or at least that's what I'm aiming for...). The challe ...

Vue.js Interval Functionality Malfunctioning

I'm brand new to Vuejs and I'm attempting to set an interval for a function, but unfortunately it's not working as expected. Instead, I am encountering the following error: Uncaught TypeError: Cannot read property 'unshift' of u ...

Best practices for updating the token in an Angular 2/5 application - tips on how, where, and when to refresh

Currently I am utilizing the following technologies: Django REST Framework Angular 5 RxJS + OAuth2 Within all components paths except LoginComponent, I have an AuthGuard to verify the token data stored in localstorage of the browser. If valid data is ...

Encountering a User Agent error while trying to update Vue to the latest version using N

I was interested in experimenting with staging.vuejs. When I tried to install it using the command npm init vue@latest, I encountered an error. Here is the link for reference: https://i.stack.imgur.com/rCipP.png SPEC Node : v12.13.0 @vue/cli : v4.5.15 ...

Ensure that dynamic functions are accurately typed within a proxy utilizing TypeScript

I am currently working on a unique function that utilizes a Proxy with a get trap to extract functions from multiple objects. The challenge I am facing is getting TypeScript to recognize these functions at compile time so that I can add them to my interfac ...

Here's a guide on executing both GET and POST requests using a single form

Currently, I am developing a web application which involves using a GET request to display checkboxes in a form. The selected data from the checkboxes needs to be sent back to the server using a POST request. However, I'm facing an issue with performi ...

Angular is reporting that the check-in component is nonexistent

I encountered an error in my Angular 8 application while working on a component. The error seems to be related to nested components within the main component. It appears that if the component is empty, the error will be shown, but if it's not null, th ...