11548 sujets

JavaScript, DOM et API Web HTML5

Chargement d'une page php dans un div

Bonjour à tous,

voilà mon problème :
j'ai un bouton sur ma page, et lorsque je clique sur ce bouton, je voudrais charger une page php dans une div spécifique.
Le but étant le suivant : la page php va s'exécuter dans la div, affichant à l'aide de "echo" les différentes opérations qui s'effectuent au fur et à mesure de l'exécution du code.

Lors du clic sur le bouton, je pensais utiliser la fonction ajax de jquery en mettant le nom de ma page php dans l'option 'url'. Par contre, comment spécifier le fait que ma page php doit s'exécuter dans une div particulière ?

D'avance merci de vos réponses.
Cherche un peu quand même ... Car là on parle vraiment de la base de Javascript, surtout si tu utilises JQuery ça sera encore plus simple.

Regarde du côté de "success" de $.ajax.
Un truc du genre :


$.ajax({
   url: 'tonfichier.php',
   .....
   success: function(data) {
        $('#tadiv').html(data);
   }
});
merci beaucoup pour ta réponse.
C'était la première idée que j'avais eue, mais je me demande si 'success' ne s'active pas qu'en cas de réussite d'exécution de la page php. N'hésite pas à me contredire si besoin.

J'ai continué de chercher, et j'ai découvert cette fonction jquery :
$("#maDiv").load("maPage.php");


En fait, le résultat est le même : mes "echo" ne s'affiche qu'à la fin de l'exécution de ma page php. Je vais devoir trouver une autre façon de procéder.
Modifié par Shadowrus (24 Oct 2011 - 21:43)
Bonsoir,

Si j'ai bien compris, tu veux ouvrir une page dans une div, c'est bien cela ?

Si c'est bien cela, on peut tout aussi bien se dire que tu cherches à afficher une page web... dans une box. Comme une ligthbox donc.

Pourquoi ré-inventer la roue ? S'il est avéré que c'est très bien de coder soi-même, ne fusse que pour en finir avec ces cms qui nivellent tout par le bas, pour autant, il est absurde de recréer la roue.

Aussi, je ne saurais que trop te conseiller de regarder du côté des box qui permettent aussi bien d'afficher des images ou des vidéos que des pages web. Que ce soit via Javascript que par le biais de JQuery.
Tiens, en tapant ca dans Google, ça a donné ceci :

Les Box, tous types de contenus

Après, et puisque tu as l'air calé en Javascript et jQuery etc, regarde comment tu peux décliner le principe pour ton besoin spécifique...

En espérant avoir fait avancer le schmilblick, et cordialement,
Neum
Modifié par Neum (24 Oct 2011 - 23:09)
Shadowrus a écrit :
merci beaucoup pour ta réponse.
C'était la première idée que j'avais eue, mais je me demande si 'success' ne s'active pas qu'en cas de réussite d'exécution de la page php. N'hésite pas à me contredire si besoin.

Pour remplacer "success" tu as "complete" qui fait "pareil" sauf que là, ça marche aussi si la page PHP ne renvoi pas 200.
Shadowrus a écrit :
je me demande si 'success' ne s'active pas qu'en cas de réussite d'exécution de la page php

La méthode success est exécutée si le serveur renvoie un statut HTTP 200 OK pour la ressource appelée (ici une page ou un fragment de HTML généré par un script PHP).
Mais en quoi serait-ce un problème?
À toi de prévoir aussi le comportement en cas de statut différent (404 et 500 par exemple).
Modifié par fvsch (25 Oct 2011 - 15:13)
Merci pour vos réponses.
Et merci pour le lien sur les lightbox, je ne savais pas qu'elles pouvaient aussi afficher du contenu web.

J'ai pu retravailler un peu ce soir sur mon code, et je pense que la question que j'ai posée dans ce post ne correspond pas tout à fait à mon vrai souci. Je vais donc essayer de le redécrire de façon plus précise :

J'ai aujourd'hui une page web avec un bouton. Si je clique sur ce bouton, je lance une requête ajax avec jquery pour exécuter une page php : 


	$("#captureButton").click( function() {
		// On enlève le bouton de lancement
		$("#startCapture").hide();
		// On affiche le loader
		$("#loader").show();
		// On execute la capture
		jQuery.ajax({
			type: "POST",
			url: "captureImages.php",
			dataType: "html",
			cache: false,
			async: false,
			data: {},
			success: function(msg){
				$("#captureArea").html($("#captureArea").html()+msg);
			},
			error: function(msg){
				$("#captureArea").html($("#captureArea").html()+msg);
			}
		});
		// On cache le loader
		$("#loader").hide();
	});


Dans ma page 'captureImages.php', j'ai une boucle 'for' qui effectue un traitement.
Après chaque traitement, je fais un "echo" du résultat, toujours dans la boucle.
Seulement voilà, les "echo" ne s'affiche pas au fur et à mesure que le traitement est effectué.
Ils s'affichent tous d'un coup à la fin de la boucle for, quand le contenu de la page php est totalement exécuté.

Je n'ai malheureusement pas le temps (vu l'heure) de faire des tests plus poussés.
Mais je me demande d'où vient mon souci : est-ce qu'il est côté js : j'attends le statut "success" pour afficher le contenu de ma page dans la div prévue à cet effet ?
Je comprends le statut 200 comme étant la réussite du chargement de la page et donc la bonne exécution du code php. Mais peut-être ai-je tort ?

Ou est-ce qu'il est côté php ?
Je pense que c'est plutôt ce dernier cas qui est la cause de mon problème :
mes traitements sont assez longs, la boucle met donc un certain temps pour s'exécuter, et je pense que les "echo" ne s'affichent qu'une fois la page totalement exécutée ....
Vous allez me dire que ce sont les bases de php ... Smiley ohwell

Une solution serait peut-être de remonter ma boucle 'for' d'un niveau et la mettre dans le js : ainsi, dans le 'for', je pourrais exécuter une requête ajax, à la fin de laquelle je pourrais ajouter le résultat à ma div #captureArea.

Le souci est que ma page php 'captureImages.php' pourra être appelée aussi en crontab, je dois donc garder ma boucle 'for' à l'intérieur de cette page ...
En fin de compte, ça ne sera peut-être pas possible d'avoir exactement la même page php pour le traitement sur mon site web via le bouton, et pour ma table de cron ... Smiley decu

Enfin bon, la nuit porte conseil Smiley smile .
Encore merci pour vos réponses.
Modifié par Shadowrus (26 Oct 2011 - 02:22)
Si tu as un traitement long côté serveur, à toi de voir si tu peux optimiser ce traitement (pas censé être long?), mettre en cache le résultat du traitement et appeler directement la version en cache (si c'est le même résultat pour chaque requête ou s'il y a un nombre limité de résultats), ou faire des traitements séparés avec une requête Ajax pour chacun...

Shadowrus a écrit :
Le souci est que ma page php 'captureImages.php' pourra être appelée aussi en crontab, je dois donc garder ma boucle 'for' à l'intérieur de cette page ...

Avec un code bien organisé et un simple paramètre GET (ou bien deux scripts PHP qui font appel à une même classe de traitement dans un troisième script), tu peux gérer les différents cas de figure. À toi de voir comment tu veux organiser ton code pour éviter la duplication de code.
Sujet clos
Aller à