Discussion :

[TitBen]

Bonjour à tous,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

#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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Bovino]

le loader tourne en boucle et rien ne se passe.

Ca me semble normal :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
http://api.jquery.com/load/

Ensuite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$.ready(...);

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

[TitBen]

OK et merci Bovino pour ton aide.

Alors j'essaie avec le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Pourquoi ????

Quelle serait la bonne solution dans mon cas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[caphar]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[TitBen]

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 :

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
<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

[caphar]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
	});
});