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 :

[AJAX] Appel d'une fonction javascript dans une page chargée en ajax


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    23
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 23
    Par défaut [AJAX] Appel d'une fonction javascript dans une page chargée en ajax
    Bonjour a tous,
    je suis en train de creer un site qui utilise ajax afin de charger certaines pages.
    Je m'explique, j'ai un menu, réparti en catégories, et la page principal de chaque catégories présente des sous menus.
    Les pages des sous menus sont alors appelées via une méthode ajax, de la manière suivante :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <a href="#" onclick="request('presentation.php?section=coordonnees','contenu');return(false)"  >Coordonn&eacute;es</a></li>
    les pages des sous catégories sont donc chargées dans une div (que j'ai appelée contenu).
    Le problème est que j'utilise des fonctions javascript à l'intérieur des pages appellées en ajax.
    La page "mère" (qui contient la div contenu) appelle bien ces fonctions dans le header et ces fonctions fonctionnent, mais dés que l'on charge un page avec javascript, la premiere fois qu'on utilisera une fonction javascript elle ne marchera pas.

    Voici le code pour charger les pages dans une div :

    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
     
    // Permet de ne rafraichir que le contenu d'une div et non toute la page
    function request(url,cadre) {
    		var XHR = null;
     
    		if(window.XMLHttpRequest) // Firefox
    			XHR = new XMLHttpRequest();
    		else if(window.ActiveXObject) // Internet Explorer
    			XHR = new ActiveXObject("Microsoft.XMLHTTP");
    		else { 
    			// XMLHttpRequest non supporté par le navigateur
    			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
    			return;
    		}
    		// envoie de la requête, methode GET et de l'url
    		XHR.open("GET",url, true);
     
    		// on guette les changements d'état de l'objet
    		XHR.onreadystatechange = function attente() {
     
    		// l'état est à 4, requête reçu !
    		if(XHR.readyState == 4)     {
    			// ecriture de la réponse
    			document.getElementById(cadre).innerHTML = XHR.responseText;
    		}
    	}
    	XHR.send(null);		// le travail est terminé
    	return;
    }

    Savez-vous de quoi ça vient ?
    Merci beaucoup

  2. #2
    Membre expérimenté
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Février 2007
    Messages
    340
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Transports

    Informations forums :
    Inscription : Février 2007
    Messages : 340
    Par défaut
    Lorsque tu utilises le HTTPrequest, il te renvoit les données Ajax dans xhr.responseText. Jusque là tout va bien.
    Lorsque tu fais :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById(cadre).innerHTML = XHR.responseText;
    Tu lui dis de stocker le texte (ou html) dans ta page... et c'est tout !

    Nullepart tu lui spécifie qu'il faudrait évaluer du code javascript dans ce retour ajax.
    Lors du chargement d'une page standard, ton navigateur évalue le code entre <script> et </script> mais dans le cas d'un ajax, ça n'est pas le cas.
    J'ai déjà eu le meme type de problème que toi. je lance mon ajax puis je découpe le xhr.responseText, je récupére le code qu'il y a entre <script> et </script>. Pour finir, je fais un eval() dessus

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    23
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 23
    Par défaut
    tout d'abord merci de m'avoir repondu
    Donc il faudrait que je recupere ce qu'il y a à l'interieur des balises script de la page chargée via ajax c'est bien ça ?
    Mais est ce qu'il ne va pas y avoir un probleme de chemin si la page chargée et la page "mere" ne sont pas dans le même repertoire ?
    Sinon pourriez-vous m'expliquer comment faire pour executer les fonctions au sein des pages chargées en ajax s'il vous plait ?

    Pour information, dans la page chargée en question, je voudrais afficher une galerie avec "FancyZoom" =)

    je debute, merci pour votre aide

  4. #4
    Membre expérimenté
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Février 2007
    Messages
    340
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Transports

    Informations forums :
    Inscription : Février 2007
    Messages : 340
    Par défaut
    Imaginons que ton xhr.responseText vaut ceci (il faut commencer par simple) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <script>alert('coucou'); </script> <div>Mon code html de ma page</div>
    Il te faut isoler ton script donc tu fais :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var codejs = xhr.responseText;
    codejs = codejs.substr(codejs.lastIndexOf('<script>')+8,codejs.lastIndexOf('</script>'));
    alert('mon beau code js (pour controler) = '+codejs);
    try
    {
      eval(codejs);
    }
    catch(exc)
    {
      alert('eval ne marche pas');
    }
    Voila si je n'ai pas fait d'erreur ça doit marcher.

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    23
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 23
    Par défaut
    pardon, je suis très chiant :/ mais si, dans la page chargée par ajax, entre les balises scripts, ce sont les liens vers les fichiers contenant les fonctions js et non pas des fonctions "tapées entièrement" comme dans votre exemple, comment puis-je faire ?

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    23
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 23
    Par défaut
    En fait je me rends compte d'un problème, pour utiliser ma galerie (dans une page chargée via ajax), je dois placé une fonctions dans la balise body, comme ceci :

    <body onload="setupZoom()">
    est ce que ce n'est pas "sale" de chargée dans le body de la page "mère" une page avec encore un autre body ?

Discussions similaires

  1. appeler une fonction php dans une fonction javaScript
    Par geeksDeve dans le forum Langage
    Réponses: 3
    Dernier message: 17/04/2012, 15h30
  2. Réponses: 10
    Dernier message: 14/03/2009, 13h36
  3. Appel d'un fichier .js dans une fonction javascript
    Par Ubum dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 29/01/2008, 15h08
  4. Réponses: 1
    Dernier message: 25/10/2007, 21h25
  5. [AJAX] Appel d'un fichier php contenant une fonction javascript.
    Par Empty_body dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 19/08/2007, 21h16

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