Script JavaScript qui fait un include en PHP

Résolu
anatolekadel Messages postés 102 Date d'inscription   Statut Membre Dernière intervention   -  
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   -
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).

A voir également:

7 réponses

Réponse 1 / 7
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
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
0
Réponse 2 / 7
anatolekadel Messages postés 102 Date d'inscription   Statut Membre Dernière intervention   3
 
J'aime bien l'idée, je vais essayer et voir si cela me va
En tout cas merci ;)
0
Réponse 3 / 7
anatolekadel Messages postés 102 Date d'inscription   Statut Membre Dernière intervention   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()...
0
Réponse 4 / 7
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
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>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
anatolekadel Messages postés 102 Date d'inscription   Statut Membre Dernière intervention   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 ?
0
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
heu ne touche a rien dans la fonction ajax, laisses
if(XHR.readyState == 4) {
document.getElementById(cadre).innerHTML = XHR.responseText;
}
meme cadre ne le remplace pas par position,
c'est quand tu appel la fonction avec request('barre.php','position') que url et cadre sont remplacé par les 2 parametres qui conviennent
0
anatolekadel Messages postés 102 Date d'inscription   Statut Membre Dernière intervention   3
 
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
0
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
pourquoi tu fait une function afficheContent(id, xhr) ? porquoi tu veux détailler le processus comme ca avec tes switch ?

pour répondre a la demande de ton premier post tu a rien de plus a faire qu'a copier/coller ce que j'ai mi la seul chose a changer c'est de mettre
<a href="" onclick="request('barre.php','header');return(false)" >test</a>
0
anatolekadel Messages postés 102 Date d'inscription   Statut Membre Dernière intervention   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'
0
epitale Messages postés 3943 Date d'inscription   Statut Membre Dernière intervention   915
 
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 ??
0
Réponse 6 / 7
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
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
0
anatolekadel Messages postés 102 Date d'inscription   Statut Membre Dernière intervention   3
 
Je n'ai pas compris l'intérêt de ce commentaire, mais merci quand même de vouloir m'aider :)
0
Réponse 7 / 7
Alain_42 Messages postés 5361 Date d'inscription   Statut Membre Dernière intervention   894
 
je voulais apporter une réponse complémentaire mais je vois dans un autre post que tu a déja passé ce stade
0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
recherche script "les visiteurs"
stoukboy -
brucine -

22 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
javascript:void(0);
nano -
JCVD -

18 réponses