Popup de confirmation avec Bootstrap

**Erixx** · 28/04/2015, 19h19

Schuss,

Je débute en css+html+JS, je souhaite que quand on clic sur une image delete, une popup de confirmation s'affiche.
J'ai trouvé cet exemple qui me convient : lien
mais je n'arrive pas à l'appliquer.

J'ai mis les 3 fichiers js au meme niveau que le fichier html et que l'image delete, mais quand je clic sur l'image, il se passe rien.

Chose bizarre : le mot clé data-toggle n'apparait dans aucun des 3 fichiers JS.
L'un(e) de vous aurait-il une idée de comment il faut faire ?

Lien vers bootstrap-tooltip.js : lien
Lien vers bootstrap-confirmation.js : lien
Le code des 3 fichiers js apparaissent bien dans "l'inspecteur" de Chrome.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
	<script type="text/javascript" src="jquery-1.7.1.js"></script>
	<script type="text/javascript" src="bootstrap-tooltip.js"></script>
	<script type="text/javascript" src="bootstrap-confirmation.js"></script>
</head>
<body>
	<img onclick="removeOneAccount(14);" src="icon-delete.png" class="icoConsult" data-toggle="confirmation"/>
 
 
</body>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script>
$('#example').confirmation(options)
$('[data-toggle="confirmation"]').confirmation(options)
     function removeOneAccount(id) {
		alert("Id : " + id);
     }
</script>

**Darkaurora** · 28/04/2015, 20h06

Il semble manquer quelque chose d'indispensable dans ton code... le style css de bootstrap est requis pour que cela fonctionne. Sinon ton code semble ok.

**NoSmoking** · 28/04/2015, 20h42

Bonjour,
au passage options est défini où ?

Chose bizarre : le mot clé data-toggle n'apparait dans aucun des 3 fichiers JS.

effectivement mais tu trouveras toggle, il s'agit simplement de dataset des éléments HTML.

Comprendre les attributs personnalisés HTML5, par Bovino

**Erixx** · 28/04/2015, 23h41

Grâce à vos conseils, j'ai réussi à avoir la popup "Etes vous sur ? Oui Non", MAIS après je vois pas comment appeler la méthode javascript delete() dans le cas où on clique sur "Yes"
La page web qui explique cette popup (lien) mentionne : "onConfirm ... function(){} ... Set event when click at confirm button"
Pourtant "data-onConfirm="deleteItem(14)" ne donne rien.
Est-ce que vous voyez comment faire ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
	<script type="text/javascript" src="jquery-1.7.1.js"></script>
	<script type="text/javascript" src="bootstrap-tooltip.js"></script>
	<script type="text/javascript" src="bootstrap-confirmation.js"></script>
	<link rel="stylesheet" type="text/css" href="bootstrap-3.2.0.css" media="screen" />
</head>
<body>
      <a id="example" data-toggle="confirmation"            ---> OK
                               data-title="Etes vous sur ???"         ---> OK
                               data-btnOkLabel="Oui"                  ---> OK
                               data-btnCancelLabel="Non"            ---> OK
                               data-placement="right"                  ---> OK
                               data-onConfirm="deleteItem(14)"   ---> KO : fonction  n est pas appelée ...
                               data-target="deleteItem(14)"         ---> KO : fonction n est pas appelée ...
			style="padding-left:20%;">
               <img src="icon-delete.png" width="50px"/>    <----- icone où quand on clique dessus, une popup demande "Etes vous sur ? Oui Non"
       </a>
</body>
 
<script>
     $('#example').confirmation('toggle')
 
     function deleteItem(id) {
                alert("Id : " + id);
     }
</script>
</html>

Erixx

**Erixx** · 29/04/2015, 10h49

Et la solution est .... (roulement de tambour) ... tadaaaa ! :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

data-href='javascript:deleteItem(14)'

à insérer avec les autres data-*

Merci à tous pour m'avoir permis de vaincre ce nouvel obstacle dans la jungle des syntaxes informatiques
Et à bientôt pour de nouvelles aventures numériques

Erixx

Popup de confirmation avec Bootstrap

jQuery

Discussions similaires

Partager

Partager