évènements chargement DIV

Bonjour à tous,

J'ai un souci dans l'utilisation de jQuery pour le chargement d'une DIV.
Voici le code javascript :

Code:

---

1 2 3 4 5 6 7 8 9

$(window).load(function() { $("#centre_contenu").hide(); $("#loader").show(); $("#centre_contenu").ready(function() { $("#loader").fadeOut(function() { $("#centre_contenu").fadeIn(1000); }); }); });

---

Et le code PHP

Code:

---

1 2 3 4

<div id="centre"> <span id="loader"><img src="images/loader.gif" border="0" alt="Chargement" title="Chargement" /> Chargement en cours</span> <div id="centre_contenu"> include("gestion_".$page.".php"); </div> </div>

---

Je dois avoir un problème d'utilisation des 'load' ou 'ready' je ne sais pas, mais j'ai des comportements bizar.
En fait, parfois la div "centre_contenu" s'affiche puis se masque. Le loader s'affiche puis la div "centre_contenu" se raffiche redisparait en même temps que le loader et enfin le fadeIn de la div se fait.

Le comportement que je cherche à avoir est le suivant :
- au chargement de la page la div "centre_contenu" est vide.
- affichage du loader pendant que la div "centre_contenu" se charge totalement
- une fois que la div "centre_contenu" est totalement chargée, le loader fait un fadeOut() et la div "centre_contenu" un fadeIn()

Si je fais ça :

Code:

---

1 2 3 4 5 6 7 8 9

$(document).ready(function() { $("#centre_contenu").hide(); $("#loader").show(); $("#centre_contenu").load(function() { $("#loader").fadeOut('fast', function() { $("#centre_contenu").fadeIn(1000); }); }); });

---

le loader tourne en boucle et rien ne se passe.

Par contre si je fais :

Code:

---

1 2 3 4 5 6 7 8 9

$(document).ready(function() { $("#centre_contenu").hide(); $("#loader").show(); $("#centre_contenu").ready(function() { $("#loader").fadeOut('fast', function() { $("#centre_contenu").fadeIn(1000); }); }); });

---

ça me casse d'autres bouts de code jQuery comme si ce n'était pas chargé comme il faut !

Une idée ??
Je bloque ... sweatdrop

Comportement que je ne comprends pas (pouvez-vous m'éclairer ??)

Par exemple si j'ai le code javascript suivant :

Code:

---

1 2 3 4 5 6 7 8

$(window).load(function() { $("#loader").show(); $("#centre_contenu").ready(function() { $("#loader").fadeOut('fast', function() { $("#centre_contenu").fadeIn(1000); }); }); });

---

Et le code CSS :

Code:

---

#centre_contenu { display: none; }

---

ça me casse du code jQuery (pagination, dropdown ...)

Alors que si je mets ce code, ça ne me casse rien (mais le loading ne fonctionne pas correctement, comme expliqué dans mon premier message) :

Code:

---

1 2 3 4 5 6 7 8 9

$(window).load(function() { $("#centre_contenu").hide(); $("#loader").show(); $("#centre_contenu").ready(function() { $("#loader").fadeOut('fast', function() { $("#centre_contenu").fadeIn(1000); }); }); });

---

Je ne vois pas trop pourquoi ... une idée ??

Je sèche complètement ... si quelqu'un pouvait m'éclairer ça serait bien sympa.
Merci d'avance pour votre aide.

Citation:

---

le loader tourne en boucle et rien ne se passe.

---

Ca me semble normal :

Code:

---

1 2 3 4 5

$("#centre_contenu").load(function() { $("#loader").fadeOut('fast', function() { $("#centre_contenu").fadeIn(1000); }); });

---

Si tu fais un appel AJAX, la moindre des choses est de préciser un URL :roll:
:fleche: http://api.jquery.com/load/

Ensuite :

Code:

---

$("#centre_contenu").ready(function() {...});

---

N'a aucun sens... ready est un événement appelé lorsque le DOM est chargé (il correspond au onload de l'objet window). Donc non seulement il ne s'applique pas à un élément HTML, mais surtout lorsqu'il est déclenché avec

Code:

---

$.ready(...);

---

ça signifie que ton élément "#centre_contenu" est déjà chargé et incorporé au DOM...

OK et merci Bovino pour ton aide.

Alors j'essaie avec le code suivant :

Code:

---

1 2 3 4 5 6 7 8 9

$(document).ready(function() { $("#centre_contenu").hide(); $("#loader").show(); $("#centre_contenu").load("gestion_<?php echo $page; ?>.php", function() { $("#loader").fadeOut('fast', function() { $("#centre_contenu").fadeIn(1000); }); }); });

---

Dans ce cas là, il faut que je rajoute dans les pages PHP appelées dans l'évènement "load()" les includes pour la connexion à la BDD, le star_session() ... comme si c'était une page complète alors que le "include($page)" ne nécessite pas tout ça, vu que c'est intégré à la page en cours. (je ne sais pas si je suis clair ?!?)

Si je rajoute tout ça ... ça marche très bien dans le principe du loader !
MAIS ... ça me casse d'autres codes jQuery. :cry:

Pourquoi ????

Quelle serait la bonne solution dans mon cas :

Code:

---

1 2 3 4

<div id="centre"> <span id="loader"><img src="images/loader.gif" border="0" alt="Chargement" title="Chargement" /> Chargement en cours</span> <div id="centre_contenu"> include("gestion_".$page.".php"); </div> </div>

---

Merci pour votre aide.

Salut,

Ce n'est pas très clair "ça me casse d'autres codes jQuery".

Si ce sont des événements sur le contenu de #centre_contenu (click() sur une image, etc.), c'est normal : les "event listeners" ne sont pas rechargés pour les nouveaux éléments de la page, même s'ils portent le même #id ou .class que précédemment. Il faut donc les recharger à chaque changement du contenu.

Dans ce cas, le plus simple serait d'intégrer les listeners dans ta page PHP de contenu, mais c'est moche et redondant.

Le plus élégant, c'est de les recharger après chaque requête Ajax :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

// Activer les event listeners sur le contenu de la page function maFunctionPourGererLesEvenements() { $('#centre_contenu img').click(function() { alert('ok'); }); }   $("#centre_contenu").load("gestion_<?php echo $page; ?>.php", function() { $("#loader").fadeOut('fast', function() { $("#centre_contenu").fadeIn(1000); }); maFunctionPourGérerLesEvenements(); });

---

A noter : je crois que jQuery 1.4 permet de gérer des listeners "actifs" qui évitent d'avoir à les recharger si le Dom change. La syntaxe ressemble à ça :

Code:

---

1 2 3

$('#centre_contenu img').live('click', function() { alert('ok'); });

---

Pas testé, mais je vais pas tarder à m'y mettre...

La solution pour le loader est nikel ... du coup je me concentre sur la résolution des "bugs" sur les autres scripts jQuery.

En fait, j'ai un problème avec l'objet ".offset()" (présent dans le code jQuery sur la page gestion_page.php) !!

Par exemple :
- Sur la page "index.php" :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#centre_contenu").hide(); $("#loader").show(); $("#centre_contenu").load("gestion_page.php", function() { $("#loader").fadeOut('fast', function() { $("#centre_contenu").fadeIn(1000); }); }); }); </script> <div id="centre"> <span id="loader"><img src="images/jourmagique-loader.gif" border="0" alt="Chargement" title="Chargement" /> Chargement en cours</span> <div id="centre_contenu"></div> </div>

---

ça, ça marche nikel ...

- Sur la page "gestion_page.php" :

Code:

---

1 2 3 4 5 6

<script type="text/javascript"> $(document).ready(function(){ alert($('.form_ajout_actu').offset().top); }); </script>

---

Le alert retourne "0".

Alors qu'avec le code précédent, le alert retourne "240" (la bonne valeur)

Qu'est-ce qui bloque ???

Merci pour votre aide.

[Edit]
En fait, c'est toutes les fonctions de positions / dimensions qui bug !!

grrrr ...

Je suppose que offset() évalue la position de l'élément trop tôt - au chargement de la page Ajax, c'est à dire avant que l'élément soit inclus dans le DOM. Il ne peut donc pas donner son positionnement puisqu'il n'est pas encore inclus...

Essaie de placer ton alerte dans le callback de la fonction load() :

Code:

---

1 2 3 4 5 6 7 8 9 10

$(document).ready(function() { $("#centre_contenu").hide(); $("#loader").show(); $("#centre_contenu").load("gestion_page.php", function() { $("#loader").fadeOut('fast', function() { $("#centre_contenu").fadeIn(1000); }); alert($('.form_ajout_actu').offset().top); }); });

---

Merci Caphar pour ton aide ... ;)

Alors si je mets l'alert dans le callback de la fonction load(), c'est pareil.
Ca me retourne 0

:cry:

[Edit]
Ce n'est peut-être pas offset() le problème !!

Regardons le code source généré :

Code:

---

1 2 3 4

<div id="centre"> <span id="loader"><img src="images/loader.gif" border="0" alt="Chargement" title="Chargement" /> Chargement en cours</span> <div id="centre_contenu"></div> </div>

---

La DIV "centre_contenu" est vide vu que c'est chargé en javascript via la fonction load().

Alors qu'avec la code précédent, la DIV "centre_contenu" était remplie avec le code présent dans le fichier php qui était un include().

D'où le fait que le calcul de la position ne peut pas être fait.

Je ne sais pas si le problème vient réellement de là, ni comment le contourner ? 8O

[Edit]
ah !!! en fait, offset() évalue effectivement la position de l'élément trop tôt.

Code:

---

1 2 3 4 5 6 7 8 9 10

$(document).ready(function() { $("#centre_contenu").hide(); $("#loader").show(); $("#centre_contenu").load("gestion_page.php", function() { $("#loader").fadeOut('fast', function() { $("#centre_contenu").fadeIn(1000); alert($('.form_ajout_actu').offset().top); }); }); });

---

ça retourne la bonne valeur !
Donc maintenant comment faire pour mon code javascript présent dans la page "gestion_page.php" s'exécute au dernier moment ??

Actuellement, c'est comme ça :

Code:

---

1 2 3 4 5

<script type="text/javascript"> $(document).ready(function(){ alert($('.form_ajout_actu').offset().top); }); </script>

---

on va bien finir par trouver .... :?

Ne déclenche pas l'évaluation dans la page gestion_page.php mais après l'insertion dans le DOM. Par exemple en la plaçant dans une fonction :

Dans gestion_page.php :

Code:

---

1 2 3 4 5

var evenements = { function init() { alert($('.form_ajout_actu').offset().top); } }

---

Dans ton JS :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

$(document).ready(function() { $("#centre_contenu").hide(); $("#loader").show(); $("#centre_contenu").load("gestion_page.php", function() { $("#loader").fadeOut('fast', function() { $("#centre_contenu").fadeIn(1000); }); if (evenements) { evenements.init(); } }); });

---

Non, ça ne fait rien ... j'ai même une erreur

evenements is not defined

Ce n'est encore pas normal.
Le script devrait être effectué dans la page gestion_page.php, donc l'objet evenement devrait être déclaré.

Pour les autres pages, c'est normal qu'il déclenche une erreur, j'ai écrit un peu vite. La vraie condition serait :
if (typeof(evenements) !== "undefined") { }

Peux-tu donner l'intégralité du code (hors codes de connexion bien sûr) de la page principale et de gestion_page.php pour qu'on voie ce qui peut clocher ?

Merci

Voilà le code de la page "index.html" :

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 39 40 41 42 43 44 45 46 47 48 49 50 51

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page INDEX</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="FR" /> <meta name="Title" content="Page INDEX" /> <style type="text/css"> @charset "UTF-8"; html * { margin:0; } body { background:#FFF; height:100%; font-family:Verdana, Arial, Helvetica, sans-serif; } #container { margin: 0 auto; margin-top:50px; width:1200px; height:100%; min-height:768px; font-size:12px; } #centre { float:left; width:930px; padding:10px; height:auto; min-height:545px; background:white; border:1px solid #CCC; } #actus_gauche { float:left; clear:left; width:585px; height:2000px; border-right:1px dashed #FFE8F1; margin-right:14px; }   #actus_droite { float:left; width:320px; } #actus_droite .form_ajout_actu { float:left; width:320px; height:auto; } #actus_droite .form_ajout_actu.fixed { float:left; width:320px; position: fixed; top:0; margin-top:5px; } #actus_droite .form_ajout_actu .titre_ajout_actu { float:left; width:320px; text-align:center; font-size:13px; font-weight:bold; text-transform:uppercase; background:#666666; padding:7px 0; margin-bottom:5px; -moz-border-radius:7px; } #actus_droite .form_ajout_actu .titre_ajout_actu:hover { cursor:pointer; } </style> </head>   <body> <div id="container"> <div id="centre"> <span id="loader"><img src="images/loader.gif" border="0" alt="Chargement" title="Chargement" /> Chargement en cours</span> <div id="centre_contenu"></div> </div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#centre_contenu").hide(); $("#loader").show(); $("#centre_contenu").load("gestion_page.html", function(data) { $("#loader").fadeOut('fast', function() { $("#centre_contenu").fadeIn(1000); }); }); }); </script> </body> </html>

---

Page : "gestion_page.html"

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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

<link href="http://tympanus.net/jPaginate/css/style.css" rel="stylesheet" type="text/css" media="screen" />   <h1>Actualité</h1>   <div id="actus_gauche"> <div id="pagination"></div>   <span id="updater" style="position:absolute;"><img src="images/jourmagique-loader.gif" border="0" alt="Chargement" title="Chargement" /> Chargement en cours</span> <div id="display_messages"></div>   </div>   <div id="actus_droite"> <div class="form_ajout_actu"> <span class="titre_ajout_actu">Ajoutez une actualité</span> <form action="#" method="post" id="formulaire"> <strong>Titre</strong><br /><input name="titre" type="text" style="width:310px;" maxlength="150" /><br /> <strong>Message</strong><br /><textarea id="content" name="content" style="width:320px;height:300px"></textarea> <p align="right"><input class="submit2" id="submit2" type="submit" value="Envoyer" /></p> </form> </div> </div>   <script type="text/javascript" src="http://tympanus.net/jPaginate/jquery.paginate.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#pagination").paginate({ count : 10, start : 1, display : 5, border : false, text_color : '#EB75EB', background_color : 'none', text_hover_color : '#D01AD4', background_hover_color : 'none', images : false, mouse : 'press' });   var msie6 = $.browser == 'msie' && $.browser.version < 7;   if (!msie6) { var top = $('.form_ajout_actu').offset().top - parseFloat($('.form_ajout_actu').css('margin-top').replace(/auto/, 0)); $(window).scroll(function (event) { var y = $(this).scrollTop();   if (y >= top) { $('.form_ajout_actu').addClass('fixed'); $('#coms_droite').addClass('fixed'); } else { $('.form_ajout_actu').removeClass('fixed'); $('#coms_droite').removeClass('fixed'); } }); } }); </script>

---

Voilà ... vous avez tout en votre possession. :)
J'espère que ça sera plus clair et plus simple ...

Désolé, mon code était bon dans le principe mais la syntaxe était mauvaise :oops:.

J'ai testé avec succès la formule suivante :

Dans gestion_page.php, APRES la fonction $(document).ready(); :

Code:

---

1 2 3 4 5

var evenements = { init: function() { alert($('.form_ajout_actu').offset().top); } }

---

Dans l'index :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

$(document).ready(function() { $("#centre_contenu").hide(); $("#loader").show(); $("#centre_contenu").load("gestion_page.html", function(data) { $("#loader").fadeOut('fast', function() { $("#centre_contenu").fadeIn(1000); if (typeof(evenements) !== "undefined") { evenements.init(); } }); }); });

---

Coool !!!

Merci beaucoup Caphar ... ça fonctionne nikel. :ccool: