AJAX error on Firefox only

Ahmad Jaber
Ahmad Jaber used Ask the Experts™
on
Good moning !

I use this code to edit the quantity of products from a button. With Chrome it goes very well but with Firefox it sends me an ajax error.
This happens when I change quantities quickly.
If I click on Chrome several times, everything is fine, but on firefox it crashes.
Can you guide me please?

function BTN_EDT(i){
	var $button = $(this);
	var val_R = document.getElementById("ARR_NumId_" + i).value;
	var val_Q = document.getElementById("ARR_Quantite_" + i).value;
    $.ajax({
		type : "POST",
        url: '_produit-update.php',
        cache: false,
		data: {val_R:val_R, val_Q:val_Q},
        error: function(e){console.log('Ajax Error',e);alert('Erreur Ajax');},
        success: function(response){console.log('Ajax Success',response); location.reload(true);}
    });
}

Open in new window

Thank you in advance
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Martyn SpencerSoftware Developer / Linux System Administrator

Commented:
The first thing to do is to tell us what the error given is. If you check the network tab, do you see the requests being issued? If so, are the parameters consistently showing correctly? What result code is being returned by the server? If it indicates a server error, have you checked the server logs? What is shown there?

Author

Commented:
Sorry, I've omitted these details ... I think pictures will speak for themselves:
If I click on Chrome several times, here's what I have:
CCC.png
however on firefox:
DDDD.pngAAA.pngBBB.png
I do not know if it helps :$
Martyn SpencerSoftware Developer / Linux System Administrator

Commented:
The error is being logged to the console but the value is "error", which is not overly helpful. It would be useful to see the results from the network tab for whenever "_produit-update.php" is being POSTed. If pressing the button repeatedly does not cause the same number of requests, the error is likely to be client-side. If you see a POST request to "_produit-update.php" each time you press the button, you should see a corresponding response. If so, what is the response?

An aside if a solution is not easily found. This is not not a fix, but one thing you could consider is disabling the button when making the AJAX request and re-enabling it on success or failure. That would prevent the user from repeatedly clicking. Naturally, it's better to determine why the error occurs, but equally, the user pressing the button repeatedly is (a) creating a load on your server/infrastructure and (b) nonsensical since one update should be sufficient. This also gives feedback that a request is being processed.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Multitechnician
Top Expert 2014
Commented:
replace your current function by the following one :
we use a timer (400ms) to wait the user stop to increase quantity before doing the call else we cancel the ajax call
        function BTN_EDT(index) {
            if(window["timer"+index]!=undefined) {
                console.log("call dropped!")
                clearInterval(window["timer"+index]);
            }
            (function($button, i) {
                window["timer"+index] = setTimeout(function () {
                    var val_R = $("#ARR_NumId_" + i).val();
                    var val_Q = $("#ARR_Quantite_" + i).val();
                    $.post('_produit-update.php?nocache='+(new Date().getTime()), { val_R: val_R, val_Q :val_Q })
                        .fail(function() {
                            console.log('Ajax Error',e);
                            alert('Erreur Ajax');
                        }).done(function (response) {
                            console.log('Ajax Success',response);
                            location.reload(true);
                        }).always(function() {
                            window["timer"+index] = undefined;
                        });
                }, 400);
            })($(event.target), index);
        }

Open in new window

Author

Commented:
Thank you very much to both of you and especially to you leakim971 for your code that works perfectly well!

Thank you again for your help!
leakim971Multitechnician
Top Expert 2014

Commented:
tout le plaisir est pour moi
you're welcome

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial