Cacher un élément chargé en ajax à son chargement

Version imprimable

18/02/2013, 09h53
Kaaribou

Cacher un élément chargé en ajax à son chargement

Bonjour à tous,

après multiple test et recherche, je n'arrive pa résoudre mon problème.
Voila j'ai une page main.html prinpale où est chargée mes .js avec mes fonctions ajax jquery.
Dans cette page j'ai des onglets qui en fonction d'où l'on clique charge une page x.html dans une div.

J'aimerai pouvoir cacher certains éléments de la page x.html à son chargement.

J'arrive à utiliser la fonction click avec le .on('click', ...) mais impossible de cacher l'élément avec un .hide(), et la fonction .on('load', ...) ne marche pas noonplus.

Voila j'espere avoir été clair, merci pour vos réponses.

Bon dev à tous!
18/02/2013, 10h31
andry.aime

Montre nous ton code.

A+.

Bonjour andry.aime,

Je vous remercie pour cette redirection et vous presente mon code.

Voici le code de ma page principale :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <script type="text/javascript" src="/js/jquery-1.8.2.js"></script> <script src="/events_load.js" type="text/javascript"></script> </head> <body> <div id="centre"> Bienvenue cher utilisateur ! </div> <div class="foot">  </div> </body> </html>
Voici le code de la page html que je charge dans la div "centre" de la page principale en ajax lors d'un clique sur un lien :
Code:

1 2 3 4 5 6 7 <table id="tab"> </table> <div id="menu">  </div>
J'aimerai qu'aux chargement de ce code, en fonction d'une condition, pouvoir cacher les éléments "#tab" et "#menu".

Je peux manipuler tous les éléments chargés à l'aide du .on() mais uniquement lorsque qu'ils sont chargés. Je n'arrive pas à lever des évenements au chargement d'élement chargé dynamiquement dans ma page dans mon fichier "events_load.js".

Merci pour votre aide

Cordialement Kaaribou.

Solution

Bonjour à tous,

Après quelques touffes de cheveux en moins et un bon plongeon dans le code existant tellement propre :furax:, j'ai enfin trouvé ma solution finalement toute bête que je partage pour tous les têtes en l'air (comme moi ;)) et pour résoudre ce post.

Voici ce que j'avais avant comme lien :

Code:

<a href="javascript:aff_centre('mapage.html')"> Ma belle page</a>

Ce qui me permettait d'ouvrir ma page dans la div '#centre' mais je n'avais pas accès aux éléments de cette page chargée.

Voici ma solution :
Code:

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 29 30 31 32 33 34 35 36 37 38 <html> <head> <script type="text/javascript" src="/js/jquery-1.8.2.js"></script> </head> <body> <a href="#" id="link_mapage" >Ma belle page</a> <div id="centre"> Bienvenue cher utilisateur ! </div> <div class="foot">  </div> <script> $(document).ready(function(){ $('#link_mapage').click(function() { var pageHtml = "mapage.html"; $.get(pageHtml, function(data){ //Charge la page html dans le conteneur spécifié $('#centre').html(data); // Execution au chargement de la page $('#menu').hide(); $('#tab').hide(); }); }); /*Ensuite on dit merci à la fonction .on()*/ $('#centre').on('click', '#element_de_mapage', function(){ alert('Yes j\'ai accès !!!!!!!'); }); }); </script> </body> </html>