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

Question

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

Signaler

anatolekadel

Messages postés: 104
Date d'inscription: jeudi 26 mai 2011
Statut: Membre
Dernière intervention: 18 novembre 2011

- 24 oct. 2011 à 18:41
Alain_42

Messages postés: 5358
Date d'inscription: dimanche 3 février 2008
Statut: Membre
Dernière intervention: 13 février 2017

- 25 oct. 2011 à 21:56

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).

Afficher la suite

A voir également:

Script JavaScript qui fait un include en PHP
Script JavaScript qui fait un include en PHP ✓ - Forum - PHP
Execution d'un script javascript en php ✓ - Forum - PHP
Generation d'un script javascript avec du PHP ✓ - Forum - PHP
Script javascript dans un script php ✓ - Forum - PHP
Auto close php script (javascript) ✓ - Forum - PHP

7 réponses

Posez votre question

epitale · Answer 1 · 2011-10-24T19:55:38+0200

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

anatolekadel · Answer 2 · 2011-10-24T20:23:26+0200

Réponse 2 / 7

anatolekadel

Messages postés: 104
Date d'inscription: jeudi 26 mai 2011
Statut: Membre
Dernière intervention: 18 novembre 2011

3
24 oct. 2011 à 20:23

J'aime bien l'idée, je vais essayer et voir si cela me va
En tout cas merci ;)

anatolekadel · Answer 3 · 2011-10-24T20:57:57+0200

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()...

epitale · Answer 4 · 2011-10-24T21:29:38+0200

Réponse 4 / 7

epitale

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

869
24 oct. 2011 à 21:29

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>

anatolekadel · Answer 5 · 2011-10-24T21:44:03+0200

Réponse 5 / 7

anatolekadel

Messages postés: 104
Date d'inscription: jeudi 26 mai 2011
Statut: Membre
Dernière intervention: 18 novembre 2011

3
24 oct. 2011 à 21:44

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 ?

Afficher les 8 commentaires

Signaler

anatolekadel

Messages postés: 104
Date d'inscription: jeudi 26 mai 2011
Statut: Membre
Dernière intervention: 18 novembre 2011

3
24 oct. 2011 à 22:25

Bon, voilà mes 3 fonctions JavaScript:

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 = getXMLHttpRequest();
	// On ouvre la requete vers la page désirée
	xhr.open("GET", url, true);
	xhr.onreadystatechange = afficheContent(id, xhr);
	// dans le cas du get
	xhr.send(null);
}

function afficheContent(id, xhr){
		switch (xhr.readyState){
			case 1: document.getElementById(id).innerHTML = 'Instancié';
			break;
			case 2: document.getElementById(id).innerHTML = 'Envoi de la requête';
			break;
			case 3: document.getElementById(id).innerHTML = 'Réception du résultat';
			break;
			case 4: document.getElementById(id).innerHTML = xhr_object.responseText;
			break;
		}
}

Et mon html:

<a href="" onclick="envoieRequete('barre.php?id=4','header');return(false)" >test</a>

(j'ai une <div id= "header"></div>

Je reste toujours au readyState 1

Signaler

anatolekadel

Messages postés: 104
Date d'inscription: jeudi 26 mai 2011
Statut: Membre
Dernière intervention: 18 novembre 2011

3
24 oct. 2011 à 22:53

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'

Signaler

epitale

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

869
24 oct. 2011 à 23:12

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 ??

Signaler

anatolekadel

Messages postés: 104
Date d'inscription: jeudi 26 mai 2011
Statut: Membre
Dernière intervention: 18 novembre 2011

3
25 oct. 2011 à 02:28

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 ?

Signaler

epitale

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

869
25 oct. 2011 à 14:28

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

Signaler

anatolekadel

Messages postés: 104
Date d'inscription: jeudi 26 mai 2011
Statut: Membre
Dernière intervention: 18 novembre 2011

3
25 oct. 2011 à 18:37

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);
			}
		}

Alain_42 · Answer 6 · 2011-10-25T14:54:29+0200

Réponse 6 / 7

Alain_42

Messages postés: 5358
Date d'inscription: dimanche 3 février 2008
Statut: Membre
Dernière intervention: 13 février 2017

881
Modifié par Alain_42 le 25/10/2011 à 14:55

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

Signaler

anatolekadel

Messages postés: 104
Date d'inscription: jeudi 26 mai 2011
Statut: Membre
Dernière intervention: 18 novembre 2011

3
25 oct. 2011 à 18:37

Je n'ai pas compris l'intérêt de ce commentaire, mais merci quand même de vouloir m'aider :)

Alain_42 · Answer 7 · 2011-10-25T21:56:54+0200

Réponse 7 / 7

Alain_42

Messages postés: 5358
Date d'inscription: dimanche 3 février 2008
Statut: Membre
Dernière intervention: 13 février 2017

881
Modifié par Alain_42 le 25/10/2011 à 22:23

je voulais apporter une réponse complémentaire mais je vois dans un autre post que tu a déja passé ce stade

Votre réponse