Utiliser une trame centrale pour afficher toute la page

**apt** · 20/11/2008, 01h53

Bonjour à tous,

Comment faire pour afficher toute page sélectionnée par l'utilisateur, dans la trame centrale :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="center">
      Ici sera affichée toute page sélectionnée
</div>

avec un code PHP ou PHP+AJAX, au lieu de la phrase dans le code fourni :

Ici sera affichée toute page sélectionnée

Voila le code de la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<? session_start() ?> 
<!doctype html public "-//W3C//DTD HTML 4.0 //EN"> 
<html>
<head>
       <title>Title here!</title>
</head>
<body>
<div id="global">
<div id="title">
</div><div id="nav_top">
  <ul>
      <li class="right"><a href="index.php">Acceuil</a></li>
      <li class="right"><a href="register.php">S'enregistrer</a></li>
      <li class="right"><a href="edit.php">Controls</a></li>
  </ul>
</div>
<div id="nav_back_next"></div>
<div id="content">
   <div id="left"></div>
   <div id="center">
      Ici sera affichée toute page sélectionnée
   </div>
   <div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

Merci d'avance

**LoveAngel** · 20/11/2008, 02h26

Bonsoir,

2 solutions s'offrent à toi :
1 : une iframe, mais c'pas très propre de l'avis de certains :/ , même si c'est surement plus pratique
ensuite avec ça sur tes liens, ça marchera

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onClick="document.getElementsByTagName( 'iframe' )[0].location.href='index.php'; return false;"

2 : une requête AJAX

t'aura juste à faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
var _xmlHttp = getXMLHTTP();
function getXMLHTTP(){
  var xhr=null;
  if(window.XMLHttpRequest) // Firefox et autres
  xhr = new XMLHttpRequest();
  else if(window.ActiveXObject){ // Internet Explorer
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e1) {
        xhr = null;
      }
    }
  }
  else { // XMLHttpRequest non supporté par le navigateur
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
  }
  return xhr;
}
function callSuggestions(page){
  if(_xmlHttp&&_xmlHttp.readyState!=0){
    _xmlHttp.abort()
  }
  if(_xmlHttp){
  //appel à l'url distante
    _xmlHttp.open("GET",'getcontent.php?page=' + page ,true);
    _xmlHttp.onreadystatechange=function() {
      if(_xmlHttp.readyState==4 ) {
        document.getElementById( 'center' ).innerHTML = _xmlHTTP.responseText;
      }
    };
    // envoi de la requête
    _xmlHttp.send(null);
  } 
}

Puis sur tes liens

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onClick="callSuggestions( 'index.php' );return false;"

Et enfin, tu crée ton script getcontent.php, qui te renverra le code exact à afficher dans ta div ! ( donc sans balises html, head, body )

Mais pourquoi ne pas réactualiser la page ?

**apt** · 20/11/2008, 02h41

Bonjour LoveAngel,

Merci pour ton code ajax.

Envoyé par LoveAngel

Mais pourquoi ne pas réactualiser la page ?

Tu veux dire avec du code PHP seulement ?

Ne sera-se pas long à recharger ?

Et j'ai enttendu dire que AJAX recharge la page sans actualiser la page index !!?

et puis j'aimerais bien avoir les techniques AJAX dans mon script ....

**apt** · 20/11/2008, 03h05

Bon voila, j'ai modifié le code de ma page.index.php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<? session_start() ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><html>
<head>
<title>Title here!</title>
<script language="JavaScript" type="text/javascript">
var _xmlHttp = getXMLHTTP();
function getXMLHTTP(){
  var xhr=null;
  if(window.XMLHttpRequest) // Firefox et autres
  xhr = new XMLHttpRequest();
  else if(window.ActiveXObject){ // Internet Explorer
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e1) {
        xhr = null;
      }
    }
  }
  else { // XMLHttpRequest non supporté par le navigateur
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
  }
  return xhr;
}
function callSuggestions(page){
  if(_xmlHttp&&_xmlHttp.readyState!=0){
    _xmlHttp.abort()
  }
  if(_xmlHttp){
  //appel à l'url distante
    _xmlHttp.open("GET",'getcontent.php?page=' + page ,true);
    _xmlHttp.onreadystatechange=function() {
      if(_xmlHttp.readyState==4 ) {
        document.getElementById( 'center' ).innerHTML = _xmlHTTP.responseText;
      }
    };
    // envoi de la requête
    _xmlHttp.send(null);
  } 
}
</script>
 
</head>
<body>
<div id="global">
<div id="title">
</div><div id="nav_top">
  <ul>
      <li class="right"><a href="index.php" onClick="callSuggestions( 'index.php' );return false;">Acceuil</a></li>
      <li class="right"><a href="register.php" onClick="callSuggestions( 'index.php' );return false;">Inscription</a></li>
      <li class="right"><a href="edit.php" onClick="callSuggestions( 'index.php' );return false;">Controls</a></li>
  </ul>
</div>
<div id="nav_back_next"></div>
<div id="content">
   <div id="left"></div>
   <div id="center">
      getcontent.php ????
   </div>
   <div id="right"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

Mais que devrais-je mettre dans le fichier getcontent.php ?

parce que chaque page est différente de l'autre par son contenu

Merci d'avance.

**LoveAngel** · 20/11/2008, 10h02

Bonjour,

Ben, justement, ta page getcontent.php a pour but de retourner cette page, tu as $_GET[ 'page' ] pour savoir quelle page tu veux, donc tu peux savoir quoi afficher ^_^'

Tu veux dire avec du code PHP seulement ?

Réactualiser la page quand tu clique sur un lien, c'est le comportement normal d'un navigateur, non ?

Ne sera-se pas long à recharger ?

C'est pas pour les 1k de texte en plus que tu aura vraiment une grosse différence, je pense, donc ça prendra sensiblement autant de temps avec AJAX

Et j'ai enttendu dire que AJAX recharge la page sans actualiser la page index !!?

En fait ... ça ne recharge rien. AJAX, c'est ... un moyen d'utilisation de JS pour envoyer une requête HTTP, récupérer sa réponse, et pouvoir ensuite la traiter. Donc si tu demande les pages que tu veux afficher, AJAX se chargera de récupérer leur code HTML, et tu as plus qu'à l'afficher ...

et puis j'aimerais bien avoir les techniques AJAX dans mon script ....

Frime, ou haine personnelle ?
Faut aussi savoir que AJAX, c'est JS, donc désactivation de JS = plus d'AJAX = ton bel effet tout cassé = retour au bon vieux refresh de la page quand tu clique sur le lien ^_^
Ca serais plus simple de changer de page, quand même.

PS :
Quand j'ai mis le onClick avec 'index.php', c'étais un exemple hein, oublie pas de le changer

**blueice** · 20/11/2008, 10h14

Pourquoi tant de complications ?

Tu découpes ta page HTML en page php par exemple
une page meta.php

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<link rel="stylesheet" href="http://www.tonsite.com/css/styles.css" media="screen" />
<link rel="stylesheet" href="http://www.tonsite.com/css/print.css" media="print" />
<!--[if IE]>
   <link rel="stylesheet" href="http://www.tonsite.com/css/stylesIE.css" media="screen" />
<![endif]-->
<?php include($_SERVER['DOCUMENT_ROOT'].'/includes/functions.php'); ?>
<?php echo description(); ?>
<?php echo keywords(); ?>
<script src="http://www.tonsite.com/js/validatecontactform.js" type="application/javascript" language="javascript"></script>

menu.php, footer.php,...

Et ainsi de suite pour toute portion de code fixe, tu remplaces la portion de code dans la page contact.php par exemple par :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<?php include($_SERVER['DOCUMENT_ROOT'].'/includes/meta.php'); ?>

C'est ultra simple à gérer. Pas de problème de JS.

Utiliser une trame centrale pour afficher toute la page

Langage PHP

Vue hybride

Discussions similaires

Partager

Partager