Script JavaScript qui fait un include en PHP

Résolu
anatolekadel Messages postés 112 Statut Membre -  
Alain_42 Messages postés 5413 Statut Membre -
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

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

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

    Posez votre question
  6. anatolekadel Messages postés 112 Statut Membre 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
    1. epitale Messages postés 4115 Date d'inscription   Statut Membre Dernière intervention   920
       
      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
    2. anatolekadel Messages postés 112 Statut Membre 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
    3. epitale Messages postés 4115 Date d'inscription   Statut Membre Dernière intervention   920
       
      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
    4. anatolekadel Messages postés 112 Statut Membre 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
    5. epitale Messages postés 4115 Date d'inscription   Statut Membre Dernière intervention   920
       
      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
  7. Alain_42 Messages postés 5413 Statut Membre 904
     
    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
    1. anatolekadel Messages postés 112 Statut Membre 3
       
      Je n'ai pas compris l'intérêt de ce commentaire, mais merci quand même de vouloir m'aider :)
      0
  8. Alain_42 Messages postés 5413 Statut Membre 904
     
    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
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

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

22 réponses
Arrondir nombre Math.round
ohklik -
Sugel -

1 réponse