IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Actualisation d'une partie d'une page HTML


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Juillet 2009
    Messages
    18
    Détails du profil
    Informations forums :
    Inscription : Juillet 2009
    Messages : 18
    Par défaut Actualisation d'une partie d'une page HTML
    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.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    update_area('testhtml.html','content')
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre averti
    Inscrit en
    Juillet 2009
    Messages
    18
    Détails du profil
    Informations forums :
    Inscription : Juillet 2009
    Messages : 18
    Par défaut
    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.

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    xhr.onclick ????

    revise les procédures ajax ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre averti
    Inscrit en
    Juillet 2009
    Messages
    18
    Détails du profil
    Informations forums :
    Inscription : Juillet 2009
    Messages : 18
    Par défaut
    J'ai trouvé le xhr.onclick sur un autre forum. Je ne l'ai essayé que parce que le xhr.onreadystatechange ne marchait pas.

  6. #6
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut
    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.

Discussions similaires

  1. Réponses: 1
    Dernier message: 04/04/2008, 12h14
  2. Sélectionner seulement une partie d'une valeur d'une cellule
    Par ArthurO0O dans le forum Macros et VBA Excel
    Réponses: 6
    Dernier message: 20/08/2007, 11h05
  3. masquer une partie d'une vidéo par une banniere
    Par lezabour dans le forum Général Conception Web
    Réponses: 1
    Dernier message: 16/10/2006, 16h47
  4. copier une partie d'une image vers une autre
    Par gregcat dans le forum Langage
    Réponses: 1
    Dernier message: 14/04/2006, 13h39
  5. [HTML] Rafraichir uniquement une partie d'un page html
    Par andlio dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 13/03/2006, 15h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo