Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 3 sur 3
  1. #1
    Candidat au titre de Membre du Club
    Homme Profil pro
    Inscrit en
    août 2011
    Messages
    83
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vosges (Lorraine)

    Informations forums :
    Inscription : août 2011
    Messages : 83
    Points : 11
    Points
    11

    Par défaut Actualisation balise <div>

    Bonjour, je pense que ma question peut sembler être bête pour des personnes maitrisant AJAX mais pour ma part je patine un peu.
    J'ai un page Accueil.html avec un menu Accueil, Contact
    Code :
    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
     
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <HTML>
      <HEAD>
      <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
      <script type='text/javascript'>
          function getXhr(){
            var xhr = null; 
    	if(window.XMLHttpRequest) 
    	   xhr = new XMLHttpRequest(); 
    	else if(window.ActiveXObject){
    	       try {
    	         xhr = new ActiveXObject("Msxml2.XMLHTTP");
    	       } catch (e) {
    	         xhr = new ActiveXObject("Microsoft.XMLHTTP");
    	       }
    	     }
    	     else { // XMLHttpRequest non supporte par le navigateur 
    	       alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    	       xhr = false; 
    	     } 
                 return xhr;
    	}
     
       function getAccueil(x){
        var xhr=getXhr();
        if(window.XMLHttpRequest){xhr=new XMLHttpRequest();}
        else if(window.ActiveXObject){xhr=new ActiveXObject("Microsoft.XMLHTTP");}
        xhr.open("GET","accueil.html",false);
        xhr.send(null);
        obj=document.getElementById(x);
        obj.innerHTML =xhr.responseText;
    }
    function getContact(x){
        var xhr=null;
        if(window.XMLHttpRequest){xhr=new XMLHttpRequest();}
        else if(window.ActiveXObject){xhr=new ActiveXObject("Microsoft.XMLHTTP");}
        xhr.open("GET","contact.html",false);
        xhr.send(null);
        obj=document.getElementById(x);
        obj.innerHTML =xhr.responseText;
    }
      </script>
      <TITLE>Mon site web</TITLE>
      </HEAD>
      <BODY>
        <div id="page">
            <header>
                <div id="titre_principal">
    				<h1> Bienvenue sur mon site web </h1>
    			</div>
    			<div onclick="getAccueil('zonechange');"> Accueil </div>
    			<div onclick="getContact('zonechange');"> Contact </div>
            </header>
    		<section>
    			<div id="zonechange" >
    			<h1> Accueil </h1>
    			<p> Bonjour et bienvenue <p>
    			<p> Bonjour et bienvenue <p>
    			<p> Bonjour et bienvenue <p>
    			<p> Bonjour et bienvenue <p>
    			<p> Bonjour et bienvenue <p>
    			<p> Bonjour et bienvenue <p>
    			<p> Bonjour et bienvenue <p>
    			<p> Bonjour et bienvenue <p>
    			<p> Bonjour et bienvenue <p>
    			</div>
    		</section>
    		<footer>
    			<div id="bas_info">
    				<p> Site réalisé par Julie Cerini </p>
    			</div>
    		</footer>
        </div>
      </BODY>
      </HTML>
    Quand je click sur Accueil le menu le titre et le pied de page se duplique comme tel :
    Je ne sais pas pourquoi car la zone à changer est juste le corps ????

  2. #2
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 276
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 21 276
    Points : 83 219
    Points
    83 219

    Par défaut

    C'est pourtant logique...
    Ta page Accueil.html (tout comme Contact.html j'imagine) est une page complète, ton script ne fait donc rien de plus que ce que tu lui demandes.

    Tu lui dis "va récupérer le contenu de Accueil.html", JavaScript, via la requête AJAX, récupère donc tout le code de Accueil.html.
    Ensuite, tu dis : "remplace le contenu de la div par ce que tu viens de récupérer", il s'agit donc bien de mettre dans la page l'intégralité de la réponse reçue, donc toute la page !

    C'est bien sûr affreux niveau conception (on ne peut pas insérer une page HTML complète dans une autre page) et ça va te créer des soucis d'affichage.
    D'autre part, ce n'est pas comme ça que l'on utilise AJAX : si tu veux mettre à jour une partie de la page, tu ne dois renvoyer au script que la partie de la page que tu veux actualiser.

    Pour finir, ton code JavaScript est abominable ! J'imagine que tu as copié / collé et essayé d'assembler des bouts de code trouvés ici ou là, mais l'ensemble est horrible !
    Tu dupliques inutilement des créations d'objets xhr par exemple et tu ne sembles pas comprendre ce que tu fais.

    Je te conseille vivement de lire quelques tutos (Cours AJAX) avant de continuer...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Candidat au titre de Membre du Club
    Homme Profil pro
    Inscrit en
    août 2011
    Messages
    83
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vosges (Lorraine)

    Informations forums :
    Inscription : août 2011
    Messages : 83
    Points : 11
    Points
    11

    Par défaut

    Merci Bovino pour le lien vers le code AJAX.

    J'ai pris le temps de regarder tous cela et après relecture de mon sujet j'avais oublié quelque chose. En faite, je devais créer un page index.php qui comprend le squelette du site et ensuite mettre dans 2 <div> un lien pour l'accueil et un pour contact.
    index.php
    Code :
    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
    79
    80
    81
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <HTML>
      <HEAD>
      <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
      <script type='text/javascript'>
          function getXhr(){
            var xhr = null; 
    	if(window.XMLHttpRequest) 
    	   xhr = new XMLHttpRequest(); 
    	else if(window.ActiveXObject){
    	       try {
    	         xhr = new ActiveXObject("Msxml2.XMLHTTP");
    	       } catch (e) {
    	         xhr = new ActiveXObject("Microsoft.XMLHTTP");
    	       }
    	     }
    	     else { // XMLHttpRequest non supporte par le navigateur 
    	       alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    	       xhr = false; 
    	     } 
                 return xhr;
    	}
     
       function goAccueil(){
        {
    var xhr_object = getXhr();
    var method = 'POST';
    var filename = 'accueil.html';
    xhr_object.open(method, filename, true);
    xhr_object.onreadystatechange = function()
    {
    if(xhr_object.readyState == 4)
    {
    var tmp = xhr_object.responseText;
    document.getElementById('zonechange').innerHTML = tmp;
    }
    }
    xhr_object.send(null);
    }
    }
    function goContact()
    {
    var xhr_object = getXhr();
    var method = 'POST';
    var filename = 'contact.html';
    xhr_object.open(method, filename, true);
    xhr_object.onreadystatechange = function()
    {
    if(xhr_object.readyState == 4)
    {
    var tmp = xhr_object.responseText;
    document.getElementById('zonechange').innerHTML = tmp;
    }
    }
    xhr_object.send(null);
    }
      </script>
      <TITLE>Mon site web</TITLE>
      </HEAD>
      <BODY>
        <div id="page">
            <header>
                <div id="titre_principal">
    				<h1> Bienvenue sur mon site web </h1>
    			</div>
    			<div onclick="goAccueil();"> Accueil </div>
    			<div onclick="goContact();"> Contact </div>
            </header>
    		<section>
    			<div id="zonechange" >
    			</div>
    		</section>
    		<footer>
    			<div id="bas_info">
    				<p> Site réalisé par </p>
    			</div>
    		</footer>
        </div>
      </BODY>
      </HTML>
    Avec cela pas de soucis il n'y a pas de duplicata. Puis-je avoir ton avis sur mon code par la même occasion si sa ne te dérange pas ?

    En faite dans le sujet mon prof demande "lorsqu'on clique sur un des liens, de charger le contenu correspondant (un script PHP recevra ce contenu) par le mécanisme AJAX et de remplacer ainsi le contenu de la <div id="zonechange"> " Mais il n'y a pas bessoin de PHP regarcher la page ?

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •