Iframe et chargement de page

Version imprimable

10/09/2012, 10h04
identifiant_bidon

Iframe et chargement de page

Bonjour à tous,

Voici mon souci :

Je dispose sur mon site d'une page d'accueil avec 10 boutons. J'ai également 10 iframes dans des div. Les div (et donc les iframes) sont masquées au chargement (display:none).
Lorsque je clique sur un bouton, le div correspondant passe à display:block et l'iframe apparait donc.

Mon souci est que le temps de chargement de la page d'accueil est long puisque le contenu de chaque iframe se charge.

Quelqu'un aurait-il une astuce pour faire en sorte que les iframes ne se chargent pas au loading de la page d'accueil ? L'idéal serait que chaque iframe se charge au clic sur le bouton qui lui correspond.

Merci beaucoup.
10/09/2012, 10h12
SpaceFrog

tu ne peux pas tre passer des iframes et faire du load() ??
10/09/2012, 10h26
identifiant_bidon

Salut SpaceFrog

Éventuellement je pourrai le faire et prendre quelques heures pour refaire un refactoring complet du code si tu penses qu'il vaut vraiment mieux se passer des iframes. 8-)

Par contre, qu'appelles-tu "faire du load()" ? Tu aurais un exemple à me donner pour inspiration ?

Merci
10/09/2012, 10h38
SpaceFrog

http://api.jquery.com/load/
10/09/2012, 11h39
identifiant_bidon

Super SpaceFrog. :ccool:

Ça marche nickel.
Autre petite question. Si je veux afficher mes div et leur contenu, je fais load mais lorsque je veux les masquer, j'imagine que je fais unload ?
10/09/2012, 11h40
SpaceFrog

non a priori je dirais hide() ou empty() ...

Voilà j'avance pas mal mais me retrouve confronté à une autre difficulté.
Voici un exemple de code qui reprend ce que tu as proposé SpaceFrog :

index.php

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
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		$(function() {
			$("#button_1").click(function() 
			{
				$("#div_button1").load('contenu_button1.php');
			});
		});		
	</script>
</head>
<body>
<div id="div_button" style="position:absolute; left:0px; top:50px; width:200px; height:80%; border:2px solid #00CC00">
	<table width="100%" cellpadding="0" cellspacing="0" border="1">
	<tr><td id="button_1" name="button_1"><input type="button" value="BOUTON 1"/></td></tr>
	<tr><td><input type="button" id="button_2" name="button_2" value="BOUTON 2"/></td></tr>
	<tr><td><input type="button" id="button_3" name="button_3" value="BOUTON 3"/></td></tr>
	<tr><td><input type="button" id="button_4" name="button_4" value="BOUTON 4"/></td></tr>
	<tr><td><input type="button" id="button_5" name="button_5" value="BOUTON 5"/></td></tr>
	<tr><td><input type="button" id="button_6" name="button_6" value="BOUTON 6"/></td></tr>	
	<tr><td><input type="button" id="button_7" name="button_7" value="BOUTON 7"/></td></tr>
	<tr><td><input type="button" id="button_8" name="button_8" value="BOUTON 8"/></td></tr>
	<tr><td><input type="button" id="button_9" name="button_9" value="BOUTON 9"/></td></tr>
	<tr><td><input type="button" id="button_10" name="button_10" value="BOUTON 10"/></td></tr>
	</table>
</div>
<div id="div_button1" style="position:absolute; left:300px; top:50px; width:500px; height:80%; border:2px solid #00CC00">
&nbsp;
</div>
</body>
</html>

contenu_button1.php

Code:

1
2
3
4
5
6
7
8
<html>
<head>
 
</head>
<body>
<input id="btn_test" name="btn_test" type="button" value="test"/>
</body>
</html>

Mon besoin est le suivant :
Lorsque je clique sur le bouton se trouvant dans la div que j'ai fait apparaître (btn_test), cela déclenche une action côté serveur (requête en base en PHP) puis la div en question doit être rafraichie avec un résultat de la requête qui vient d'être effectuée.

Comment dois-je procéder à votre avis ?

Merci

11/09/2012, 12h51
SpaceFrog

sur le clic du bouton un load()