Actualisation d'une partie d'une page HTML

**dinguedemoi** · 17/07/2009, 10h59

Bonjour,

J'ai une page WEB divisée en plusieurs parties grâce aux balises DIV. J'essaie de mettre à jour juste une partie de cette page après le clique sur un lien grâce à une fonction utilisant innerHTML. Mais le problème c'est que rien ne se passe. Voilà le code javascript

Code javascript :

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
 
function getXHR()
{
    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) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non supporté par le navigateur
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	   xhr = false;
	}
 
    return(xhr);
}
 
function update_area(upd,div_id)
{
    var xhr = null;
 
    xhr = getXHR();
 
    xhr.onclick = function()
    {
        if ((xhr.readystatechange == 4) && (xhr.state == 2) )
            {
                document.getElementById(div_id).innerHTML = upd
            }
    }
}

et le code de ma page web

Code html :

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
    <head>
        <link rel="stylesheet" href="jmaki-standard.css" type="text/css"></link>
        <title>Espace Administrateur</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script src="Espace_Administrateur_JSP.js" type="text/javascript"></script>
 
    </head>
    <body>
        <div id="outerBorder">
 
            <div id="header">
                <div id="banner">Application Name</div>
 
                <div id="subheader">
 
                    <div>
                        <a href="mailto:feedback@youraddress">Contact</a> |
                        <a href="#">Plan</a> |
                        <a href="#">Accueil</a>
                    </div>
 
                </div> <!-- sub-header -->
            </div> <!-- header -->
 
            <div id="main">
                <div id="leftSidebar">
 
                    <a href="#" onclick="update_area(testhtml.html,'content')">Nouvelles Inscriptions</a> <br/><br/><br/>
 
                         <a href="#">Facture</a> <br/><br/><br/>
 
                          <a href="#">Devis</a> <br/><br/><br/>
 
                    <a href="#">Gérer les Produits</a> <br/><br/><br/>
 
                    <a href="#">Gérer les Clients</a> <br/><br/><br/>
 
                    <a href="#">Suivre les Commandes</a>
 
                </div> <!-- leftSidebar -->
 
                <div id="content" style="height:400px">
 
                    Main Content Area
 
                </div> <!-- content -->
 
            </div> <!-- main -->
        </div> <!-- outerborder -->
    </body>
</html>

et le code de la page testhtml.html:

Code html :

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

1
2
3
4
5
6
7
 
<html>
    <head>
        <title>Ma page</title>
    </head>
    <body>N'importe quoi!</body>
</html>

Ps: la page html principale a été générée grâce au plugin jmaki de NetBeans 6.5.1.

**SpaceFrog** · 17/07/2009, 11h02

Code :

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

update_area('testhtml.html','content')

**dinguedemoi** · 17/07/2009, 11h16

J'ai essayé le truc que tu m'as indiqué mais toujours rien. Quand je clique sur le lien la page se recharge mais rien n'y change.

**SpaceFrog** · 17/07/2009, 11h19

xhr.onclick ????

revise les procédures ajax ...

**dinguedemoi** · 17/07/2009, 11h26

J'ai trouvé le xhr.onclick sur un autre forum. Je ne l'ai essayé que parce que le xhr.onreadystatechange ne marchait pas.

**franculo_caoulene** · 17/07/2009, 11h38

T'as bien lu ton code?? Tu passes upd qui vaut "testhtml.html" en argument à ta fonction et c'est ce même upd que tu définis dans le div. A en croire ton code, tu n'as aucunement besoin d'AJAX! Essaie ça :

Code :

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

document.getElementById(div_id).innerHTML = xhr.responseText

De plus, as-tu bien une requête HTTP d'exécutée? Car à aucun moment tu n'envoies la requête en utilisant xhr.send(null). Je te recommande la lecture des cours AJAX.

**SpaceFrog** · 17/07/2009, 11h54

c'ets le declenchement même d'ajax qui est boiteux ...
regarde plutot les tutos ajax sur ce forum ...

**dinguedemoi** · 17/07/2009, 12h20

En fait, pour le moment je n'ai besoin d'aucune requête. Je veux simplement afficher une page html entre 2 balises div après avoir cliqué sur le lien Nouvelles Inscriptions.

Mais j'ai quand même suivi tes recommandations et fait les changements suivants:

Code javascript :

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
 
function update_area(div_id)
{
    var xhr = null;
 
    var x;
 
    var lien;
 
    xhr = getXHR();
 
    xhr.onreadystatechange = function()
    {
        if ((xhr.readystatechange == 4) && (xhr.state == 2) )
            {
                document.getElementById(div_id).innerHTML = xhr.responseText;
 
            }
        xhr.open("POST","test.php",true);
 
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
        x = document.getElementById(div_id);
 
        lien =x.value;
 
        xhr.send("lien="+lien);
    }
}

Code html :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
    <head>
        <link rel="stylesheet" href="jmaki-standard.css" type="text/css"></link>
        <title>Espace Administrateur</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script src="Espace_Administrateur_JSP.js" type="text/javascript"></script>
 
    </head>
    <body>
        <div id="outerBorder">
 
            <div id="header">
                <div id="banner">Application Name</div>
 
                <div id="subheader">
 
                    <div>
                        <a href="mailto:feedback@youraddress">Contact</a> |
                        <a href="#">Plan</a> |
                        <a href="#">Accueil</a>
                    </div>
 
                </div> <!-- sub-header -->
            </div> <!-- header -->
 
            <div id="main">
                <div id="leftSidebar">
 
                    <a href="#" onclick="update_area('content')">Nouvelles Inscriptions</a> <br/><br/><br/>
 
                         <a href="#">Facture</a> <br/><br/><br/>
 
                          <a href="#">Devis</a> <br/><br/><br/>
 
                    <a href="#">Gérer les Produits</a> <br/><br/><br/>
 
                    <a href="#">Gérer les Clients</a> <br/><br/><br/>
 
                    <a href="#">Suivre les Commandes</a>
 
                </div> <!-- leftSidebar -->
 
                <div id="content" style="height:400px">
 
                    Main Content Area
 
                </div> <!-- content -->
 
            </div> <!-- main -->
        </div> <!-- outerborder -->
    </body>
</html>

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<?php
if (isset($_POST["lien"]))
{
echo "<body> le lien choisi est ".$_POST["lien"]."</body>";
}
else
{
    echo "c est ça!";
}
 
?>

**andry.aime** · 17/07/2009, 12h25

Salut,

x = document.getElementById(div_id);

lien =x.value;

Un div n'a pas de value.

**dinguedemoi** · 17/07/2009, 12h37

J'ai enlevé le value et maintenant j'ai:

Code javascript :

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

1
2
3
 
x = document.getElementById(div_id);
xhr.send("lien="+x);

Mais, je n'ai toujours rien quand je clique sur le lien.

**andry.aime** · 17/07/2009, 12h45

Tu veux envoyer le contenue du div?

Code :

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

1
2
x = document.getElementById(div_id).innerHTML;
xhr.send("lien="+x);

**dinguedemoi** · 17/07/2009, 12h51

Oui. En fait je veux juste que mon code php reconnait le div utilisé et me l'affiche.

Actualisation d'une partie d'une page HTML

JavaScript

Discussions similaires

Partager

Partager