Bonjour, bonsoir,

Voilà, j'ai un petit soucis, j'utilise les modals (modaux ?) bootstrap mais j'ai un petit soucis au niveau d'un modal.
Je souhaiterais que lorsque mon modal se ferme, que la div "modal-content" du modal id="photos" redevienne vierge.

                            <a href="test?album=<?php echo $pict_url ?>" data-toggle="modal" data-target="#photo" data-html="true"><i class="fa fa-expand"></i>

<!-- Modal -->
<div class="modal fade slide-up disable-scroll" id="photo" tabindex="-1" role="dialog" aria-labelledby="modalSlideUpLabel" aria-hidden="false">
    <div class="modal-dialog ">
        <div class="modal-content-wrapper">
        <div class="modal-content">
            <div class="modal-body">

            </div>
        </div>
        </div>
        <!-- /.modal-content -->
    </div>
</div>
<!-- /.modal-dialog -->

Merci d'avance

Bonjour spontanément je dirais qu'il faut mettre un événement sur le click du bouton qui permet de fermer ta modal. Et à l'intérieur de cet événement vider la div qui contient la photo.

J'utilise ça (issu de la doc Bootstrap) mais celui-ci ne fonctionne pas... :/

$('#photo').on('hidden.bs.modal', function (e) {

})

(J'ai même tenté une alert à la fermeture du modal pour voir si c'était empty() qui ne fonctionnait pas mais pour le coup aucuns des deux fonctionnes )

Quelle est ta version de bootstrap? Essayes cette version : 

$('#photo').on('hidden', function () {
    alert('test');
})

Autre question ? Est-ce que t'es sûr que c'est sur le bon div que tu as mis l'id photo? Essaye sur les autres div peut être que le div que tu écoute pour la fermeture n'est pas le bon. Par exemple 

<div class="modal-dialog " id="photo">

J'utilise Bootstrap 3.3.7

Et non cela ne fonctionne pas même en changeant les div....

Est-ce que tu as bien inclus 

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Et essaye d'utiliser hide.bs.modal à la place de hidden.bs.modal

Tout est bien intégré, et malgré mes recherches sur le net, rien ne fonctionne.

Est ce que je peux voir le code que tu as essayé d'écrire en js stp?

Alors le JS : 

<script>
$('#photo').on('hidden.bs.modal', function () {
    alert('test');
})
</script>

Le modal :

<!-- Modal -->
<div class="modal fade slide-up disable-scroll" id="photo" tabindex="-1" role="dialog" aria-labelledby="modalSlideUpLabel" aria-hidden="false">
<div class="modal-dialog ">
        <div class="modal-content-wrapper">
      <div class="modal-content" id="photo-content">
            <div class="modal-body">



            </div>
        </div>
      </div>
        <!-- /.modal-content -->
    </div>
</div>
<!-- /.modal-dialog -->

Et pour appeler le modal :

<a href="test?album=20392" data-toggle="modal" data-target="#photo" data-html="true"><i class="fa fa-expand"></i></a>

Les bibliothèques sont correctement installés !

Ton code marche chez moi, mais il faut mettre ton id=photo-content sur la balise div modal-body

Ensuite j'ai fait :

$('#photo').on('hidden.bs.modal', function () {
    $('#photo-content').text("");
})

Pense aussi à recharger complétement ta page en faisant CTRL + SHIFT + R

Incroyable mais moi non... 

Je te mets la liste de tous les plugins déclaré en JS, je pense que ça pourrait être une interférence mais bizarre vu que le fonctionnement du modal n'est pas modifié,

    <!-- BEGIN VENDOR JS -->
    <script src="<?php echo SITE_PATH ?>assets/plugins/pace/pace.min.js" type="text/javascript"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/modernizr.custom.js" type="text/javascript"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/bootstrapv3/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/jquery/jquery-easy.js" type="text/javascript"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/jquery-bez/jquery.bez.min.js"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/jquery-ios-list/jquery.ioslist.min.js" type="text/javascript"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/jquery-actual/jquery.actual.min.js"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js"></script>
    <script type="text/javascript" src="<?php echo SITE_PATH ?>assets/plugins/select2/js/select2.full.min.js"></script>
    <script type="text/javascript" src="<?php echo SITE_PATH ?>assets/plugins/classie/classie.js"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/switchery/js/switchery.min.js" type="text/javascript"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/jquery-isotope/isotope.pkgd.min.js" type="text/javascript"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/classie/classie.js" type="text/javascript"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/codrops-stepsform/js/stepsForm.js" type="text/javascript"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/switchery/js/switchery.min.js" type="text/javascript"></script>
    <script src="<?php echo SITE_PATH ?>assets/plugins/gallery-lightbox/ekko-lightbox.js"></script>

    <!-- END VENDOR JS -->
    <!-- BEGIN CORE TEMPLATE JS -->
    <script src="<?php echo SITE_PATH ?>pages/js/pages.min.js"></script>
    <script src="<?php echo SITE_PATH ?>pages/js/pages.social.min.js"></script>
    <!-- END CORE TEMPLATE JS -->
    <!-- BEGIN PAGE LEVEL JS -->
    <script src="<?php echo SITE_PATH ?>assets/js/scripts.js" type="text/javascript"></script>
    <!-- END PAGE LEVEL JS -->

malgré quelques recherches, toujours infructueuse je n'ai toujours pas trouvé le bug...

Regarde si tu as des erreurs dans ta console en faisant ctrl + shift + i  sur ton navigateur

Si tu vois un message en rouge ça pourra peut être t'indiquer quel est le problème. 

En tout cas au niveau du code ça marche chez moi donc ça vient de chez toi je pense

Si quelqu'un d'autre pouvait apporter une aide aussi ça serait bien je suis pas un pro en js 

-
Edité par YLaakel 26 mars 2017 à 21:39:42

Il ne se passe rien comme si le code ne s'exécuté simplement pas... :/

Haha merci de ton aide en tout cas... 

Edit :
En fait j'arrive à avoir cette erreur :

Uncaught ReferenceError: $ is not defined
    at photos:522
(anonymous) @ photos:522

 Edit 2 :

 J'ai enfin réussi en utilisant donc :

<script>
$('#photo').on('hidden.bs.modal', function () {
    $('#photo-content').text("");
})
</script>

En nettoyant le code et surtout j'ai mis #photo-content sur la div modal-body !

-
Edité par Marwinzien 26 mars 2017 à 22:46:23