[AJAX] include et chargement en cours

**ddelec24** · 18/05/2007, 13h01

bonjour,

débutant dans ce domaine, je me suis documenté et lu quelques tutoriels intéressants.
Cependant je n'ai pas trouvé s'il était possible de faire ce que je souhaite.

J'ai une page du type:

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
 
...
<div id="contenu">
 
	<div id="menugauche">
			<?php include('./MENU/membremenu.php'); ?>
			<?php include('./MENU/mainmenu.php'); ?>
			<?php include('./MENU/statsmenu.php'); ?>
	</div> <!-- FIN DIV MENUGAUCHE -->
 
	<div id="centre">
		<?php include('page.php');?>
	</div>	<!-- FIN DIV CENTRE -->
 
</div><!-- FIN DIV CONTENU -->
...

page.php regroupe tout ce qui peux s'afficher dans le corps de ma page.
Ce qu'il y a, j'utilise un formulaire qui, lorsqu'il est validé, renvoi sur cette meme page avec des données POST, dont une qui est l'url d'une image.
C'est ici que ce pose le problème, c'est que je fais une miniaturisation de cette image, et la procédure peut durer quelques secondes suivant la taille d'origine.
J'aurais donc voulu savoir s'il été possible de mettre en place un "chargement en cours" tant que le code de page.php n'est pas terminé d'exécuter, car actuellement le design est "cassé", tout ce qu'il y a après l'include ne s'affiche pas tant que le traitement n'est pas fini, ce qui n'est pas très esthétique.
Un petit chargement en cours en attendant serait sympa, mais je n'ai pas trouvé si cela est possible

Si vous aviez un exemple concret de la mise en place de ce système que je puisse adapter a mon cas ca serait volontier, je n'ai pas vu d'exemple similaire dans les cours ou portions de codes.

Merci beaucoup.

Cordialement, DD.

**guiltouf** · 18/05/2007, 13h39

Pour faire ce que tu veux faire, colle cette appelle Ajax dans tes balises <head>


<script type="text/javascript">

</script>


Au niveau de ton chargement d'image, fais un appel javascript :
<script type="text/javascript">getMyHTML('script_php.php','id_div_a_mettre_a_jour'); </script>

Dans ton script php, tu lances la création de la miniature, et ensuite affiche l'image.

Pour finir la personnalisation, modifie 'obj.innerHTML' => sera affiché en attendant la fin du script.

Ciao

**ddelec24** · 19/05/2007, 15h21

Bonjour et merci pour ta réponse

En reprenant ton exemple, j'ai fait ceci:

Code :

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

1
2
3
<div id="centre">
  <script type="text/javascript">getMyHTML('./page.php','centre'); </script>
</div>	<!-- FIN DIV CENTRE -->

Malheureusement ca ne fonctionne pas

jai regardé dans les logs apache et jai bien la requete:

127.0.0.1 - - [19/May/2007:14:59:36 +0200] "GET /www.power-anime.fr/page.php HTTP/1.1" 200 - "http://localhost/www.power-anime.fr/index.php?page=createminiature" "Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3"
127.0.0.1 - - [19/May/2007:14:59:36 +0200] "GET /www.power-anime.fr/design/chargement.gif HTTP/1.1" 304 - "http://localhost/www.power-anime.fr/index.php?page=news" "Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3"

chargement.gif étant le gif qui devrait s'afficher pendant le chargement.

mais rien ne s'affiche dans mon div "centre", et quand je regarde "response" par firebug j'ai "loading..."

j'ai tenté de placé le script avant ou apres, meme résultat.

Je ne vois vraiment pas je me tire les cheveux à force ^^
cest pas parce que je travail en local? (sur clé usb)
je balance sur mon serveur que quand j'ai en principe plus de bug sur la fonction que j'ai ajoutée

Encore merci de votre aide !
Cordialement, DD.

**guiltouf** · 19/05/2007, 17h38

Plusieurs tests à faire :
1/ Le problème peut venir du htaccess
2/ La réponse apache n'est pas 200 mais 304... Et tu as vu, mais la condition sur le xmlhttp.status n'est qu'à 200
=> Accepte également le status 304, ce n'est pas une erreur, ça veut juste dire que c'est en cache.

Après, remplace le .gif par du texte plutot voyant, dans un div plutot voyant également.

Ciao.

**ddelec24** · 19/05/2007, 18h52

j'ai trouvé...
j'ai pour habitude de faire un define bidon sur la page qui contient les includes
et dans chaque fichier inclu je vérifie que ce define est bien existant, ou le cas échéant
quelqu'un aurait tapé directement page.php dans le navigateur et pas passé par index.php ^^

Bref c'est bon a savoir les define passent pas ^^ (ce qui est assez logique en y pensant) et les classes non plus d'ailleurs.

Donc je peux te dire merci tu ma mis sur la voie ^^
J'aurais juste une question supplémentaire, les $_POST passeront

?
j'espere sinon c'est la galère

encore merci

[je pense que je reviendrais vous voir je sens qu'il y aura d'autres soucis

]

EDIT: bon j'ai les POST qui passent pas si quelqu'un a un exemple sous la main je suis preneur je cherche de mon coté, sachant qu'il faut que je garde le GET pour quelques parametres (page=blabla&etape=2 par exemple)

le GET fonctionne en tout cas

**ddelec24** · 20/05/2007, 18h46

bon a force de chercher des exemples tutos j'ai compris à peu près

j'ai fais évolué ta fonction getMyHTML pour correspondre à mes besoins:

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
17
18
19
20
21
var data = null;
var method = null;
function getMyHTML(method, data, serverPage, objID) {
var obj = document.getElementById(objID);
obj.innerHTML = '<div id="loading_ajax"><img src="design/ajax-loader.gif" alt=" " /> Chargement en cours...</div>' ;
xmlhttp.open(method, serverPage, true);
 
xmlhttp.onreadystatechange = function()
{
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
	{
	obj.innerHTML = xmlhttp.responseText || "impossible de recuperer la reponse";
	}
}
	if (data == '') {
		xmlhttp.send(null);
	} else {
		xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xmlhttp.send(data);
	}
}

pour les variables post j'ai fait comme ca:

Code :

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

1
2
3
	<div id="stepdiv">
		<script type="text/javascript">getMyHTML('POST','<?php echo $data?>','./INC/step3.php','stepdiv'); </script>
	</div>

par exemple, $data contenant:

Code :

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

1
2
3
4
5
6
7
 
$data = "";
if(isset($_POST['img01'])) $data .= '&img01=' . $_POST['img01'];
if(isset($_POST['img02'])) $data .= '&img02=' . $_POST['img02'];
...
if(isset($_POST['critique'])) $data .= '&critique=' . $_POST['critique'];
...

Je pourrais dire que c'est résolu,mais je récupère aussi un textearea (critique), et dès que je fais un saut de ligne ca ne fonctionne plus

ce qu'il y a, c'est que je met le contenu direct (mis a part les caracteres spéciaux convertis) dans la base de données, et à l'affichage je fais un nl2br()...

ca m'embete yaurais pas un moyen pour tout faire passé sans risque? genre par une conversion temporaire?
j'ai testé escape mais soit je l'ai pas placé ou il faut, soit ca marche pas

bref si quelqu'un peu m'aider encore... merci beaucoup.

Cordialement, DD.

**ddelec24** · 30/05/2007, 21h19

désolé pour le UP encore une fois

Pour le nl2br jai compris pourquoi ca ne fonctionne pas je pense.

En fait les < > etc... sont convertis en < >...
et donc j'ai l'impression que dans le post c'a serait interprété comme une variable :s
enfin si par exemple jai un champ (c'est pas que pour le textarea) qui contient un & ou un caractere spécial au final j'aurais :
"ceci est un <titre> exemple" qui devient en sortie "ceci est un "

je ne sais vraiment pas comment contourner le problème

quelqu'un aurait-il une idée?

Merci, Cordialement, DD.

**max44410** · 01/06/2007, 04h24

Bonjour,

J'ai le meme probleme, sauf que pour moi le script ne fonctionne pas. Ce n'est pas des images que je veux afficher, c'est juste un script PHP qui dure pendant 40 secondes en moyenne. l'image s'affiche juste a la fin du script je pense, juste avant de charger la fin de la page.

je ne sais pas trop comment faire... je ne gere pas du tout en AJAX

Merci

EDIT : Merci c'est bon pour moi, j'ai trouvé une solution ...

[AJAX] include et chargement en cours

JavaScript

Discussions similaires

Partager

Partager