J'essaie d'empêcher les demandes multiples lorsque l'utilisateur clique sur le bouton de connexion ou d'enregistrement. Ceci est mon code, mais cela ne fonctionne pas. Juste la première fois fonctionne bien, puis retourne false ..
$('#do-login').click(function(e) {
e.preventDefault();
if ( $(this).data('requestRunning') ) {
return;
}
$(this).data('requestRunning', true);
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize(),
success: function(msg) {
//stuffs
},
complete: function() {
$(this).data('requestRunning', false);
}
});
});
Des idées? Merci!
Le problème est ici:
complete: function() {
$(this).data('requestRunning', false);
}
this
ne pointe plus le bouton.
$('#do-login').click(function(e) {
var me = $(this);
e.preventDefault();
if ( me.data('requestRunning') ) {
return;
}
me.data('requestRunning', true);
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize(),
success: function(msg) {
//stuffs
},
complete: function() {
me.data('requestRunning', false);
}
});
});
Utilisez on()
et off()
, c’est leur fonction:
$('#do-login').on('click', login);
function login(e) {
e.preventDefault();
var that = $(this);
that.off('click'); // remove handler
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize()
}).done(function(msg) {
// do stuff
}).always(function() {
that.on('click', login); // add handler back after ajax
});
});
Vous pouvez désactiver le bouton.
$(this).prop('disabled', true);
Dans vos rappels ajax, le contexte (this
) change par rapport à la fonction externe. Vous pouvez le définir de la même manière en utilisant la propriété context dans $ .ajax.
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize(),
context: this, //<-----
success: function(msg) {
//stuffs
},
complete: function() {
$(this).data('requestRunning', false);
}
});
Ou vous pouvez le faire par $(this).addClass("disabled");
à votre bouton ou lien et après avoir cliqué, vous pouvez $(this).removeClass("disabled");
.
// CSS
.disabled{
cursor: not-allowed;
}
// JQUERY
$('#do-login').click(function(e) {
e.preventDefault();
$(this).addClass("disabled");
$.ajax({
type: "POST",
url: "/php/auth/login.php",
data: $("#login-form").serialize(),
context: this,
success: function(msg) {
//do more here
$(this).removeClass("disabled");
},
});
});
P.S. Si vous utilisez bootstrap css, vous n’avez pas besoin de la partie css.
J'ai trouvé l'approche utile. Je l'ai implémentée en tant que fonction polyvalente pour jQuery avec ES6.
export default function (button, promise) {
const $button = $(button);
const semaphore = 'requestRunning';
if ($button.data(semaphore)) return null;
$button.data(semaphore, true);
return promise().always(() => {
$button.data(semaphore, false);
});
}
Étant donné que $.ajax()
renvoie une promesse, il vous suffit de la transmettre et la fonction s'occupe du reste.
En gros, voici l'usage.
import preventDoubleClick from './preventdoubleclick';
...
button.click(() => {
preventDoubleClick(this, () => $.ajax()
.done(() => { console.log("success") }));
});