Bonjour,
J'ai une page web classique, et je veux laissez à l'utilisateur la liverté de n'afficher que certains panels (bootstrap). Je fais donc des test avec un seul panel.
Pour ce faire, j'ai mis toute ma page dans une div et lui donnant l'idée "#full". Quand je clique sur le bouton pour n'afficher que le panel "boite à outils", voilà ce qui s'exécute :
$(document).ready(function(){
$("#boiteOutil").click(function(){
var cloneText = $("#A11").html();
$(".oneBox").html(cloneText);
$("#full").hide();
});
});
Tout se passe bien : la page complète ce cache et le contenu du panel s'affiche correctement là dedans (la colonne vide sert uniquement à recenter l'élément car il y a un menu de deux colonnes qui reste systématiquement sur la page) :
<div class="row" stlye="visibility: hidden">
<div class="hidden-xs hidden-sm col-md-2 col-lg-2"></div>
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 oneBox"></div>
</div>
Le soucis, c'est que la div copiée et insérée ci dessus possède des icônes cliquables qui fonctionnent avec du javascript : réduire/agrandir la fenêtre et ouvrir une fenêtre modale qui reprend le conteu. En effet, pour eviter de dupliquer le code dans la fenêtre modale et en dehors (pour qu'il soit affiché dans tout les cas car la modale ne sert qu'à agrandir le contenu, à l'image d'une galerie photo), j'utilise le clone comme je le fais dans le JS montré si dessus.
$(document).ready(function(){
$("#ZA1").click(function(){
var cloneText = $("#A1").html();
$("#content-modal-A1").html(cloneText);
});
<div class="modal fade" id="modalA1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Boite à outils</h4>
</div>
<div class="modal-body" id="content-modal-A1">
</div>
</div>
</div>
Tout fonctionne très bien en affichage normal, mais la réduction du panel et l'affichage de la modale ne fonctionne plus lorsque je veux l'exécuter sur un panel qui s'affiche seul (comme au début de l'explication). J'ai beau cherché, je ne vois pas pourquoi ca ne fonctionne pas. J'ai simplement ajouté un id "#A11" sur l'ensemble du panel pour avoir le header et le body sur l'affichage seul, là ou l'id "#A1" est attribué uniquement au panel-body car je n'affiche que lui dans la modale.
Merci d'avance, et désolé pour la pavé ;)