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 -
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).
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:
- Script JavaScript qui fait un include en PHP
- Script vidéo youtube - Guide
- Easy php - Télécharger - Divers Web & Internet
- Ghost script - Télécharger - Polices de caractères
- Mas script - Accueil - Windows
- Telecharger javascript - Télécharger - Langages
7 réponses
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
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
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:
Mon AjaxFunction.js:
Et mon barre.php:
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()...
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()...
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>
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>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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 ?
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 ?
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
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
Bon, voilà mes 3 fonctions JavaScript:
Et mon html:
Je reste toujours au readyState 1
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
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>
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>