Script JavaScript qui fait un include en PHP [Résolu/Fermé]

Signaler
Messages postés
104
Date d'inscription
jeudi 26 mai 2011
Statut
Membre
Dernière intervention
18 novembre 2011
-
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
-
Bonjour,
Voilà, j'ai une page principale qui se compose d'un ensemble d'onglets.
Chaque onglets contient le résultat d'un script php. Je fais donc des includes pour chaque onglets.
Le hic, c'est qu'au chargement de ma page principale, le navigateur charge le contenu de tous les onglets. Cela ne m'arrange pas beaucoup car les onglets contiennent beaucoup de code; et cela prend du temps (enfin, tout est relatif, une seconde seulement en local, mais c'est déjà énorme, et je n'ai même pas envi d'essayer avec un serveur distant ^^).

Donc, j'aurai aimé faire des Onclick sur chaque entête d'onglets. Et donc, dès qu'on clique sur l'onglet News, le contenu du script news.php soit affiché.
J'ai d'abord pensé à l'iFrame Loading (https://openclassrooms.com/fr/courses/245710-ajax-et-lechange-de-donnees-en-javascript/245253-iframe-loading mais ça n'était pas le choix le plus judicieux, car je ne connais pas la taille de mon texte à afficher.

Alors, j'aurai donc besoin d'une astuce pour que surClick d'une div (ou de n'importe quoi d'autre); un script PHP s'exécute et affiche son résultat dans une autre div comme si il était déjà là ^^.

Ça ressemble à de l'AJAX, mais j'aurai aimé autre chose (AJAX étant dur à mettre en place pour pas grand chose).

7 réponses

Messages postés
3926
Date d'inscription
jeudi 5 février 2009
Statut
Membre
Dernière intervention
27 octobre 2017
869
Bonsoir anatolekadel,

charger dynamiquement une div sans ajax, je voie pas comment faire, mais si ca te rebutes pas tant que çà :

dans le code de ton menu :
<a href="" onclick="request('url/deton.php','id_de_destination');return(false)">titre de l'onglet</a>

et dans une partie javascript :

function request(url,cadre) {
var XHR = null;
if(window.XMLHttpRequest) // Firefox
XHR = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
XHR = new ActiveXObject("Microsoft.XMLHTTP");
else { alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}

XHR.open("GET",url, true);
XHR.onreadystatechange = function attente() {
if(XHR.readyState == 4) {
document.getElementById(cadre).innerHTML = XHR.responseText;
}
}
XHR.send(null);
return;
}




pi c'est tout, le contenu de tes echos dans ton.php seront affiché dans la div prevu par l'action de l'onglet
Messages postés
104
Date d'inscription
jeudi 26 mai 2011
Statut
Membre
Dernière intervention
18 novembre 2011
3
J'aime bien l'idée, je vais essayer et voir si cela me va
En tout cas merci ;)
Messages postés
104
Date d'inscription
jeudi 26 mai 2011
Statut
Membre
Dernière intervention
18 novembre 2011
3
Bon, voilà ce que j'ai produit (source: https://openclassrooms.com/fr/courses/245710-ajax-et-lechange-de-donnees-en-javascript/244798-lobjet-xmlhttprequest#ss_part_2 && http://www.javascriptfr.com
Mon code HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>test</title>

<script type="text/javascript" src="AjaxFunction.js"></script>
</head>

<body>

<div id="conteneur">
	  <div id="header">
	  </div>
	  <div id="gauche">
	  <a href="" onclick="envoieRequete('barre.php?id=4','header');" >test</a>
	  </div>
	  <div id="centre">
	  </div>
</div>
</body>
</html>


Mon AjaxFunction.js:
function getXMLHttpRequest() {
	var xhr = null;
	
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
	
	return xhr;
}

function envoieRequete(url,id)
{
	var xhr_object = getXMLHttpRequest();
	var position = id;

	// On ouvre la requete vers la page désirée
	xhr_object.open("GET", url, true);
	xhr_object.onreadystatechange = function(){
		switch (xhr_object.readyState){
			case 1: document.getElementById(position).innerHTML = 'Test 1';
			alert('test');
			break;
			case 2: document.getElementById(position).innerHTML = 'Test 2';
			break;
			case 3: document.getElementById(position).innerHTML = 'Test 3';
			break;
			case 4: document.getElementById(position).innerHTML = xhr_object.responseText;
			break;
		}
	}
	// dans le cas du get
	xhr_object.send(null);

}

Et mon barre.php:
<?php
echo 'coucou';
?>


Ca ne fonctionne pas, j'arrive pas au switch (case 1)...
Je l'avais dit que j'étais nul en AJAX, d'où viendrait le soucis, à savoir que j'entre bien dans ma fonction envoieRequete()...
Messages postés
3926
Date d'inscription
jeudi 5 février 2009
Statut
Membre
Dernière intervention
27 octobre 2017
869
tu n'as pas rempli les variables...
en fait la fonction
function request(url,cadre) { } que je t'ai mi,
n'y change rien par contre tu l'appels comme ca
<a href=""onclick="request('barre.php','position');return(false)">txt</a>
ainsi pour tes autres onglets,
<a href=""onclick="request('autre.php','autreid');return(false)">txt2</a>

dans ton html tu auras quelque par ou il faut
<div id="position"></div>
Messages postés
104
Date d'inscription
jeudi 26 mai 2011
Statut
Membre
Dernière intervention
18 novembre 2011
3
Bon, effectivement, j'avais quelques soucis...
Là, mon xhr_object est bien instancié. Il affiche Test 1 à la div header.
Mais c'est tout, il n'a pas l'air de passer à Test 2 ni même au coucou du php...

Donc, j'en déduis que la méthode send n'a pas été appelée. D'où vient cette erreur ?
Messages postés
104
Date d'inscription
jeudi 26 mai 2011
Statut
Membre
Dernière intervention
18 novembre 2011
3
Ben, je voulais détailler pour voir ce qui clochait.
Mais j'ai copié/collé et maintenant, ça marche; franchement, je vois pas d'où venait le soucis Oo'
Messages postés
3926
Date d'inscription
jeudi 5 février 2009
Statut
Membre
Dernière intervention
27 octobre 2017
869
après si tu veux passer des variable js plutot que des echos le mieux c'est d'utiliser json... après tu reconstruis les div contenues dans le header coté client....
enfin bon pour l'heure le sujet est résolu ??
Messages postés
104
Date d'inscription
jeudi 26 mai 2011
Statut
Membre
Dernière intervention
18 novembre 2011
3
Mmmh, presque...

J'ai un dernier soucis avec l'AJAX; donc, dans mon script PHP (celui qui renvoie un texte vers la page principale); j'ai parfois du code JavaScript. Celui-ci n'a pas l'air d'être interprété. Est-ce normal ? Et comment résoudre ce problème ?
Messages postés
3926
Date d'inscription
jeudi 5 février 2009
Statut
Membre
Dernière intervention
27 octobre 2017
869
oui c'est normal (php c'est coté serveur, le JS coté client)
pour transmettre une variable a JS me semble que tu peux faire
.....
?>
<script type="text/javascript">
variablejs="<?php echo($variablephp); ?>";
</script>
<?php
.....

pour des fonctions sur des éléments et bien tu peux les mettres ailleurs dans un fichier .js appelé dans ton index...

ou bien et bien ca depend de ton code et de ce que tu veux faire....

bonne continuation
Messages postés
104
Date d'inscription
jeudi 26 mai 2011
Statut
Membre
Dernière intervention
18 novembre 2011
3
Mais moi, j'ai un nombre de script non défini (il dépend du nombre de résultat d'une requête SQL).
Donc, je n'ai pas simplement des variables JS à transmettre; mais des scripts entier.

Mais, c'est bon, j'ai fouiné sur Internet et je suis tombé sur ce code (source: http://dev.petitchevalroux.net/javascript/executer-javascript-appel-ajax-javascript.357.html :
var scripts = e.getElementsByTagName('script');
		for(var i=0; i < scripts.length;i++)
		{
			/*Sous IE il faut faire un execScript pour que les fonctions soient définie en globale*/
			if (window.execScript)
			{
				/*On replace les éventuels com' html car IE n'aime pas ça*/
				window.execScript(scripts[i].text.replace('<!--',''));
			}
			/*Sous les autres navigateurs on fait un window.eval*/
			else
			{
				window.eval(scripts[i].text);
			}
		}
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
881
modifies:
switch (xhr_object.readyState){
case 1:


par
switch (xhr_object.responseText){ 
   case 1: 


et dans ton script php

il faut recuperer l'id passé dans l'url par un $_GET et renvoyer 1 2 ou 3 au lieu de coucou

il n'y a pas de "coucou" dans ton switch case
Messages postés
104
Date d'inscription
jeudi 26 mai 2011
Statut
Membre
Dernière intervention
18 novembre 2011
3
Je n'ai pas compris l'intérêt de ce commentaire, mais merci quand même de vouloir m'aider :)
Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
881
je voulais apporter une réponse complémentaire mais je vois dans un autre post que tu a déja passé ce stade