CODEWITHSUNDEEP
jqueryajaxtwitter-bootstrap
Ramesh Pareek
Ramesh Pareek

Reputation: 1669

prevent duplicate ajax calls from bootstrap modal?

In a bootstrap modal, when the user presses Enter, an ajax call is triggered, 

$('#amount').keypress(function(event){
    if(event.which==13) {
        $( "#final" ).trigger( "click" ); // this triggers the ajax call
    }

});

But if accidentally if a user presses the enter key for long, too many submissions are made and thus, unwanted records are entered in the database. How do I stop this unexpected behaviour? Are there any best practices in such cases?

Upvotes: 1

Views: 756

Answers (1)

pumpkinzzz
pumpkinzzz

Reputation: 2967

I don't know if it's a best practice or not, but i would do this way

window.alreadySubmit = false;
$('#amount').keypress(function(event){
    if(event.which==13 && !alreadySubmit) {
        window.alreadySubmit = true;
        $( "#final" ).trigger( "click" ); // this triggers the ajax call
    }

});

then in your ajax success callback reset the windowd.alreadySubmit variable to false

alernatively you can just set a timeout, like this:

var myTimeout = 3000; //ms = 3 seconds
window.alreadySubmit = false;

$('#amount').keypress(function(event){
    if(event.which==13 && !alreadySubmit) {
        window.alreadySubmit = true;
        $( "#final" ).trigger( "click" ); // this triggers the ajax call
        setTimeout(function(){ window.alreadySubmit = false; }, myTimeout);
    }

});

Upvotes: 3

Related Questions