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 -
A voir également:
- Script JavaScript qui fait un include en PHP
- Script vidéo youtube - Guide
- Easy php - Télécharger - Divers Web & Internet
- Telecharger javascript - Télécharger - Langages
- Mas script - Accueil - Windows
- Ghost script - Télécharger - Polices de caractères
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>