IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Popup de confirmation avec Bootstrap


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Décembre 2014
    Messages
    18
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Transports

    Informations forums :
    Inscription : Décembre 2014
    Messages : 18
    Par défaut Popup de confirmation avec Bootstrap
    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>

  2. #2
    Membre chevronné
    Avatar de Darkaurora
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2010
    Messages
    382
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2010
    Messages : 382
    Billets dans le blog
    1
    Par défaut
    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.

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 209
    Par défaut
    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

  4. #4
    Membre averti
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Décembre 2014
    Messages
    18
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Transports

    Informations forums :
    Inscription : Décembre 2014
    Messages : 18
    Par défaut
    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

  5. #5
    Membre averti
    Homme Profil pro
    Développeur .NET
    Inscrit en
    Décembre 2014
    Messages
    18
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Développeur .NET
    Secteur : Transports

    Informations forums :
    Inscription : Décembre 2014
    Messages : 18
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. popup de confirmation avec un history back
    Par speedylol dans le forum jQuery
    Réponses: 4
    Dernier message: 04/01/2012, 00h29
  2. Simuler le comportement de confirm() avec une popup
    Par Zakapatul dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 14/05/2007, 11h02
  3. Popup de confirmation
    Par Ekik dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 21/02/2006, 22h07
  4. Confirm avec bouton yes/no/cancel
    Par shwin dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 12/01/2006, 19h24
  5. probleme return confirm avec firefox
    Par druglord dans le forum Général JavaScript
    Réponses: 12
    Dernier message: 24/08/2005, 10h14

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo