CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 12:57:18

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Frames

> CHARGER UNE PAGE PHP OU HTML DANS UN DIV

CHARGER UNE PAGE PHP OU HTML DANS UN DIV

Information sur la source

Note :

9,08 / 10

Catégorie :Frames Classé sous :div, ajax, xmlhttprequest, onreadystatechange Niveau :Débutant Date de création :05/05/2006 Date de mise à jour :05/05/2006 15:55:27 Vu :85 533

Auteur : atlante34

Ecrire un message privé

Commentaire sur cette source (128)

Ajouter un commentaire et/ou une note

Description

permet de charger une page html dans un div
permet de ne pas utliser les frames

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>ricardo-test</title>
<script type="text/javascript">
function envoieRequete(url,id)
{
var xhr_object = null;
var position = id;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else
if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
// On ouvre la requete vers la page désirée
xhr_object.open("GET", url, true);
xhr_object.onreadystatechange = function(){
if ( xhr_object.readyState == 4 )
{
// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;
}
}
// dans le cas du get
xhr_object.send(null);
}
</script>
<style type="text/css">
body
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin:0;
padding: 0;
}
#header
{
height: 75px;
background-color: #99CCCC;
}
#conteneur
{
position: absolute;
width: 100%;
height:100%;
background-color:#D3D3D3;
}
#centre
{
background-color:#9999CC;
margin-left: 150px;
}
#gauche
{
position: absolute;
height: 750px;
background-color: #00CED1;
width: 150px;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="header">
</div>
<div id="gauche">
<a href="#" onclick="envoieRequete('bande.html','header');" >test</a>
<a href="#" onclick="envoieRequete('menu.html','centre');" >test2</a>
</div>
<div id="centre">
</div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>ricardo-test</title>

<script type="text/javascript">
function envoieRequete(url,id)
{
	var xhr_object = null;
	var position = id;
	   if(window.XMLHttpRequest)  xhr_object = new XMLHttpRequest();
	  else
	    if (window.ActiveXObject)  xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 

	// On ouvre la requete vers la page désirée
	xhr_object.open("GET", url, true);
	xhr_object.onreadystatechange = function(){
	if ( xhr_object.readyState == 4 )
	{
		// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
		document.getElementById(position).innerHTML = xhr_object.responseText;
	}
	}
	// dans le cas du get
	xhr_object.send(null);

}
</script>

<style type="text/css">
body 
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin:0;
padding: 0;
}

#header 
{
height: 75px;
background-color: #99CCCC;
}

#conteneur 
{
position: absolute;
width: 100%;
height:100%;
background-color:#D3D3D3;
}

#centre 
{
background-color:#9999CC;
margin-left: 150px;
}

#gauche
{
position: absolute;
height: 750px;
background-color:  #00CED1;
width: 150px;
}

</style>
</head>

<body>

<div id="conteneur">
	  <div id="header">
	  </div>
	  <div id="gauche">
	  <a href="#" onclick="envoieRequete('bande.html','header');" >test</a>
	  <a href="#" onclick="envoieRequete('menu.html','centre');" >test2</a>
	  </div>
	  <div id="centre">
	  </div>
</div>
</body>
</html>

Historique

05 mai 2006 10:06:14 :: simplification du code
05 mai 2006 10:12:53 :: idem
05 mai 2006 11:52:59 :: erreur repérée par PetoleTeam . erreur corrigée ...
05 mai 2006 15:55:27 :: erreur de css

Sources de la même categorie

DIAPORAMA SIMPLE PAR IFRAME par sartoz

CHARGER UNE PAGE WEB DANS UN DIV par flk974

DYNAMIC CONTENT DANS UNE DIV par duterte

INCLUDE EN JAVASCRIPT par yousfane

PASSER DE FRAMES A UNE PAGE par David78390

Toutes les sources de la catégorie Frames

Sources en rapport avec celle ci

SIMULER UN SERVEUR COMET (EN PUSH) EN PHP ET JS par sebcap26

MOTEUR DE RECHERCHE SANS PHP par jdmcreator

[GAG] GESTION AJAX GÉNÉRALISÉE par bultez

AJAX EN MOINS DE 50 LIGNES par Kimjoa

CLASSE AJAX par casper

Commentaires et avis

Commentaire de toutphp le 05/05/2006 11:05:43

Juste pour être sur d'avoir tout compris : je fais

envoieRequete('resultat.php','centre');

et le resultat de la page php ce mettra dans le div d'id "centre" ?

Commentaire de PetoleTeam le 05/05/2006 11:12:46

Bonjour...

A corriger la ligne
xhr_object = new ActiveXObject(Microsoft.XMLHTTP);
par
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");

Sinon intéréssant...

Commentaire de atlante34 le 05/05/2006 11:50:34

Pour repondre a TOUTPHP,
si tu fais envoieRequete('resultat.php','centre');
la page resultat.php s'affichera dans le div dont le id est 'centre'.

C'est mon premier prog en AJAX, donc si il y a des remarques à faire ...

Commentaire de PaDa le 05/05/2006 12:23:51

intéressant !
niveau compatibilité avec les browsers/systèmes connus, ca donne quoi ?

Commentaire de coucou747 le 05/05/2006 13:06:40 administrateur CS

c'est sencé marcher partout, mais faut pas faire ça partout, c'est à consomer avec modération... sinon, les moteurs de recherches indexent mal...

Commentaire de PaDa le 05/05/2006 13:47:02

Ok ;)
L'indexation peut ne pas être une priorité.. Tout dépend ce qu'on veut faire
Merci en tout cas

Commentaire de coucou747 le 05/05/2006 14:12:54 administrateur CS

c'est pour ça que j'ai dit que ça dépendait de ce que l'on voulait faire...

Commentaire de atlante34 le 05/05/2006 15:53:53

On peut encore faire mieux pour le code,
Par exemple, si on veut que la page se charge dans le div au demarrage de la page, il suffit de mettre a la place de :
<body>
mettre,
<body onload="envoieRequete('menu.html','centre');">

Permet d'enlever le lien et de rendre la page plus dynamique ...

Commentaire de toutphp le 05/05/2006 16:00:38

Mais je pense que l'interet de cet exemple était de montrer qu'il n'y avait pas de rechargement de page lors du click.
Alors qu'avec ton "onload" le contenu est directement présent sur la page au chargement.

Commentaire de atlante34 le 05/05/2006 16:02:57

A TOUTPHP,
Le principe de onload est de faire par exemple un site WEB dynamique, sans utiliser les frames.
Ici le onload charge les vontenus des div, exemples des menus en haut et a gauche, et permet ensuite de charger rien que le milieu.

Commentaire de coucou747 le 05/05/2006 16:06:51 administrateur CS

"dynamique".... dynamique ça s'ignifie que le contenu peut changer en sans faire de mise à jour... là, c'est pas dynamique car t'as pas de langage serveur... js est un langage statique... disons que ça fait un effet sympa, mais c'est pas du dynamique...

Commentaire de GRAZNOK le 06/05/2006 14:25:10

Tu te contredis coucou747 : dynamique signifie que la page est générée par un serveur, ce qui est contraire à : "le contenu peut changer en sans faire de mise à jour".

Le principe d'AJAX c'est que le contenu d'une page extérieure peut être fusionnée à la page consultée sans que le navigateur recharge la page consultée. Je ne sais pas si "dynamique" est le mot approprié ; sinon "dynamique côté client".

Pour y ajouter le "dynamique côté serveur", il faudrait que la page extérieure soit du PHP, ASP ou autre. Ainsi on aurait les deux côtés du dynamique : "client" grâce à AJAX et "serveur" grâce à PHP.

Commentaire de atlante34 le 06/05/2006 15:16:15

merci Graznok

GTR en force ...

Commentaire de coucou747 le 06/05/2006 15:28:11 administrateur CS

GRAZNOK, je ne me contredis pas vraiment... le contenu change par exemple : la valeur d'un compteur de visite, le serveur ajoute 1 à chaque visite, et pourtant, il n'y a pas de mise à jour... c'est une partie dynamique...

dynamique coté client, ça n'a selon moi pas de sens, disons que cette source permet aux gens d'ajouter une fonctionalitée comme l'abscence de rechargement...

tu devrais quand même insérer un parseur pour enlever les balises head, et n'insérer que le contenu entre <body> et </body> comme ça, tu pourrais charger tout style de site (mais le Css pourrait géner...)

ou sinon, tu peux ajouter un effet genre : la nouvelle page est affichée à coté avec une opacitée à 0.5, puis elle vient dessus, puis l'opacité des deux pages s'inverse... puis la page précédente prend comme opacité 0 et la nouvelle 1... bref, on peut faire des effets assez réussi...

je noterais bien 8, mais j'attend... tu ne gères pas les erreurs éventuelles, comme l'abscence de xmlhttprequest sur le navigateur, j'attend la prochaine mise à jour avant de noter...

Commentaire de badoux le 06/05/2006 19:13:17

Bonjour,

Perso en PHP, je ferai un simple include dans un div, serte moin dynamique du fais que cela se passe côté serveur et non client !

exemple simple en php :
<div id="center"><?php include($_GET['pageID']); ?></div>

L'exemple ci-dessus ce n'est même pas du php et encors moin de l'AJAX ! Mais du simple XMLHttpRequest qui existe depuis longtemps !

enfin tout ca pour dire que ca ne devrai pas être placé sur ce forum ;-)

A++

Commentaire de GRAZNOK le 06/05/2006 19:18:28

Qu'est-ce que c'est l'AJAX pour toi, précisement ?

D'autre part, on est bien sur le forum javascriptfr.com, et il y a du javascript, non ?

Commentaire de PaDa le 06/05/2006 20:28:03

Sans vouloir couper l'herbe sous le pied de Badoux, AJAX c'est juste des vieilles technologies qui sont remises au gout du jour a grand coup de couvertures dans les magazines. On le met un peu à n'importe quelle sauce peut être, mais en l'occurence cette source (Javascript/XMLHttpRequest...) c'est typiquement de l'AJAX quand même.. Ou alors on m'aurait menti ?

Commentaire de GRAZNOK le 06/05/2006 22:40:29

AJAX = Asynchronous Javascript And Xml.
Donc c'est tout simplement l'utilisation de Javascript dans le but de transmettre de l'information sous forme XML, de manière asynchrone (c'est-à-dire grâce l'utilisation d'une méthode quelconque - ici un objet XMLHttpRequest - qui effectue cette opération n'importe quand dans le code).

Je remercie au passage l'auteur, Atlante34, pour en avoir fourni un exemple concret.

En ce qui concerne le standard W3C, il faut savoir que XMLHttpRequest n'en fait pas partie. D'après des recherches perso, le W3C aurait développé un moyen similaire...

Commentaire de badoux le 07/05/2006 00:25:25

bonsoir à tous,

Oui sur le coup de l'emplacement du message c'est vrai que je n'ai pas assuré, je suis vraiment con... je suis tellement sur des forum php que je me persuade d'y etre même si j'y suis pas ! Veuillez m'excusez !:-o

Au sujet de l'AJAX, ce n'est qu'un terme marketing pour relancer ces vieilles functions javascript que l'on avait oublié !

Voila à bientôt et désolé pour le dérangement !;-)
bonne nuit

Commentaire de williamprotti le 07/05/2006 14:41:28

Merci beaucoup pour cette ressource!!!
Je voudrai juste savoir si elle est fiable, si elle est bien protégée etc...!!
Car je commence a l'utiliser partout sur mon site!!

Merci !

Commentaire de apxa le 07/05/2006 15:47:01

Iop all,
j'ai pas l'impression qu'au niveau compatibilite ce soit top (FF retourne xhr_object.open operation non permise).

Have Fun ;)

Commentaire de Arto_8000 le 07/05/2006 20:28:44

APXA -> Plusieurs naviagteurs retournent cette erreur, car par question de sécurité tu ne peux faire une requête sur un autre site.

Ex: Si ton script XMLHttpRequest est sur un server "X" il peut faire des requêtes sur le site X, mais pas sur le "Y" ou "Z".

Quand je dévellope des scripts JS/PHP du genre Chat, c'est assez pratique, mais point de vue compatibilité c'est pas super et même difficile, car certains navigateurs supportent mal cette fonction.

Commentaire de apxa le 07/05/2006 21:02:12

iop arto
merci pour cette précision.

Have Fun ;)

Commentaire de williamprotti le 08/05/2006 12:01:14

Bon moi je vais faire un truc sur mon site, je vais obliger a utiliser FireFox! Et ils devraient ce mettre au clair entre eux.... Parce que programmer 10 fois différament pour chaque navigateur c'est chiant!

Commentaire de GRAZNOK le 08/05/2006 12:05:24

Il y a juste l'initialisation de l'objet qui est différente pour chaque navigateur. On trouve des exemples tout fais sur Google.

Après pour appeler les méthodes c'est pareil (l'objet c'est le même).

Commentaire de lordbdp le 08/05/2006 12:37:10

J'ai cru comprendre qu'il fallait installer AJAX sur le serveur pour faire tourner ses fonctionnalités. C'est faux ?

Commentaire de badoux le 08/05/2006 12:39:13

bonjour,

Il est vrai que le métier de devellopeur et rude, prog>debog>prog>debog... voila une journée d'un programmeur.
C'est particulièrement IE6 qui pose problème !
Mais patience Internet Explorer accéptera mieu le code dans un avenir très proche :-)!

On espère que d'ici quelques années tout les naviguateur ce seront mis au W3C :-)

en attendant ce jour, voila un exemple qui roule à merveille ! :-)

function httpRequest(div,file){
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
   xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
   xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
   return;
}

var div = div;
var file = file;

xhr_object.open("POST", file, true);

xhr_object.onreadystatechange = function() {
   if(xhr_object.readyState == 4){
   //alert(file);
document.getElementById(div).innerHTML = xhr_object.responseText;
   }
}
xhr_object.send(null);
}

a plus !

Commentaire de badoux le 08/05/2006 12:45:26

c'est pas tout a fais ca !

Tu peux installer des frameworks (lib) AJAX, pour te faciliter la tâche!

A++

Commentaire de jmecodol le 08/05/2006 19:46:24

je trouve ca bluffant, couplé a un proxy maison, c'est 100 fois plus agréable que des liens basiques, chapeau !!!
c'est super éfficace mais le top, ca serai de rajuter un éffet de transition (du style powerpoint, j'ai vu sa un jour sur un site web,mais j'ai oublié l'URL) .
ca change la vie aux utilisateur basiques (chef de service informatique,non initiés a la programmation et habitués a la patience) .
grand luxe !

Commentaire de szwr le 09/05/2006 08:57:53

En ce qui concerne la sécurité du contenu affiché, tout doit se faire du côté serveur (PHP, ASP, CGI).
XMLHttpRequest permet cependant la construction de pages complexes et modulaires en ménageant la bande passante.

Commentaire de kankrelune le 16/05/2006 01:49:57

Salut... si je peut ajouter mon grain de sel... .. .

Concernant l'instanciation de l'objet moi je fais comme suit...

var xhr_object = false;

if (window.XMLHttpRequest)
{
    xhr_object = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
    var ieversions = ['Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'Msxml2.XMLHTTP.3.0', 'Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'];

    for(var i=0; !xhr_object && i<ieversions.length; i++)
    {
try
{
    xhr_object = new ActiveXObject(ieversions[i]);
}
catch(e)
{
    xhr_object = false;
}
    }
}

Concernant la requete il peut être interressant de gérer les erreurs retournées... dans ce cas...

if (document.getElementById(position) && xhr_object)
{
   if (xhr_object.readyState == 4)
   {
      if (xhr_object.status == 200 || xhr_object.status == 304)
document.getElementById(position).innerHTML = xhr_object.responseText;
      else
        document.getElementById(position).innerHTML = 'Error ' + xhr_object.status + ' : ' + xhr_object.statusText;
   }
   else document.getElementById(position).innerHTML = 'Chargement en cours... veuillez patienter... .. .';

}

Reste un problème... principalement avec firefox... si une requete est envoyée alors que la précédente n'a pas fini d'être traitée (ex : rafraichissement d'un chat) et bien cela crée un belle erreur js... il faut alors réussir à controller l'état d'avancement de la requete en cours et si elle traine utiliser la fonction xhr_object.abord()... et là je sèche un peu... .. .

@ tchaOo°

Commentaire de josh666 le 29/05/2006 20:19:18

Bonjour à tous, je tien a dire que cette focntione est très utilise pour les modules d'admistration de site... sa rend la gestion plsu fluide et ressemble plsu a une vrai application.

Ensuite Pour : kankrelune :

j'ai peut-etre une idée pour toi, est-ce que tu as esasyer d'ajouter dans ta focniton qui s'occupe de gérer le XMLHttpRequest d'initailiser une varialbe globale (ex: var enTraitement = true) et lors de l'appel de la focntione a nouveau tu vérifi si cette variable est egal a true si oui tu arrete l'éxécutin de la fonction... bine sur il faut que lors que tu effectue la vérification de (xhr_object.readyState == 4) tu affecte false a ta variable..

Si une idée comme sa, parce que j'ai jamais eu le problème donc tu parle sur mes applications..

Sur ce ++

Commentaire de kankrelune le 29/05/2006 20:44:29

Salut josh666... actuellement j'utilise un timeout comme ça ça déclenche la methode abord si ça traine trop... .. .

@ tchaOo°

Commentaire de hvb le 01/06/2006 14:13:23

ça n'apporte rien de plus que le tutos de toutjavascript, qui est mis en avant sur codes-sources (ici et sur phphcs) depuis plusieurs mois déja...

Et pour le problème de compatibilité avec IE, dans IE7 l'objet xmlhttprequest sera integré en NATIF.

Et pour finir, "les navigateurs qui bloquent l'accés a des sites externe" c'est un parametre dans les options... dans IE c'est "accés aux sources de données sur plusieurs domaines" je crois... je n'ai jamais tenté de l'activer, mais vu que lors d'une execution locale ça marche... on peut en deduire que...

=)

Commentaire de williamprotti le 02/06/2006 23:05:17

Bonjour! On fait comment pour utiliser le même script, mais pour la méthode POST d'un formulaire?? Merci!

Commentaire de kankrelune le 02/06/2006 23:52:17

On lit les commentaires... c'est marqué... .. !

xhr_object.open("POST", file, true);

xhr_object.onreadystatechange = ... .. .

xhr_object.send("mavar1=pwet&mavar2=plop&mavar3=blurp..."); (pense à échapper les caractères spéciaux)

@ tchaOo°

Commentaire de williamprotti le 03/06/2006 12:48:29

Merci Kankrelune!, mais quand tu dis "(pense à échapper les caractères spéciaux)" tu veus dire les accents? Parce que les accents "éàè" etc.. aparaissent sous forme "?"

Commentaire de kankrelune le 03/06/2006 15:44:05

Tous les caractères spéciaux... .. .

@ tchaOo°

Commentaire de Kikoleskargo le 20/06/2006 16:21:18

et ya moyen de unload ces pages en div ? :D

Commentaire de coucou747 le 20/06/2006 16:27:05 administrateur CS

"<div id="center"><?php include($_GET['pageID']); ?></div>"

jolie faille...
sur http://coucou747.hopto.org catégorie php, il y a un lien vers une page qui explique différentes failles...

Commentaire de LordBob le 12/07/2006 11:47:39

salut,
j'utilise la meme chose dans mon site internet. sauf que en utilisant cette solution, il est impossible de faire un "retour arriere" d'aller à la "page précédente" en cliquant dans le bouton du navigateur.
je voulais savoir si quelqu'un avait une solution?
merci par avance.

Commentaire de kankrelune le 12/07/2006 13:13:42

tout simplement garder dans une variable la dernière page que tu as chargé... .. .

@ tchaOo°

Commentaire de LordBob le 12/07/2006 14:35:54

oui et si on veut revenir deux page en arriere?
sinon jpense utilisé un framework ou sinon je viens de tomber sur RSH (Really Simple Historic)

Commentaire de gdu3744 le 13/07/2006 04:20:23

Super , exactement ce que je cherchais. Merci pour ce script.
J'avais trouvé un peu la meme chose mais pour rapatrier du XML mais pas une page html complete.
Cool ! ca fait 2h que je cherche...(vous avez dit productivité...;o))

Commentaire de kankrelune le 13/07/2006 05:01:06

Tu peux faire les deux avec les XMLHttpRequest... la différence se situe au niveau de l'attribut de réponse... .. .

monObject.responseText => le format texte, html...

monObject.responseXML => le format xml...

@ tchaOo°

Commentaire de ns_deux le 25/07/2006 20:50:34

Bonjour à vous,
j'ai un probleme sur cette page php. Il m'est impossible d'afficher mon resultat il s'efface aussitot. QQun saurait pourquoi?
page principale.php
<script type="text/javascript">
function recharge(url,id)
{
     var xhr_object = null;
     var position = id;
      if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
      else
      if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");

     // On ouvre la requete vers la page désirée
     xhr_object.open("GET", url, true);
     xhr_object.onreadystatechange = function(){
     if (document.getElementById(position) && xhr_object)
{
   if (xhr_object.readyState == 4)
   {
      if (xhr_object.status == 200 || xhr_object.status == 304)
document.getElementById(position).innerHTML = xhr_object.responseText;
      else
        document.getElementById(position).innerHTML = 'Error ' + xhr_object.status + ' : ' + xhr_object.statusText;
   }
   else document.getElementById(position).innerHTML = 'Chargement en cours... veuillez patienter... .. .';

}
     }
     // dans le cas du get
     xhr_object.send(null);

}
</script>

<tr>
      <td><div align="left"></div>
        <div align="left"><strong>O.A.M : </strong>
        <div id="divoam" onclick="javascript:recharge('requete_oam.php','divoam');">

<select name='oam' id='oam' style='width:240' >
<?php
echo "<option value=''></option>";
require("connect_atelier.php");
$req = 'SELECT DISTINCT oam FROM oam ';
$res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row['oam']."'>".$row['oam']."</option>";
}
echo "</select>";

?>      </div>
        </div></td>
      <td>

-------------------------------------------------------------

et ma requete_oam.php

<?php

    echo "<select name='oam' id='oam' style='width:240'>";
        echo "<option value=''></option>";
        require("connect_atelier.php");
$req = 'SELECT DISTINCT oam FROM oam ';
$res = mysql_query($req,$connect) or die ('Erreur : '.mysql_error() );
while($row = mysql_fetch_assoc($res)){
        echo "<option value='".$row['oam']."'>".$row['oam']."</option>";
}
echo "</select>";

?>
---------------------------------------------------------
Tout marche bien a part le fait que mon resultat s'efface aussi sec. i je maintien le click de souris j'ai mais valeur mais des que je relache ca s'efface bizarre. Je comprends rien
Merci si vous pouvez m'aider

Commentaire de gdu3744 le 06/08/2006 15:01:16

A tout hasard , c'est peut etre lié à ton entête HTML (la premiere ligne du fichier).

Commentaire de ns_deux le 06/08/2006 18:01:55

Là, tu as le code brut sans les entetes et ca marche pas alors je pense pas que ca vienne des entetes.
Qq'un arrive à faire fonctionner un menu deroulant dynamique comme le miens? si oui comment a-t-il fait?
Merci d'avance.

Commentaire de kbalevil le 07/08/2006 12:56:15

Salut à tous,

J'ai un petit soucis, j'essai de charger des contrôles (Type Dojo) avec cette méthode, mais il semble que l'utilisation de template ne soit pas possible ! Vous confirmez ?

Merci

Commentaire de kbalevil le 07/08/2006 13:52:21

Bon, j'ai une piste, voilà le cas complet :

J'ai créé un widget utilisant 4 fichiers (PHP, TPL, CSS, JS), le style de template utilisé est Smarty. Tout fonctionne très correctement si j'appelle le fichier PHP référence directement. Si par contre je met une balise qui doit être remplacée par cette feuille en utilisant cette fonction, j'ai une erreur. J'ai donc essayé de charger une feuille contenant uniquement des éléments HMTL, et là ça semble fonctionner correctement, il m'apparaît donc clairement que le système de template n'est pas compatible avec cette fonction. Si quelqu'un connait un moyen de contourner ce problème en gardant ma structure actuelle, je suis preneur.

Merci

Commentaire de kankrelune le 07/08/2006 15:09:33

Je vois pas pourquoi ce système ne serait pas compatible avec l'utilisation des templates... la gestion des templates se fait coté serveur... la requete Ajax se fait coté client... rien à voir... si le fichier php cible fonctionne correctement l'erreur provient surement de la requete ajax et de son traitement... .. .

@ tchaOo°

Commentaire de kbalevil le 07/08/2006 15:46:40

Ben oui, mais malheureusement ça ne fonctionne pas.
Voici le détail :
Je charge 'Index.php', il contient la balise à remplacer, les références au template, ainsi que la création de l'objet.
De là, je lance la fonction javascript de remplacement.
J'appelle la page PHP du contrôle, il là il plante sur l'enrichissement de l'objet.

J'ai regardé dans mes déclarations, je vois rien.
le chemin doit il faire référence au fichier de base ('Index.php') ou au fichier PHP du controle ?

Merci

Commentaire de kankrelune le 07/08/2006 17:19:15

[quote]Je charge 'Index.php', il contient la balise à remplacer, les références au template, ainsi que la création de l'objet.
De là, je lance la fonction javascript de remplacement.
J'appelle la page PHP du contrôle, il là il plante sur l'enrichissement de l'objet.[/quote]

J'ais du mal à comprendre la fdaçon dont tu procede... qu'est ce que tu appel références au template dans ton index.php... .. ?

[quote]le chemin doit il faire référence au fichier de base ('Index.php') ou au fichier PHP du controle ?[/quote]

De quel chemin tu parle ? celui de ta requete ajax... .. ?

@ tchaOo°

Commentaire de kbalevil le 07/08/2006 18:05:28

Mon architecture est comme suit :
pour chaque controle, j'ai un repertoire dans lequel j'ai 1 PHP, 1 CSS, 1 JS, 1 TPL
Pour la page principale, j'ai 1 PHP, 1 JS

Donc, j'ai un fichier index.php qui est la page principale, sur cette page je place des balises qui sont des références à mes controles (elles doivent être remplacées par mes controles), à la fin de cette page, je lance la fonction Javascript de remplacement de ces balises.
Dans cette fonction, je fais appel au fichier PHP du contrôle concerné, ce fichier va implémenter le template et finalement l'envoyer à la fonction javascript en retour par le XMLHTTPRequest.
Bon donc, j'ai réussi à afficher mon contrôle (déplacement du référencement de l'objet template dans le fichier PHP du contrôle), mais l'initialisation des variables contenues dans le fichier javascript du controle ne sont pas appellées, je m'explique, lorsque le contrôle est affiché, je le place à un endroit donné, et bien malgré l'appel à la fonction javascript à la fin du template, la fonction n'est pas exécutée, d'où mon soucis, le CSS référencé dans le fichier index.php est bien pris en compte, mais pas le fichier JS spécifique au contrôle, et si je déplace le référencement de ce fichier JS dans le fichier PHP du controle, pareil.
Donc je pense qu'il peut y avoir un soucis de chemin, mais je n'ai pas d'erreur de chargement.

Commentaire de gdu3744 le 07/08/2006 18:40:03

j'ai eu egalement un probleme de chemin dans un autre cas de figure (transfert d'info entre un iframe et un div) ou le texte et les images du iframe (bien affichés) etait mal transferés (pas d'images)et j'ai fini par comprendre (avant de devenir fou...) qu'il fallait un "./" au lieu d'un "../" pour les references d'images. Du coup je ne voyais plus les images dans mon Iframe (mais pas d'importance) et les voyait dans mon div (ce que je voulais).
peut etre que ca peut te mettre sur la piste.

Bonjour de Montreal !

Commentaire de kankrelune le 07/08/2006 19:39:18

Ah ok... j'avais pas compris... arrete moi si je me trompe mais tom problème n'est pas au niveau des templates mais au niveau du code javascript contenu dans la réponse de tes XMLHTTPRequest... c'est normal... le code javascript contenu dans les XMLHTTPRequest n'est pas interprété... en fait le code javascript est chargé en même temps que la page et ne l'est plus (hormis si tu utilise eval)... .. .

deux alternatives s'offrent à toi dans ce cas... charger toute tes fonctions javascript en même temps que la page ou alors lancer deux requetes ajax... l'une retournant le code html pour la mise à jour de ta page l'autre retournant du code javascript à passer dans un eval()... une troisième option est possible bien que plus crade c'est de mettre une balise script avec un id dans ton index et de changer dynamiquement le fichier cible en fonction de la page chargée via Ajax... .. .

@ tchaOo°

Commentaire de kankrelune le 07/08/2006 19:41:25

[quote]en fait le code javascript est chargé en même temps que la page et ne l'est plus (hormis si tu utilise eval)[/quote]

Oups c'est pas très clair... .. .

en fait le code javascript est chargé en même temps que la page et est interprété (déclaration des fonction, etc) ensuite il ne l'est plus... hormis si tu utilise eval... .. .

@ tchaOo°

Commentaire de kbalevil le 08/08/2006 09:43:21

Merci de cette précision.

J'ai contourné le problème d'une façon sensiblement différente, lorsque la page est affichée, j'ai fais appel à un constructeur dans le fichier JS du contrôle (que j'appelle dans le index.php), mais là, je me doute que si j'ai plusieurs controles avec plusieurs constructeurs donc, je vais avoir un soucis, donc y a t il moyen d'appeler un constructeur en particulier (sans avoir recours au if, parceque je compte avoir pas mal de controles), et sans passer de paramètre genre : constructeur('nom du contrôle') + un test dans chaque constructeur ?

Merci en tout cas pour ton aide KANKRELUNE

gdu3744 : j'ai eu aussi du mal avec les chemins relatifs au déébut, une vraie galère, maintenant ça va. Merci de ton aide.

Commentaire de nmdeal2 le 22/08/2006 23:17:30

Très utile pour les affiliations.

Merci

Commentaire de kankrelune le 23/08/2006 15:53:32

@ kbalevil... bah non y a pas de solution miracle c'est une des limite d'ajax... la plus contraignante à mon gout... .. .

2 solution... gérer en fonction du module comme tu l'a dit avec des if, un switch ou un constructeur prenant le nom du module en paramètre... ou alors faire renvoyer par le serveur un tableau javascript contenant une entrée avec le contenu html et une entrée avec le code javascript à executer... l'un dans l'autre c'est un peu du bricolage... .. .

@ tchaOo°

Commentaire de speedylol le 13/11/2006 15:12:33

bonjour cela fonction aussi avec une pagination en fesant l'appel de la fonction merci de votre réponse.

comme cela svp???

exemple:

<a href="#" onclick="envoieRequete('list_ann.php?id_cat=$id_cat&page=$precedent','centre');">
précédent</a>

Commentaire de speedylol le 19/11/2006 10:27:21

bonjour cela fonction super bien ce script une seule question dans un <form action='truc.php' >
comment faire pour utiliser cette même fonction merci de vos réponse???

Commentaire de GRAZNOK le 19/11/2006 15:14:59

Avec un formulaire tu peux ne mettre aucune action et mettre onsubmit="envoieRequete(...)". Comme ça c'est ce qu'il y a dans onSubmit qui va s'exécuter et non plus ce qu'il y a dans action.

Commentaire de gdu3744 le 19/11/2006 18:16:38

quelle est la plus value de cette methode plutot qu'a utiliser des frames ?

Commentaire de GRAZNOK le 19/11/2006 19:37:22

Je sais pas...

Commentaire de speedylol le 19/11/2006 20:31:14

plus rapide sans clignotement, GRONOK tu place sa a la fin dans le submit du formailre je suppose.

merci

Commentaire de speedylol le 19/11/2006 20:38:46

tu note quoi stp???

Commentaire de GRAZNOK le 19/11/2006 21:17:25

<form action="javascript:void(0)" onsubmit="javascript:alert(this.fichier.value)">
<input name="fichier" type="text" value="truc.php"></input>
<input type="submit"></input>
</form>

Dans le onSubmit tu mets ce que tu veux (après "javascript:")

Commentaire de speedylol le 20/11/2006 09:00:04

Merci de ta réponse
ce que je veux comment cela ?? car je suis pas très spécialiste du javascript ??? d'aillieur je devrais m'interesser plus a cela ???

Commentaire de toutphp le 20/11/2006 09:18:18

Voilà un exemple d'utilisation :

<code>
--------- Mon fichier index.php -------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>cyril-test</title>

<script type="text/javascript">
function envoieRequete(url,id)
{
     var xhr_object = null;
     var position = id;
      if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
      else
      if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");

     // On ouvre la requete vers la page désirée
     xhr_object.open("GET", url, true);
     xhr_object.onreadystatechange = function(){
     if ( xhr_object.readyState == 4 )
     {
         // j'affiche dans la DIV spécifiées le contenu retourné par le fichier
         document.getElementById(position).innerHTML = xhr_object.responseText;
     }
     }
     // dans le cas du get
     xhr_object.send(null);

}
</script>
</head>

<body>
  <div id="cibleDeLaFonction"> </div>
  <input type="button" onclick = "javascript: envoieRequete('generation.php', 'cibleDeLaFonction')" />
</body>
</html>

------------- Fin fichier index.php -----------
</code>
<code>
------------- Début fichier generation.php -----------

echo 'Réussite de la génération du fichier generation.php';

------------- Fin fichier generation.php -----------
</code>

En fait tout ce qui sera généré dans le fichier generation.php sera mis à la place du contenu du div 'cibleDeLaFonction'

Commentaire de coucou747 le 20/11/2006 09:32:15 administrateur CS

je persiste, c'est pas dynamique... c'est statique, même si ça fait joli...

Commentaire de kankrelune le 20/11/2006 12:21:50

Quel est l'interet de ton commentaire coucou... .. ?

Pour le reste si la génération en tache de fond de la réponse est dynamique on peut considérer que le contenu est dynamique... tout dépend de quel dynamise tu parle... celui de la réponse ou celui de la page visualisée... .. .

Pour le reste c'est un détail dont on se fout un peu... non... ton commentaire n'a pas vraiment lieu d'être... .. .

@ tchaOo°

Commentaire de coucou747 le 20/11/2006 12:56:02 administrateur CS

c'était un débat qu'on avait eu plus haut : "Permet d'enlever le lien et de rendre la page plus dynamique ..."

Commentaire de kankrelune le 20/11/2006 13:36:52

Oui je sais... mais quel interet de revenir dessus... .. .

Mais bon puisque c'est fait (;o))... je pense que tout dépend de la définition du mot dynamique... dynamique ne veux pas forcement dire généré dynamiquement... ainsi on peut dire que javascript par le biais de la gestion des evenement peux rendre plus dynamique une page bien que cette dernière soit statique... .. . ;o)

@ tchaOo°

Commentaire de GRAZNOK le 20/11/2006 13:39:05

+1

cf. DHTML

Commentaire de speedylol le 20/11/2006 15:41:36

Pourquoi? il existe quelque chose de plus dynamique et qui fonction aussi bien???

Commentaire de kankrelune le 20/11/2006 15:44:32

Euh... les (i)frames... les language serveur... lOoOL... .. . :oD

Bon ok je sors... .. . :oP

@ tchaOo°

Commentaire de speedylol le 20/11/2006 16:08:40

je viens de tester toutphp le script, cela ne fonction pas

voila l'erreur
Found
the document has moved here

Commentaire de toutphp le 20/11/2006 16:50:36

As-tu bien mis le code PHP de generation.php entre les balises <?php ... ?> car cela fonctionne chez moi. Les as-tu bien mis dans les mêmes repertoires ?

Commentaire de speedylol le 20/11/2006 17:43:22

voila ce ce que j'ai fait
<?php
echo'<div id="cibleDeLaFonction">':
bla
bla
bla
bla
bla

echo"<center><table width=\"50%\" border=\"0\" cellspacing=\"0\" cellpadding=\"3\">
  <tr>
    <td><form action=\"add_annonce.php\" method=\"post\" enctype=\"multipart/form-data\"  style='margin-top: 0px; margin-bottom: 0px' name='cat' onSubmit='return(VerifForm(this))'></td>

bla
bla
bla
bla
    <td><br><font classe=\"titre2\">* Champs obligatoires</font></td>
    <td><input name=\"envoyer\" type=\"button\" onclick =\"javascript:envoieRequete('add_annonce.php','cibleDeLaFonction')\" value=\"Ajouter l'annonce\"></form></td>
  </tr>
</table></center>";
}
echo"</div>"

Et je centre tous dans tete.php  site

Commentaire de toutphp le 20/11/2006 17:51:19

@speedylol : Essai dans un premier temps de voir si mon exemple fonctionne seul (uniquement avec les lignes que j'ai écrites) comme je l'ai marqué, si il fonctionne dans ce cas on passera en message privé pour éviter de polluer ces commentaires (ou bien par mail).

Commentaire de speedylol le 23/11/2006 11:49:04

Re encore moi comment enlevé # cela a la fin de l'url please

Commentaire de revolt le 04/01/2007 14:08:14

Bravo pour cette source !!

Commentaire de amezghal le 11/01/2007 12:19:15

salut
pour les pages contenant des formulaires avec la methode "post" ou "get" ya eu des problemes,
try to find a solution ;)

Commentaire de xamxeladog le 30/01/2007 15:59:15

euh.. je vais pt'et passer pour un naabo mais bon tant pis, j'assume ^^

"Euh... les (i)frames... les language serveur... lOoOL... .. . :oD
Bon ok je sors... .. . :oP
@ tchaOo°"

Bon, j'ai vu que les frames c'est pas bien et patati patata...soit,oki... je développe actuellement pas mal avec les iframes inclues dans les div, exemple :
<div id="menu">
<iframe frameborder="0" height=54 width=800 allowtransparency="true" src="menu.php" name="menu_fen" scrolling="no"></iframe>
</div>
Me demandant si les iframes au final, c'eest pas un peu comme les frames, et là je vois le XMLHTTPRequest! Ô Miracle!! cela existe donc?! Bon je commence à me renseigner, et je tombe sur votre page... Euh.... C'est bien ou c'est pas bien?

Et ma solution, c'est bien ou c'est pas bien?

Voilà, merci d'avance pour vos réponses ^^

Commentaire de kankrelune le 30/01/2007 16:10:00

Bah en terme d'accessibilité les deux sont bof bof... pareil en ce qui concerne la portabilité (compatibilité) avec le client... en terme de référencement les (i)frames sont meilleur il me semble et en terme de standard mieux vaut utiliser les xmlhttprequest... .. .

Tout dépend de ce que tu veux... comment tu veux le déployer... quel public tu veux toucher et quels contraintes peuvent découler de ce même public cible... et si tu veux être au norme W3C... .. .

@ tchaOo°

Commentaire de jeffbretelle le 14/06/2007 16:38:53

Bonjour tout le monde.

Merci beaucoup pour ce script qui fonctionne pas mal du tout.

J'ai malgre tout un probleme : les caractère spéciaux ne passent pas (caractères avec accents) et les js non plus.

Je m'explique :

Dans mon index.php, j'ai

---------------index.php------------------------
<html>
<head>
<title>blabla</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<script type='text/javascript' language='javascript'>
function httpRequest(div,file){
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
   xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
   xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
   return;
}

var div = div;
var file = file;

xhr_object.open("POST", file, true);

xhr_object.onreadystatechange = function() {
   if(xhr_object.readyState == 4){
   //alert(file);
document.getElementById(div).innerHTML = xhr_object.responseText;
   }
}
xhr_object.send(null);
}
</script>

<body onload="httpRequest('cadre','accueil.php');">
<div id="musique"><?php include('musique/lecteur.php');?></div>
<div id="menu"><?php include('menu.php');?></div>
<div id="global">
<div id="cadre"></div>
<div id="pied"><?php include('pied.php');?></div>
</div>
</body>
</html>
----------------------------------------------

Et dans mon accueil.php j'ai :

----------------accueil.php-------------------
<?php
   du code pour récupérer des valeurs dans une BD. ce code fonctionne.
?>

<table>

   </script>
      ..[du code pour afficher en défilement les valeurs récupérées ci-dessus]..
   <script language="JavaScript1.2">

   ..[du texte dont des caractère é à è ê etc]..

</table>
----------------------------------------------

Et le résultat que j'obtiens au chargement de la page, c'est que accueil.php se charge bien dans le div "cadre" de index.php mais le texte défilant n'est pas présent et les caractères spéciaux (+ les 2 caratères suivants) sont remplacés par "?".

Pour faire un essai, j'ai fait un <div id="cadre"><?php include('accueil.php'); ?></div> et cela fonctionne sans probleme.

Je ne sais pas trop à quoi ca pourrait etre dû. Est-ce que quelqu'un pourrait m'aider ??
Merci d'avance.

Pour info, j'utilise cette fonction et non pas des includes parce que j'ai un menu en flash et que je met donc le code suivant sur mon bouton 'accueil'. (et semblable pour les autres boutons...)

on (release){
getURL('javascript:httpRequest('cadre','accueil.php')');
}

Je ne veux pas recharger toute la page car elle contient un div dans lequel j'ai mis un mini-lecteur de musique (en flash aussi) et je ne veux pas que la chanson redemarre dès que je change de page.

Commentaire de kankrelune le 14/06/2007 17:31:20

Normalement la réponse est quelque part dans les commentaire précédants... .. !

C'est une question d'encodage des données envoyées... .. .

@ tchaOo°

Commentaire de leod38 le 22/05/2008 13:42:00

bien le bonjour !

je te félicite pour se script , c'est exactement ce que je cherchai et ca marche bien !

néanmoins je suis débutant en Ajax et du coup d'autres petits soucis apparaissent
je voudrai avoir votre avis pour les régler :

- 1 les caractères spéciaux : il suffit de codé en propre en html (réglé)

- 2 vous parlez de mettre la page précédente dans une variable pour ne pas bloquer le bouton précédent

comment fait on plus précisément ? je ne vois pas !
sinon merci de toutes vos réponses elle m'ont bien été utile jusqu'ici

Commentaire de jmeunier le 27/07/2008 11:42:42

bonjour,

je n'arrive pas à faire "tourner" cette page en local.
j'appelle la page stockée sur mon disque.
IE la charge.
quand je clique sur : test ou test2

-> accès refusé

quand je mets la page dans mon serveur local(127.0.0.1) ca fonctionne car il est en "site de confiance".
J'aimerai que cela fonctionne en appelant la page directement de mon disque ...
j'ai beau mettre "file:\\mon_repertoire dans site de confiance, il ne le prend pas...

Merci de vos conseils

Commentaire de GRAZNOK le 27/07/2008 13:50:04

AJAX ne fonctionne pas sur des domaines multiples. En fait, il n'est pas possible d'interroger un une adresse qui ne fait pas partie du domaine à partir duquel on fait la demande.

Dans ton cas, l'adresse « file:\\mon_repertoire » ne fait pas partie du même domaine que 127.0.0.1 ou localhost.

Commentaire de nicomartus le 19/09/2008 12:49:13

Bonjour,
je débute tout juste l'Ajax. J'ai testé ce code qui fonctionne bien, du coup je voudrais savoir comment faire pour qu'un seul lien charge deux pages dans des div différents ? En fait ça doit recharger le div ou se trouve le lien, plus un div dans la page.

Merci d'avance pour votre aide.

Commentaire de GRAZNOK le 19/09/2008 14:01:22

Il faut arranger le code pour que deux actions se fassent.

Voici une action de modification du contenu :
document.getElementById("div_qui_existe").innerHTML = xhr_object.responseText;

Il suffit d'en mettre une autre qui modifie un autre DIV, et éventuellement de dupliquer l'objet XHR à partir duquel il récupère le contenu à mettre.

Commentaire de nicomartus le 19/09/2008 14:15:09

Je comprends le principe mais je suis vraiment au tout début et de plus je ne sais pas trop quoi mettre dans mon lien. Peux-tu me montrer un exemple, svp. Je comprends mieux quand je vois les choses.
Merci.

Commentaire de GRAZNOK le 20/09/2008 14:55:34

Commentaire de GRAZNOK le 20/09/2008 14:57:16

Petite erreur : le deuxième "xhr_object1.readyState" est bien un "xhr_object2.readyState" ^^

Commentaire de Dindonneau le 12/11/2008 21:54:32

tres bonne source ...

Commentaire de badoux le 13/11/2008 07:43:18

Si je peux me permettre ce poste n'est plus d'actualité.

Aujourd'hui avec les librairies tel que prototype, jQuery, Mootools ou encore Scriptaculous, on peut très facilement mettre en place de l'ajax, dont des requêtes XMLHttpRequest. Qui plus est, c'est évidemment compatible par defaut full-browser et on peut y ajuster les paramètres que l'on souhaite très simplement.

Je vous laisse la doc, si vous souhaiter vous y mettre. Je vous recommande l'utilisation de jQuery qui est pour moi, la plus grande lib et la plus répandue sur la toile, qui plus est c'est la plus légère au niveau du poids.

http://docs.jquery.com/Ajax

Cordialement,
Badoux Christophe

Commentaire de verbiagecasselaicouill le 23/02/2009 18:47:25

Un forum qui s'étalera sur 10 ans.

Difficile;

Pour mon compte ça marche pas sur IE 7 et pour le bouton retour...

Heeeeelp

Commentaire de JLN le 27/03/2009 16:55:10

Bonjour à tous,
J'essaye d'utiliser ce script, ca marche, mais une seule fois, après les pages affichées sont chargées depuis le cache, mais du coup ma requete sql ne 'execute qu'une fois. Ma question, comment obliger le navigateur à afficher toujours la page venant du serveur ??? Pour toutes réponses merci.

Commentaire de GRAZNOK le 27/03/2009 19:10:00

En mettant une variable aléatoire à la fin de l'URL appelé, par exemple : script.php?var1=foo&var2=bar&sync=249582068

Où "249582068" est une valeur pouvant être un hashage de timestamp ou n'importe quelle valeur générée dynamiquement (et qui change donc à chaque création de l'URL).

Commentaire de verbiagecasselaicouill le 27/03/2009 22:21:55

Pas compris.

J'avais réeussis à faire marcher correctemment le script mais il y a trop de pbl surtout pour le référencement et l'absence de bouton retour du navigateur

Une technique mieux:
Dans la page chargée:
__________________________________________________________________________________

Entre <head></head> :

<SCRIPT LANGUAGE="JavaScript">

if (parent.frames.length < 1)
{
document.location.href = 'page parent.html';
}
</SCRIPT>

_________________________________________________________________________________

dans body de la page parent:

<iframe id="" name="nom de l'iframe" SRC="chargacceuil.html" scrolling="no" height="100%" width="100%" FRAMEBORDER="no" ALLOWTRANSPARENCY="true">Oups ça ne marche pas. Vous utilisez probablement un navigateur peu conventionnel.</iframe>
__________________________________________________________________________________

Pour faire un lien bouton dans n'importe quelle page:

<input class="hbouton1" type="button" style="width:120px; height:50px;cursor:pointer;"onclick="nom de l'iframe.location.href='nom de la page à charger.html';document.getElementById('heade').frameBorder=1" value="ce que tu veux que le bouton désigne">

Toutes les pages seront chargées dans l'iframe. Même résultat sans les défaults que ce script pourris. Le problème de l'iframe pour l'indexation est résolu par le premier script de ce post.

Good luck. Tu peux reposter si tu en chie

Commentaire de verbiagecasselaicouill le 27/03/2009 22:24:16

erreur:

pour le bouton:

getElementById('nom de l'iframe')

L'id de l'iframe et l'attribut name doivent être les mêmes au cas ou je me planterai

Commentaire de verbiagecasselaicouill le 27/03/2009 22:26:58

Dernier truc:

Pour le deuxième truc remplacer SRC="chargacceuil.html" par SRC="nom de la page à charger par défault.html"

Commentaire de JLN le 28/03/2009 10:37:08

Ok, merci beaucoup pour toutes ces réponses, je m'en vais essayer tout ca...
@+ JLN

Commentaire de JLN le 28/03/2009 12:17:41

Coucou me revoilou !!!
Après avoir testé la manière pour moi la plus simple à mettre en oeuvre, j'ai juste ajouter à la suite des paramètres de l'url '&toto='+Math.round(Math.random()*10000) et tout fonctionne impec.
Merci beaucoup à vous tous, cela m'a bien aidé...

Commentaire de iznobe2601 le 10/04/2009 01:07:45

bonjour à tous , je trouve cette source tres pratique par contre j ' ai un probleme , je voudrais faire disparaitre le div initial , j ' arrive à afficher le div mis à jour en lieu et place de l ' ancien corretement mais l ' ancien s ' affiche juste au dessous du nouveau j ' ai du loupé une etape ...

je precise que je suis tres novice en la matiere , pour cause c ' est le premier script ajax que j ' utilise .

je vous prierai donc d ' etre vraiment le plus clair possible svp .

merci d ' avance pour vos reponses et ce super site !!!

Commentaire de iznobe2601 le 10/04/2009 02:08:20

ç ' est bon j ' ai fermé de div et ça me creé un conflit maintenant ça marche nickel .

paar contre j ' ai un autre petit probleme , je voudrais faire un rafraichissement entirement automatique toutes les 30 minutes , avant j ' utilsais

echo "<meta http-equiv=\"refresh\" content=\"1800; URL=mapage.php\">";

mais maintenant je ne vois pas la solution , un autre script ajax peut etre à moins qu ' il y ait plus simple bien sur ??

Commentaire de JLN le 10/04/2009 06:42:09

Bonjour,
Moi j'utilise cela :

<script language='text/JavaScript1.2'>timer = setInterval('FonctionAjax(\"TOTO\")', 10000);</script>

10000 est le temps en ms de l'interval du timer.

Commentaire de iznobe2601 le 10/04/2009 08:40:40 10/10

bonjour jln , je viens d ' essayer le code que tu m ' as proposé , je l ' ai mis en lieu et place de l ' autre mais pas de raffraichissement auto .

im manque peut etre la partie utilistion de la fonction ???

Commentaire de iznobe2601 le 10/04/2009 13:20:34

apres reflexion la nuit porte conseil ,surtout au gros debutant comme moi ,

je me suis dis qu ' il etait plus judicieux de placer ça dans mon code :

<script language='text/JavaScript1.2'>
timer = setInterval('envoieRequete(\"shoutbox.php\",\"page\");', 10000);
</script>

par contre ça ne marche pas non plus un peu d ' aide serait bienvenue , s ' il vous plait

ça me parait compliqué , mais puissant comme script , joli à voir et economique en bande passante !!!!

j ' ai vraiment besoin de faire ce rafraichissement auto

Commentaire de iznobe2601 le 10/04/2009 13:25:05

dois je placer ce code dans l ' include ou dans la page appelante ?

Commentaire de JLN le 10/04/2009 13:31:50

iznobe2601 tu dois placer ca dans la page qui inclus la div et ce tout en bas juste avant </body> car l'appelle se fait une fois tout affiché.
et ton fichier shoutbox.php est-il à la racine du site ?
Moi je fais de la domotique et ma page (celle qui apporte de nouveau éléments) se raffraichit comme cela et je n'ai pas de soucis.
Met un peu plus de code pour que l'on puisse t'aider...

@+ JLN

Commentaire de iznobe2601 le 10/04/2009 18:09:51

re et merci JLN , pour ton aide .

oui mon fichier shoutbox.php est à la racine du site , mais le fichier appelant non il est dans un dossier .

donc dan mon dossier appelant j ' ai mis le code en haut de la page sans rien changé

[code]
<script type="text/javascript">
function envoieRequete(url,id)
{
var xhr_object = null;
var position = id;

   if(window.XMLHttpRequest)  xhr_object = new XMLHttpRequest();

  else
    if (window.ActiveXObject)  xhr_object = new ActiveXObject("Microsoft.XMLHTTP");

// On ouvre la requete vers la page désirée
xhr_object.open("GET", url, true);
xhr_object.onreadystatechange = function(){

if ( xhr_object.readyState == 4 )
{
// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;
}
}
// dans le cas du get
xhr_object.send(null);

}
</script>
[/code]

puis mondiv avec l ' include :
[code]
<div id="page" style="width:100%; height:350px; overflow:auto">
<?php
if ($CURUSER["see_shoutbox"]=="yes")
include ("shoutbox.php");
?>
</div>
[/code]

puis le lien pour raffraichir
[code]
<a href="#" onclick="envoieRequete('shoutbox.php','page');" >raffraichir</a>
[/code]

voilà le code simplifié pour mon fichier appelant .

maintenant mon fichier shoutbox.php
[code}
<?php
if ($CURUSER["see_shoutbox"]=="yes") {

if (isset($_GET['sent'])) {
if($_GET["sent"]=="yes") {
$user=$CURUSER["username"];
$date=time();
$message=trim($_GET["shbox_text"]);

mysql_query("INSERT INTO shoutbox (msgid, userid, user, date, message) VALUES ('', ".sqlesc($userid).", ".sqlesc($user).", ".$date.", ".sqlesc($message).")") or sqlerr(__FILE__, __LINE__);
}
}

$res = mysql_query("SELECT msgid, userid, message, date FROM shoutbox ORDER BY date DESC LIMIT 20") or sqlerr(__FILE__, __LINE__);
if (mysql_num_rows($res) == 0)
print("\n");

else {
$sp="   ";
while ($arr = mysql_fetch_assoc($res)) {

if ($CURUSER["mod_access"] == "yes")
$del="[<a href=/shoutbox.php?del=".$arr["msgid"].">del</a>]";

$memberball = memberball2($arr["userid"],"");

print("<img src=".unesc($memberball[1])." width=50 border=none>".$sp.$memberball[0].$sp.strftime("%d.%m. %H:%M",$arr["date"]).$sp.$del.$sp.format_comment($arr["message"])."<hr></ br>\n");
}
}
?>
<script language='text/JavaScript1.2'>
timer = setInterval('envoieRequete(\"shoutbox.php\",\"page\")', 10000);
</script>
<?php
}
?>
[/code]

attention le code n ' est pas complet pour ne pas trop surcharger je pense en avoir mi suffisament.

j ' ai essayé comme tu m ' as dis dans le fichier shoutbox.php tout en bas , mais , ça ne fonctionne toujours pas .

Commentaire de JLN le 11/04/2009 11:00:43

Bonjour,
Désolé de répondre aussi brièvement, mon serveur vient de me lacher, mais je te promet de revenir poster ici prochainement.
J'ai constaté pas mal de petites choses qu'on pourrait modifié mais surtout j'ai dis en bas de la page appelante, pas de la page appelée...
Et là si tu veux voir ta page raffraichir, tu dois ajouter à l'url toto=Math.round(Math.random()*10000) dans la fonction ajax...
En attendant que je revienne poster.

Commentaire de iznobe2601 le 11/04/2009 11:21:11

en tout cas je te remercie beaucoup pour ton aide .

bon courage pour ton serveur .

@ +++

Commentaire de swissikarim le 08/09/2009 12:54:26

bonjour
je suis débutant pour la création de application web j'utilise
la fonction mais lorsque je met<a href="#" onclick="envoieRequete('bande.html','header');" >test</a>
lorsque j'ouvre la page désiré il y a un problème d'affichage des caractétres spéciaux é par ? par exemple.
aussi lorsque je fait un retour à la page précédente retourne toujours au page d'accueil .
j'ai lu les précédentes pages mais je ne compris pas les solutions car je ne vois pas un exemple pour éclairer ces problémes.
merci beuacoup pour votre prochaine réponse
et encore désolé à la répétition des choses

Commentaire de jeffbretelle le 08/09/2009 13:54:35

bonjour,

Effectivement, quand tu fait 'retour page précédente', il retourne à la page d'acceuil car le chargement de contenu dans le div n'est pas considéré comme une nouvelle page.

En ce qui concerne les caractères spéciaux : utilise par exemple "è" au lieu de "è".
Tous les caractères spéciaux : http://alexandre.alapetite.fr/doc-alex/alx_special.html

BAT

Commentaire de swissikarim le 08/09/2009 14:43:33

bonjour
merci beaucoup à votre claire réponse.
je trouve un autre probléme:aprés le chargement du contenu de formulaire dans le div un champ de type input qui affiche un calendrier ne marche pas et avant de fait cette fonction d'ajax
il est fonctionné dans son propre page qui contien le formulaire
et sa le code:
<link rel="stylesheet" type="text/css" href="../Scripts/src/css/jscal2.css" />
<link rel="stylesheet" type="text/css" href="../Scripts/src/css/reduce-spacing.css" />
<link rel="stylesheet" type="text/css" href="../Scripts/src/css/border-radius.css" />
<script src="../Scripts/src/js/jscal2.js"></script>
<script src="../Scripts/src/js/lang/fr.js"></script>
<input size="10" id="datec" name="datec" />
<script type="text/javascript">//<![CDATA[

      var cal = Calendar.setup({
          onSelect: function(cal) { cal.hide() }
      });
      cal.manageFields("datec", "datec", "%d/%m/%Y");

    //]]></script>
merci beaucoup pour votre prochaine réponse
désolé encore

Commentaire de swissikarim le 08/09/2009 14:53:40

bonjour tout le monde
je trouve cette réponse dans ce forum pour la retour au les pages
précédente mais je peut voir un exemple pour le fait en pratique:
cette réponse existe en haut->
"tout simplement garder dans une variable la dernière page que tu as chargé... .. ."
ma question comment garder dans une variable la dernière page que j'ai chargé
merci d'avance
désolé à la répétition de ce question.

Commentaire de swissikarim le 10/09/2009 10:40:20

bonjour tout le monde
je trouve une grande mauvaise surprise après l'application du code d'ajax à mon code source.
ca le problème:
avant d'appliquer le code ajax à ma page d'accueil tout les importations des scripts de css, javascript ou jquery sa marchent bien et tout les styles fonctionnent comme il faut.
Mais aprés l'ajout du code ajax et lorsque appeler mes pages dans la div content de ma page d'accueil ne fonctionne aucune importation de css ou jquery et ...
svp aider moi pour résoudre ce probléme
merci d'avance

Commentaire de swissikarim le 19/09/2009 14:54:43

bonjour tout le monde
la solution pour interpreter javascript dans une page charger dans le div est la suivante:
function envoieRequete(url,id)
{
var xhr_object = null;
var position = id;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else
if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");

// On ouvre la requete vers la page désirée
xhr_object.open("GET", url, true);
xhr_object.onreadystatechange = function (){
  if (xhr_object.readyState == 4 && xhr_object.status == 200){
    var c = document.getElementById(position);
    c.innerHTML = xhr_object.responseText;
    //maintenant que les données reçu on été placé dans la page,
    //il faut exécuter toutes les balise script :
    var allscript = c.getElementsByTagName('script');
    for(var i=0;i< allscript.length;i++){
      eval(allscript[i].text);
    }
    //alert(typeof(une_function_dans_mes_balise_script));//return function
  }
}
// dans le cas du get
xhr_object.send(null);

}

Commentaire de ibaom le 20/09/2009 09:24:57

Je me permet de reiterer la question de swissikarim à savoir:
"comment garder dans une variable la dernière page que j'ai chargé"
afin de pouvoir faire de retour sur les pages via le navigateur...
j'ai pas trouvé, si quelqu'un a une piste :-)

Commentaire de ibaom le 22/09/2009 17:32:41 9/10

desolé pour le dernier message
quelque chose qui peut interresser des personnes sur cette question:
http://tutorialzine.com/2009/09/simple-ajax-website-jquery/
bon du coup c'est de l'ajax, mais ca permet de garder des élements toujours en place (par exemple un lecteur audio...pour eviter les coupures)
apres ca peut poser des problemes en terme de seo...

Commentaire de flk974 le 09/12/2009 02:48:35

J'ai modifié le code pour pouvoir récupéré le contenu d'une page web
pour plus information.
http://www.javascriptfr.com/codes/CHARGER-PAGE-WEB-DANS-DIV_50954.aspx

Commentaire de 120120 le 06/01/2010 06:17:09

Bonjour,

Voici une autre approche :

http://www.phpcs.com/codes/RAFRAICHIR-PLUSIEURS-DIV-CLIC-AJAX_51077.aspx

Il s'agit d'une classe php qui permet de charger de manière dynamique PLUSIEURS liens dans PLUSIEURS DIV d'une page en un seul clic (en AJAX).

Bonne journée

Commentaire de MissArmande le 15/04/2010 11:57:35

Bonjour à tous,

Le code fonctionne très bien, c'est exactement ce dont j'avais besoin, merci Atlante34.
Cependant, en plus d'afficher une page dans une div choisie, j'aimerais faire un scroll automatique vers une ancre de cette page (c'est-à-dire que, dans ma div, l'ancre située dans la page appelée soit en haut du cadre).

En utilisant les propriétés offsetTop et scrollTo, j'arrive presque au résultat voulu, MAIS je bute sur un détail: je n'arrive pas à récupérer l'offsetTop absolu sur la page (en incluant les parents...). Mon ancre se retrouve en haut de ma page, et non pas en haut de ma div.
Je n'arrive pas à integrer la fonction de getOffset incluant les positions des parents, et j'ai essayé par tous les moyens que j'ai pu imaginer avec mes faibles connaissances en js.

Pour l'instant, j'ai le code où j'ai intégré l'offsetTop de mon ancre et un scrollTo cet offset:

function envoieRequeteC(url,id,ancre)
{
var xhr_object = null;
var position = id;
var hauteur = ancre;
   if(window.XMLHttpRequest)  xhr_object = new XMLHttpRequest();
  else
    if (window.ActiveXObject)  xhr_object = new ActiveXObject("Microsoft.XMLHTTP");

// On ouvre la requete vers la page désirée
xhr_object.open("GET", url, true);
xhr_object.onreadystatechange = function()
{
if ( xhr_object.readyState == 4 )
{
// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;
document.getElementById(position).scrollTop = document.getElementById(hauteur).offsetTop;
}
}
// dans le cas du get
xhr_object.send(null);

}

mais je n'arrive pas à intégrer la fonction de calcul d'offsetTop absolu:
function getOffset(obj) {
    var offsetTop = obj.offsetTop;
    while ((obj = obj.offsetParent )!=null) {
        offsetTop += obj.offsetTop;
    }
    return [offsetTop];
}
ni en appelant la fonction à l'intérieur de ma fonction, ni en l'intégrant directement dans ma fonction.

Quelqu'un peut-il m'aider?
Merci d'avance.

Commentaire de robinou59 le 04/12/2010 14:47:43

Bonjour,
Merci pour votre script il ma vraiment aidé mais je me pose tout de même une petite question comment faire pour que les accents s'affiche et non un petit carré a leur place ? Merci d'avance

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

AJAX - XMLHttpRequest - il ne veux pas afficher [ par jnbdzjnbdz ] Bonjour je viens de commencer avec ajax. Et je suis déjà entrain de développer une petite application web. Si vous aller ici:<a target="_blank" hr [AJAX+DIV] Probleme de positionement de basile "<DIV>" [ par frostie ] Boujour tout le monde, Je suis en train de developper une application PHP/AJAX (Asynchronous JAvascipt Xml) qui utilise beaucoup les balises <DIV& Rechargement d'objet "AJAX" [ par benjiman2 ] Bonjour !Voila, je commence tout juste a programmer en AJAX ...et voila mon probleme ...Je voudrai que chaque 2 secondes, la page se rafraichisse dans Prob rechargement XmlHttpRequest [ par sunee ] Bonjour,  Bon j'ai hésité à poster dans au secours hein  ... mais je vais poster dans la catégorie concernée.. Probleme affichage AJAX/PHP/DIV - Aidez moi svp! [ par kellogs ] Bonjour à tous et toutes!Voilà j'ai un souci avec un code AJAX. En fait, je réussi à charger ma page 'admin.php' dans le div 'content' mais celle ci d ouverture page html dans une balise div avec xmlHttpRequest [ par romain_pil ] pil_poilBonjour à tous,J'ai fais le choix d'utiliser une balise div plutot qu'une iframe pour afficher une page html dans une autre. J'utilise XmlHttp Ajax et IE7 [ par arnaultp ] Bonjour à tous!Je viens de me mettre à l'AJAX, et en reprenant un tutorial j'ai une erreur (voire 2 d'ailleurs) qui apparaît et que je n'arrive pas à amCharts et ajax [ par skalarache ] Bonjour,Je travaille actuellement sur un application web utilisant la technologie Ajax. L'objectif est de créer des graphiques (camemberts) avec des d effet ajax puis changer image puis effet ajaxy [ par Annadrill ] bonjour,voilà, j'ai une div avec une image dedans et j'aimerais que lorsque je clique sur un lien, la div se ferme (effect.Fade), puis une fois fermée Ajax : variable de réponse [ par chapata ] Bonjour à tous,(j'espère avoir posté dans le bon endroit ...)voilà je suis débutant en Ajax, je me suis inspiré des différentes méthodes sur le forum.

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP