Empêcher un lien, puis confirmer et emplacement goto jquery
-
26-10-2019 - |
Question
J'ai des liens comme celui-ci.
<a href="delete.php?id=1" class="delete">Delete</a>
Si un utilisateur clique dessus. Une confirmation doit popups et seulement si l'utilisateur cliquez sur oui, il devrait goto l'URL.
Je sais que cela peut empêcher le comportement par défaut
function show_confirm()
{
var r=confirm("Are you sure you want to delete?");
if (r==true) { **//what to do here?!!** }
}
$('.delete').click(function(event) {
event.preventDefault();
show_confirm()
});
Mais comment puis-je continuer à ce lien ou envoyer un message ajax à ce lien après confirmation?
La solution
vous pouvez tout faire dans le clic:
$('.delete').click(function(event) {
event.preventDefault();
var r=confirm("Are you sure you want to delete?");
if (r==true) {
window.location = $(this).attr('href');
}
});
Ou vous pouvez le faire en passant l'élément clicked à la fonction:
function show_confirm(obj){
var r=confirm("Are you sure you want to delete?");
if (r==true)
window.location = obj.attr('href');
}
$('.delete').click(function(event) {
event.preventDefault();
show_confirm($(this));
});
Autres conseils
Il m'a fallu un certain temps pour comprendre cela, alors je me suis je poste ma solution.
$('.delete').click(function(e){
if(confirm('Are you sure?')){
// The user pressed OK
// Do nothing, the link will continue to be opened normally
} else {
// The user pressed Cancel, so prevent the link from opening
e.preventDefault();
}
}
Je pensais à confirmer la mauvaise façon. Confirmer empêchera le site d'ouvrir automatiquement, et attendez l'entrée de l'utilisateur. Donc, fondamentalement, vous devez déplacer votre preventDefault à l'autre.
Alors vous empêchez que le lien d'ouverture si elles cliquez sur Annuler. Cela permet également le lien vers la fonction comme il le ferait normalement, par exemple si elle a un target = « _ blank » instruction.
function show_confirm(url){
var r=confirm("Are you sure you want to delete?");
if (r==true){
location.top.href = url;
}
}
$('.delete').click(function(event) {
event.preventDefault();
show_confirm($(this).attr('href'));
});
Si vous souhaitez utiliser ajax vous pouvez remplacer location.top.href = url;
avec $.get(url);
function show_confirm(elem)
{
var r=confirm("Are you sure you want to delete?");
if (r==true) {
window.location.href = elem.href;
}
}
$('.delete').click(function(event) {
event.preventDefault();
show_confirm(this)
});
Ceci est une forme courte:
$('.delete').click(function(){return confirm("Are you sure you want to delete?")});
Je l'utilise sur des sites Web pour le téléchargement / confirmation de lien.
Pour le code en fonction optimize show_confirm, essayez d'utiliser ci-dessous:
function show_confirm(obj){
if(confirm("Are you sure you want to delete?")) window.location = obj.attr('href');
}
vous pouvez faire
function show_confirm()
{
if(confirm("Are you sure you want to delete?")){
//make ajax call
}else{
//no ajax call
}
}
$('.delete').click(function() {
if (confirm('Are you sure?')) {
$.post($(this).attr('href'), function() {
// Delete is OK, update the table or whatever has to be done after a succesfull delete
....
}
}
return false;
}
Si vous souhaitez utiliser alerte / confirmer, c'est la meilleure façon (je préfère utiliser Bootstrap Confirmation ou bootbox ):
$('.confirm-delete').click( function( event ) {
if ( !confirm('Are you sure?') ) event.preventDefault();
});