Javascript PHP et InnerHTML

**johnson95** · 14/04/2008, 20h21

Bonjour,

Je développe actuellement une page qui lorsque je clique sur un titre d'une listbox, affiche un tableau.

Pour ce faire j'utilise la fonction onChange.

Cependant pour construire le tableau que je dois afficher je dois parser des fichiers binaires qui se trouve sur le serveur. J'ai crée des fonctions PHP pour faire cela cependant d'après certaines sources (trouvé sur Internet) cela n'est pas possible.

après certaine recherche j'ai trouvé la fonction "innerhtml" et j'ai fais des tests et ca fonctionne.

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
 
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function modifier() {
document.getElementById('monparagraphe').innerHTML = "<?php 
                                                                                $fp=fopen('data.txt','r');
$donnees = fgets($fp,255);
fclose($fp);
echo 'Le fichier contient : '.$donnees;
echo"<table border='1'><tr><td>test</td><td>test1</td></tr><tr><td>test2</td><td>test3</td></tr></table>";
?>";
}
//-->
</script>
</head>
<body>
<p id="monparagraphe">Texte</p>
<a href="javascript:modifier()">autre texte</a>
</body>
</html>

Je voudrais donc savoir si il était possible à la place de l'ensemble des instructions php d'inclure un fichier qui contient la fonction PHP qui fournira le tableau.

Ainsi que la raison pour laquel tout le monde dit que cela fonctionne pas alors que le code ci dessus marche très bien.

Merci

**HWICE** · 14/04/2008, 20h41

document.getElementById('monparagraphe').innerHTML = "<?php require_once "tonfichier.php";?>

Peut-etre

**johnson95** · 14/04/2008, 20h55

J'ai testé avec apostrophe et guillemets ca ne fonctionne pas!

Merci

**HWICE** · 14/04/2008, 21h07

et si tu le mets en variable

var mavariable = <? require_once 'tonficher.php"; ?>;
document.getElementById('monparagraphe').innerHTML = mavariable;

SUrment pas, je ne suis pas sur... je debute en javascript

**johnson95** · 14/04/2008, 21h23

Merci de ton aide, il y avait juste une petit erreur, voici le code si quelqu'un le voudrait :

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
 
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function modifier() {
var mavariable = "<?php require_once 'test.php'; ?>";
document.getElementById('monparagraphe').innerHTML = mavariable;
}
//-->
</script>
</head>
<body>
<p id="monparagraphe">Texte</p>
<a href="javascript:modifier()">autre texte</a>
</body>
</html>

**johnson95** · 14/04/2008, 22h30

En fait je n'ai pas eu la réponse a ma deuxième question :

Comment se fait il que le code fonctionne vu que le serveur devrait être exécuté uniquement au chargement de la page !

Merci

**HWICE** · 14/04/2008, 22h50

euh je dirai avec du ajax. un peu comme
index.html

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
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Sommaire en PHP !</title>
  <style type="text/css">
  #sommaire
  {
  position:absolute;
  background-color:cyan;
  left:10px;
  width:100px;
  }
 
  #page
  {
  position:absolute;
  background-color:#AAAAAA;
  left : 200px;
  width:500px;
  height:500px;
  }
  </style>
 
<script type='text/JavaScript'>
var xhr = null; 
function getXhr()
{
     if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject)
  { 
  try{
     xhr = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) 
     {
     xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }
  }
else 
  {
  alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
  } 
}
 
function ShowPage(page)
{
getXhr();
xhr.onreadystatechange = function()
    {
     if(xhr.readyState == 4 && xhr.status == 200)
     {
     document.getElementById('page').innerHTML=xhr.responseText;
     }
    }
xhr.open("GET","ajax.php?page="+page,true);
xhr.send(null);
}
 
</script>
 
</head>
 
<body onLoad="ShowPage(1)">
 
    <div id="sommaire">
        <h3>Sommaire</h3>
        <a href="#" onClick="ShowPage(1)">Page 1</a><br/>
        <a href="#" onClick="ShowPage(2)">Page 2</a><br/>
        <a href="#" onClick="ShowPage(3)">Page 3</a><br/>
        <a href="#" onClick="ShowPage(4)">Page 4</a><br/>
    </div>
 
    <div id="page">
    </div>
 
  </body>
</html>

ajax.php

Code :

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

1
2
3
4
5
6
7
8
9
<?php
 
$page=$_GET['page'];
     if($page==1)require 'page1.html';
else if($page==2)require 'page2.html';
else if($page==3)require 'page3.html';
else require 'page4.html';
 
?>

en bidouillant un peu tu peux arriver a quelque chose

**madevilts** · 15/04/2008, 08h29

Fait un clic droit "afficher la source" sur ta page et tu verras

Le PHP est exécuté au chargement de ta page ce qui te génère un beau fichier plein de javascript et HTML mais le PHP a disparu car il a été traité.

Rien a voir avec de l'ajax donc...

**HWICE** · 15/04/2008, 14h18

que veux tu dire....
x'est du ajax... dans le div page on ne vois pas le code... meme si page.html est deja loader

**madevilts** · 15/04/2008, 14h32

Ce que je veux dire c'est que dans le code de johnson95, il n'y a pas d'ajax.

Ajax = asynchrone, javascript et xml... le tout se basant sur un httprequest... on n'a pas d'asynchrone, pas de httprequest. Le xml on l'oubli car actuellement quand on parle d'Ajax c'est synonyme de httprequest car on a presque jamais de Xml.

Si je reprends son code :

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
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function modifier() {
var mavariable = "<?php require_once 'test.php'; ?>";
document.getElementById('monparagraphe').innerHTML = mavariable;
}
//-->
</script>
</head>
<body>
<p id="monparagraphe">Texte</p>
<a href="javascript:modifier()">autre texte</a>
</body>
</html>

En faisant "afficher la source" j'aurai :

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
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function modifier() {
var mavariable = "contenuduficher test.php sous forme de String";
document.getElementById('monparagraphe').innerHTML = mavariable;
}
//-->
</script>
</head>
<body>
<p id="monparagraphe">Texte</p>
<a href="javascript:modifier()">autre texte</a>
</body>
</html>

Javascript PHP et InnerHTML

JavaScript

Discussions similaires

Partager

Partager