xmlHttpRequest
Hors ligneBrako Le 02/05/2008 à 20:00 Profil de Brako Configuration de Brako

Bonjour,

Il y a quelques temps de cela j'ai découvert le moyen d'actualiser une partie de ma page sans la recharger grâce à xmlHttprequest.  Après deux semaines de dur labeur en recoupant différentes sources sur le net j'ai enfin compris le principe.

Voici mon script actuel :

/*************************************************
     Fonction de definition de l'object xhr
**************************************************/
function new_xhr(){
     var xhr_object = null;
     if(window.XMLHttpRequest) // Firefox et autres
        xhr_object = new XMLHttpRequest();
     else if(window.ActiveXObject){ // Internet Explorer
        try {
                xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
            }
     }
     else { // XMLHttpRequest non supporté par le navigateur
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
        xhr_object = false;
     }
     return xhr_object;
}
/*****************************************************
     Fonction qui va recharger le contenu
******************************************************/

function load_page(select) {
     var xhr2 = new_xhr();//On crée un nouvel objet XMLHttpRequest
     
     xhr2.onreadystatechange = function(){
          if ( xhr2.readyState == 4 ){//Actions executées une fois le chargement fini
               if(xhr2.status  != 200){//Message si il se produit une erreur
                    document.getElementById("content").innerHTML ="Error code " + xhr2.status;
               } else {//On met le contenu du fichier externe dans la div "content"
                    document.getElementById("content").innerHTML = xhr2.responseText;
               }
          } else {//Message affiché pendant le chargement
               document.getElementById("content").innerHTML = "Chargement en cours ...<br /><img src='loading.gif' alt=''/>";
          }
     }
     xhr2.open( "GET", select.split('!')[1], true);
     xhr2.send(null);
}


Ce script permet d'afficher le contenu d'une page externe entre les balises <div id="content"></div> lorsque l'utilisateur clique sur ce lien

<a href="!form.php?a=auteur" onclick="load_page(this.href);return false;">lien</a>


Malheureusement cela fonctionne que pour un <div id="content">. Or moi j'ai plusieurs balises div. Je pourrais très bien faire une fonction pour chaque balise div mais je suis perfectionniste.

Donc j'ai cherché naïvement à passer le nom de la balise div en variable dans la fonction comme ceci :


function load_page(select, div) {
     var xhr2 = new_xhr();//On crée un nouvel objet XMLHttpRequest
     
     xhr2.onreadystatechange = function(){
          if ( xhr2.readyState == 4 ){//Actions executées une fois le chargement fini
               if(xhr2.status  != 200){//Message si il se preduit une erreur
                    document.getElementById(div).innerHTML ="Error code " + xhr2.status;
               } else {//On met le contenu du fichier externe dans la div
                    document.getElementById(div).innerHTML = xhr2.responseText;
               }
          } else {//Message affiché pendant le chargement
               document.getElementById(div).innerHTML = "Chargement en cours ...<br /><img src='loading.gif' alt=''/>";
          }
     }
     xhr2.open( "GET", select.split('!')[1], true);
     xhr2.send(null);
}



et le lien qui appelle la fonction comme ceci :

<a href="!form.php?a=auteur" onclick="load_page(this.href, content);return false;">lien</a>


Je sais pas ou je me suis trompé, j'ai essayé de suivre la logique mais des fois sa passe pas ^^

Si un âme charitable avait une petite idée sur la question je serais preneur.
--
Ce qui donne une éventuelle matière à suspecter une quelconque propagande ...
Hors ligneAnthony Le 02/05/2008 à 23:56 Profil de Anthony Configuration de Anthony

Fou du volant
Salut

C'est quoi ce que tu souhaites faire exactement ? afficher une image tant que ton site n'est pas chargé ?
--

Hors ligneBrako Le 03/05/2008 à 00:24 Profil de Brako Configuration de Brako

Je propose au visiteur de faire un choix grâce à une liste déroulante, mais si il n'y a pas dans cette liste ce qu'il recherche, je veux qu'il puisse ajouter un élément à cette liste.

Pour cela à côté de cette fameuse liste j'ai créé un lien "nouveau". L'effet recherché est que lorsque l'utilisateur clique sur ce lien la liste disparait au profit d'un champ de type text, et tout cela sans recharger la page.

Mais cela fonctionne que sur une liste, or j'ai plusieurs listes dans mon formulaire. Donc je cherche a adapter la fonction ci-dessus pour qu'elle fonctionne sur l'ensemble des liste (j'ai pas envie de créer une fonction par liste je trouve çà assez barbare)

Je pourrais très bien me passer de xmlhttprequest mais j'aime l'effet rendu.

je sais pas si c'est plus clair (c'est encore brouillon dans ma tête donc j'ai peu de mal à l'expliquer lol)
--
Ce qui donne une éventuelle matière à suspecter une quelconque propagande ...
Hors ligneBrako Le 08/05/2008 à 10:16 Profil de Brako Configuration de Brako

bonjour

j'ai enfin découvert mon erreur, J'avais écrit le lien suivant pour appeler la fonction load_page() :
<a href="!form.php?a=auteur" onclick="load_page(this.href, content);return false;">lien</a>

au lieu de :
<a href="!form.php?a=auteur" onclick="load_page(this.href, 'content');return false;">lien</a>

je suppose que c'est en restant bloquer sur ce genre d'erreur toute bête que l'on apprend .
--
Ce qui donne une éventuelle matière à suspecter une quelconque propagande ...
Hors ligneAnthony Le 08/05/2008 à 10:47 Profil de Anthony Configuration de Anthony

Fou du volant
Arf c'est en effet le genre d'erreurs où l'on reste bloqué une heure sans trouver de réponse
--

Vous avez résolu votre problème avec VIC ? Faites-le savoir sur les réseaux sociaux !
Vulgarisation-informatique.com
Cours en informatique & tutoriels