dimensionnement div contenu et Ajax

[MrFurious]

Bonjour à tous,

J'ai un petit souci... j'essaie de dvp un site sous AJAX, avec une fonction simple d'appel de contenu... pour obtenir l'affichage dynamique...

enfin bref, tout fonctionne pour l'appel, sauf que le contenu appelé si il est plus grand, n'augmente pas la taille de ma div contenu, pourtant spécifié extensible en css... là je patauge complètement, car je lui ai donné un min-height, mais il semblerait que celà ne détecte pas de contenu réel...

avez vous une idée??

[Bovino]

J'imagine que ça vient de ton code

[andry.aime]

Bonsoir,

Je ne sais pas si ton problème est sur tous les nav ou seulement IE mais j'avais déjà ce souci pour Ie, regarde cette discussion.

A+.

[MrFurious]

alors non ça vaut pour tous les navigateurs...
voici le code

alors pour le Css:

Code css :

1
2
3
4
5
6
7
8
9
10
11
12
#wrapper {
background: url(../img/bgcontent.jpg) repeat-y;
width: 980px;
display: block;
height: 100%;
min-height: 850px;
max-height: 1510px;
}
 
#contenu {
padding: 15px 0 0 30px;
}

pour le code:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="wrapper">
<div id="menu">
<ul>
<li><a href="?contenu/accueil.php" onclick="load_page(this.href);return false;" title="">Accueil</a></li>
<li><a href="?contenu/Page1.php" onclick="load_page(this.href);return false;" title="">Page1</a></li>
<li><a href="?contenu/Page2.php" onclick="load_page(this.href);return false;" title="">Page2</a></li>
<li><a href="?contenu/Page3.php" onclick="load_page(this.href);return false;" title="">Page3</a></li>
<li><a href="?contenu/Page4.php" onclick="load_page(this.href);return false;" title="">Page4</a></li>
<li><a href="?contenu/Page5.php" onclick="load_page(this.href);return false;" title="">Page5</a></li>
<li><a href="?contenu/Page6.php" onclick="load_page(this.href);return false;" title="">Page6</a></li>
<li class="nb" ><a href="?contenu/Page7.php" onclick="load_page(this.href);return false;" title="">Page7</a></li>
</ul>
</div>
<div id="contenu" class="contenu">
<noscript>
<div id="erreur">Veuillez activer javascript, ou visiter <a href="contenu/index.php">la version light</a>.</div>
</noscript>
<?php
if (empty($_GET["contenu"])) include ('contenu/accueil.php');
else include('contenu/'. $_GET['contenu'].'.php');
?>
</div>
</div>

[RomainVALERI]

A priori ça serait le code JS de ton appel AJAX qui serait le plus utile ici (et tant qu'à poster la structure HTML sur laquelle le code JS s'appuie, ce qui est une bonne chose, autant poster le code généré ^^ parce que nous ne savons pas ce que ton serveur PHP va substituer aux extraits de code serveur...)

[MrFurious]

mon fichier ajax, c'est:

/*************************************************
Fonction de definition de l'object xhr (Ne pas modifier)
**************************************************/

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
function new_xhr(){
	var xhr_object = null;
	if(window.XMLHttpRequest) // Firefox et autres
	   xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject){ // Internet Explorer
	   try {
                xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non supporté par le navigateur
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	   xhr_object = false;
	}
	return xhr_object;
}
/*****************************************************
	Fonction qui va recharger le contenu
******************************************************/
function load_page(url,famille) {
	var xhr2 = new_xhr();//On crée un nouvel objet XMLHttpRequest
	xhr2.onreadystatechange = function(){
		if ( xhr2.readyState == 4 ){//Actions executées une fois le chargement fini
			if(xhr2.status  != 200){//Message si il se produit une erreur
				document.getElementById("contenu").innerHTML ="Error code " + xhr2.status;
			} else {//On met le contenu du fichier externe dans la div "content"
				document.getElementById("contenu").innerHTML = xhr2.responseText;
			}
		} else {//Message affiché pendant le chargement
			document.getElementById("contenu").innerHTML = "Chargement en cours ...<br /><img src='images/loading.gif' alt=''/>";
		}
	}
	xhr2.open("GET", url.split('?')[1]+"", true);//Appel du fichier externe
	xhr2.send(null);
}

est-ce que c'est le fait que ce soit appelé en echo$text?

[RomainVALERI]

ça ( url.split('?')[1] ) me parait louche
On peut voir comment est alimentée la variable url ?

(note : entoure tes extraits de code avec des balises [code][/code], stp... ^^)

[MrFurious]

je sais pas si c'est ce que tu voulais... ce qui alimente?

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
<?php
 
header('Content-type: text/html;charset=iso-8859-1');
 
$txt = "
<div id='contenti'>
<div id='left'>
	<div id='art'>
		<div id='titre'>
			<ul class='title'>
				<li><img src='img/lot.png' alt='lotus' /></li>
				<li><span><h3>Institut</h3></span></li>
				<li><img src='img/lot.png' alt='lotus' /></li>
			</ul>
		</div>
		<div class='presta'>
			<ul>
				<li style='height: 195px;'>
				<span><h2>TITRE</h2></span>
				<div  class='contentart'>
					<div class='txt'>
						<p>				
						Nunc consectetur arcu a lacus tempus convallis.Aliquam hendrerit odio pretium quam posuere eu gravida
						Nunc consectetur arcu a lacus tempus convallis.Aliquam hendrerit odio pretium quam posuere eu gravida
						Nunc consectetur arcu a lacus tempus convallis.Aliquam hendrerit odio pretium quam posuere eu gravida
						</p>
					</div>
					<div class='img'><img src='img/car.jpg' alt='' /></div>
				</div>
				<div id='clear'></div>
				</li>
				<li>
				<span><h2>TITRE</h2></span>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a metus convallis dui feugiat suscipit. Nunc consectetur arcu a lacus tempus convallis. 
				Aliquam hendrerit odio pretium quam posuere eu gravida felis euismod. Vestibulum nisi felis, tincidunt eu porttitor vel, bibendum non lacus.
				</p>
				</li>
				<li style='height: 145px;'>
					<span><h2>TITRE</h2></span>
					<div  class='contentart'>
						<div class='txt'>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a metus convallis dui feugiat suscipit. Nunc consectetur arcu a lacus tempus convallis. 
							Aliquam hendrerit odio pretium quam posuere eu gravida felis euismod. Vestibulum nisi felis, tincidunt eu porttitor vel, bibendum non lacus.
							</p>
						</div>
						<div class='img'><img src='img/pie.jpg' alt='image du spa' /></div>
					</div>
					<div id='clear'></div>
				</li><li style='height: 145px;'>
					<span><h2>TITRE</h2></span>
					<div  class='contentart'>
						<div class='txt'>
							<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a metus convallis dui feugiat suscipit. 
							Nunc consectetur arcu a lacus tempus convallis. Aliquam hendrerit odio pretium quam posuere eu gravida
							felis euismod. Vestibulum nisi felis, tincidunt eu porttitor vel, bibendum non lacus.
							</p>
						</div>
						<div class='img'><img src='img/pie.jpg' alt='' /></div>
					</div>
					<div id='clear'></div>
				</li><li style='height: 145px;'>
					<span><h2>Hep</h2></span>
					<div  class='contentart'>
						<div class='txt'>
							<p>
							Nunc consectetur arcu a lacus tempus convallis.Aliquam hendrerit odio pretium quam posuere eu gravida
							</p>
						</div>
						<div class='img'><img src='img/pie.jpg' alt='' /></div>
					</div>
					<div id='clear'></div>
				</li>
				<li>
				<span><h2>Hip</h2></span>
				<p>
				Nunc consectetur arcu a lacus tempus convallis.Aliquam hendrerit odio pretium quam posuere eu gravida
				felis euismod. Vestibulum nisi felis, tincidunt eu porttitor vel, bibendum non lacus. Pellentesque tortor lacus, 
				hendrerit molestie sagittis non, ullamcorper et lorem. Donec leo justo,	malesuada non fermentum a, mattis sed dolor.
				</p>
				</li>
				<li>
				<span><h2>Hop</h2></span>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a metus convallis dui feugiat suscipit. 
				Nunc consectetur arcu a lacus tempus convallis.Aliquam hendrerit odio pretium quam posuere eu gravida
				felis euismod. Vestibulum nisi felis, tincidunt eu porttitor vel, bibendum non lacus. Pellentesque tortor lacus, 
				hendrerit molestie sagittis non, ullamcorper et lorem. Donec leo justo,	malesuada non fermentum a, mattis sed dolor.
				Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a nisl arcu.
				</li>
				<li>
				<span><h2>hap</h2></span>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a metus convallis dui feugiat suscipit. 
				Nunc consectetur arcu a lacus tempus convallis.Aliquam hendrerit odio pretium quam posuere eu gravida
				</p>
				</li>
			</ul>
		</div>
		<div id='clear'></div>
	</div>
</div>
<div id='right'>
	<div class='bdl'></div>
	<div class='bdt'></div>
	<div id='offrir'>
	<div class='title'><span><h3>OFFREZ ! </h3></span></div>
	<a href='#'><img src='img/gift.png' alt='offrez!' /></a>
	</div>
	<div class='bdt'></div>
	<div id='promo'>
	<div class='title'><span><h3>Promo</h3></span></div>
	<p>
	N’hésitez pas à consulter nos promotions régulièrement !<br /><br />
	<a href='?contenu/promo.php' onclick='load_page(this.href);return false;' title=''> >> Voir</a></p>
	</div>
	<div class='bdt'></div>
	<div id='news'>
	<div class='title'><span><h3>News</h3></span></div>
	<p>
	<strong>
	</p>
	<img src='img/cc.jpg' alt='Couleur' />
	<a href='' alt='lien'><img src='img/xx.png' alt='logo' /></a>
	</div>
</div>
</div>
";
 
echo $txt
 
// echo utf8_encode($txt);
 
?>

j'ai remarqué que si je donne une taille à la div contenu ça marche mais pas sous forme de min-height, car si trop petit ça ne marche pas, et si trop grand ça s'applique à toutes les pages... et c'est moche...

[RomainVALERI]

Envoyé par MrFurious

je sais pas si c'est ce que tu voulais...

Nope.

Je parlais de ce qui, dans ton code JS, donne sa valeur à la variable globale "url", avant que cet appel ajax soit lancé. Je suppose que c'est, comme son nom l'indique*, une url.

* et ainsi que le split("?") le laisse supposer aussi, d'ailleurs ^^

[MrFurious]

en fait je crois que j'ai tout mi... je t'avoue que je gère pas trop le javascript... là j'ai mi tout ce qui il y avait dans le fichier que j'ai téléchargé...
J'ai repris le cours que j'ai eu pdt ma formation...
mais j'ai pas retrouvé de réponse dedans...

euh... c'est peut-être ça le probleme...

[RomainVALERI]

Stop ! C'est moi qui raconte des c*****ies

Je n'avais pas vu la signature de la fonction load_page... ^^ ( function load_page(url,famille) )

...donc elle est fournie en paramètre à l'exécution, il suffit de voir dans ton source HTML : <a href='?contenu/promo.php' onclick='load_page(this.href);return false;' pour en conclure que le découpage (split) va seulement exclure le "?" et donc l'url est "a priori" correcte. C'est-à-dire que le problème se situe de l'autre côté (serveur)

*petites voix dans la tête* ...et en plus vu les symptômes (il y avait une réponse AJAX mais un mauvais affichage) le problème ne pouvait pas être là, bougre d'imbécile...