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

AJAX Discussion :

[AJAX] Javascript issue d'une requête Ajax


Sujet :

AJAX

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    décembre 2007
    Messages
    16
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : décembre 2007
    Messages : 16
    Points : 9
    Points
    9
    Par défaut [AJAX] Javascript issue d'une requête Ajax
    Bonjour à tous,
    J'avais déjà posté dans la section PHP pour mon problème je vous le ré expose :
    "Bonjour à tous,
    J'ai un petit soucis sur le site que je suis en train de créer. Enfait j'ai ajouté un lecteur radio(deezer) et je voudrais que lorsque je change de rubrique(actualites,photos,contact,etc...) le lecteur ne se recharge pas, qu'il reste statique. Car sinon à chaque page le lecteur se recharge et du coup la musique qui était lancé se remet en position de départ à savoir "pause". J'espère que vous comprenez. Comme le site de deezer enfait.
    Voilà, en espérant que cela soit possible.

    Thierry" -> post :http://www.developpez.net/forums/d88...e/#post5031889

    On m'a répondu d'utiliser Ajax, j'ai cherché et j'ai réussi à mettre le tout en place. Cependant un autre problème est survenue. Lorsque je recharge juste le corps de la page avec la requête Ajax :
    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
    function envRequete(url, id, categorie_image)
    {
    	var xhr_object = null;
    	var position = id;
    	if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
    	else if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
     
    	 // ouvre la requête vers la page désirée
    	 xhr_object.open("GET", url, true);
    	 xhr_object.onreadystatechange = function()
    	 {
    		 if ( xhr_object.readyState == 4 )
    		 {
    			 // retourne dans la div le contenu
    			document.getElementById(position).innerHTML = xhr_object.responseText;
    		 }
    	 }
    	 xhr_object.send(null);
     
    }
    Si il y a du JavaScript dans le contenu de la page à afficher il ne s'exécute pas. Normal...mais comment faire pour retourner une page qui contiendrait du JavaScript ? En fait, le soucis c'est que j'ai une des pages qui affiche une galerie photo en JavaScript ( j'ai pensé à faire la galerie en flash, mais j'ai déjà quelques éléments en flash, le site deviendrait "tout flash" et après c'est pas terrible). Je pense qu'il doit y avoir une solution mais je ne vois pas laquelle ? Il faudrait recharger la page de la galerie photo à chaque clic sur une image ? Est-ce que vous voyez ce que je veux dire ? Désolé si j'ai pas été clair, c'est pas simple à expliquer et je débute avec Ajax.

    Thierry

  2. #2
    Expert confirmé
    Avatar de emmanuel.remy
    Inscrit en
    novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 53

    Informations forums :
    Inscription : novembre 2005
    Messages : 2 855
    Points : 4 041
    Points
    4 041
    Par défaut
    Salut,

    La théorie: la propriété innerHTML n'injecte pas les scripts dans la page... Si tu veux le faire il faut le gérer manuellement (voir la faq AJAX et javascript)


    La pratique: ce n'est pas facile de pouvoir identifer tous les scripts chargés... Alors utilise un framework (jQuery, Dojo ou autre) qui proposent des solutions toutes faites dédiées à Ajax...

    ERE
    Quand une tête pense seule, elle devient folle.

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    avril 2010
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2010
    Messages : 19
    Points : 19
    Points
    19
    Par défaut
    Salut kingo111

    Alors pour t'aider, vas voir mon sujet a cette page, j'ai mis mon script qui marche sur IE et firefox pour ce que tu veux, et en plus ca marche avec des page appelé avec du javascript

    donc va a la dernière ligne de cette page :
    http://www.developpez.net/forums/d90...res-appel-div/

    En espérant que ma fonction pourra t'aider, bonne continuation

  4. #4
    Futur Membre du Club
    Profil pro
    Inscrit en
    décembre 2007
    Messages
    16
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : décembre 2007
    Messages : 16
    Points : 9
    Points
    9
    Par défaut
    Merci de vos réponses. En fait, j'ai réussi à faire ce que je voulais.. du moins je croyais, super content et tout ( la méthode eval() m'a bien servi !), j'me dis allez j'essais quand même sous Internet Explorer on sait jamais..et la c'est le drame..
    La fonction eval n'a pas l'air de fonctionner sous IE c'est bizarre, pourtant j'ai repris la fonction comme dans l'exemple de developpez.net juste avec un alert dans le <script> et ça ne marche pas..grrr. Pourtant sur le site j'ai essayé sous Internet Explorer et çà marche, je comprends pas pourtant c'est le même code...j'crois que je suis un boulet...bon je vais me regarder un film, j'examine ton post demain mrtechno01 et j'vous di ou j'en suis. J'vous donnerai l'adresse du site en question si j'ai toujours pas réussi !
    Merci les gars !

  5. #5
    Futur Membre du Club
    Profil pro
    Inscrit en
    décembre 2007
    Messages
    16
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : décembre 2007
    Messages : 16
    Points : 9
    Points
    9
    Par défaut
    Après avoir étudié ton post mrtechno01, j'essaie : sous Firefox aucun problème mais sous IE toujours le même problème !
    Voilà un test tout simple que j'ai fait : test.html
    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
    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <script type="text/javascript">
     
    	function post_get(fichier,div,method)
    	{
    		var xhr=null;
    		var data="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
    		{
    			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
    			xhr = false;
    		}
    		xhr.open( method,fichier,false);
    		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    		xhr.send(data);
    		var c = document.getElementById(div);
    		c.innerHTML = xhr.responseText;
    		try
    		{
    			var l=c.getElementsByTagName('script').length
    			for(var j=0;j<l;j++)
    			{
    				var script = document.createElement('script');
    				script.type = 'text/javascript';
    				script.text = c.getElementsByTagName('script').item(j).text;
    				document.getElementsByTagName('head')[0].appendChild(script);
    			}
    		}
    		catch(e)
    		{
    		alert(e);
    		}
    	}
    </script>
     
    </head>
    <body onload="post_get('test3.php', 'test', 'GET')">
     
    <div id="test">
    </div>
     
    </body>
    </html>
    test3.php :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <script type="text/javascript">
    alert("test");
    </script>
    Saleté d'IE, pourtant mon code fonctionnait sous Firefox, Safari, Opéra, mais IE nan . Le code tout simple en haut devrait marcher pourtant nan???

    Edit : Un autre truc hallucinant :
    code exemple eval de developpez.com : test.html
    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
    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
    82
    83
    84
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
     
     
    </head>
    <body>
    <div class="contenuPage"><h1>Exemple d'utilisation du script </h1>
    <hr /><script type='text/javascript'>
        function getXMLHTTP(){
          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) {
              try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
              } catch (e1) {
                xhr = null;
              }
            }
          }
          else { // XMLHttpRequest non supporté par le navigateur
            alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
          }
          return xhr;
        }
     
        function callUpadeScripts() {
          var _xmlHttp = getXMLHTTP();
          _xmlHttp.open("GET","test3.php");
          _xmlHttp.onreadystatechange=function() {
            if(_xmlHttp.readyState==4&&_xmlHttp.responseText) {
              document.getElementById('cible').innerHTML=_xmlHttp.responseText;
              evalueScripts('cible');
            }
          };
          // envoi de la requête
          _xmlHttp.send(null)
        }
     
        function callUpadeNoScripts() {
          var _xmlHttp = getXMLHTTP();
          _xmlHttp.open("GET","test3.php");
          _xmlHttp.onreadystatechange=function() {
            if(_xmlHttp.readyState==4&&_xmlHttp.responseText) {
              document.getElementById('cible').innerHTML=_xmlHttp.responseText;
            }
          };
          // envoi de la requête
          _xmlHttp.send(null)
        }
     
        function evalueScripts(targetId) {
          var mesScripts = document.getElementById(targetId).getElementsByTagName("script");
          for (var i=0; i<mesScripts.length; i++) {
                  eval(mesScripts[i].innerHTML);
          }
        }
    </script>
    <p>
        Voila un exemple de mise à jour d'un div par du contenu HTML avec ou sans évaluation des
        scripts contenus.
    </p>
    <div>
        <form name="update" action="javascript:void(0)">
            <input type="button" value='mets à jour le div sans scripts' onclick='callUpadeNoScripts()' />
            <br />
     
            <input type="button" value='mets à jour le div avec scripts' onclick='callUpadeScripts()' />
        </form>
    </div>
    <p>Le div suivant est mis à jour par un appel à Ajax:</p>
    <div id='cible' style='border : red solid 1px'>&nbsp;</div>
    <hr />
     
     
     
    </body>
    </html>
    test3.php :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <script type="text/javascript">
    alert("test");
    </script>
    Marche sous Firefox mais pas sous IE chez moi. Sur le site developpez.net marche sous Firefox et IE. Suis-je banni?

  6. #6
    Futur Membre du Club
    Profil pro
    Inscrit en
    décembre 2007
    Messages
    16
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : décembre 2007
    Messages : 16
    Points : 9
    Points
    9
    Par défaut
    Je viens de résoudre mon problème pour IE d'une manière extrêmement bizarre et que je n'arrive pas à comprendre, si quelqu'un peut m'expliquer :
    Il suffit que je rajoute un simple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <?php echo"quelque chose"; ?>
    juste avant la balise <script> et la çà marche !.
    Par contre si je fais : ou s'il n'y a pas de echo avant la balise <script> ça ne fonctionne pas sous IE. What's that ???

  7. #7
    Membre à l'essai
    Profil pro
    Inscrit en
    avril 2010
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2010
    Messages : 19
    Points : 19
    Points
    19
    Par défaut
    salut kingo111,

    Je viens de voir le script que tu as mis et je vois que tu as fais un oublie dans ma fonction, car tu n'as pas mis le function donnee_get(form1) qui s'associe a la function post_get(fichier,div,method,form)

    Après dans ton body tu as fait une erreur d'appel de la fonction
    Ton erreur :
    <body onload="post_get('test3.php', 'test', 'GET')">
    Mettre plutot :
    <body onload="post_get('test3.php', 'test', 'GET',null);">
    Ensuite ca devrai fonctionner sans problème

    Fait un test avec ce que je t'ai marqué et dit moi après

  8. #8
    Futur Membre du Club
    Profil pro
    Inscrit en
    décembre 2007
    Messages
    16
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : décembre 2007
    Messages : 16
    Points : 9
    Points
    9
    Par défaut
    Non, non, c'est normal c'est moi qui l'ai viré ! J'ai pas besoin de formulaire ! Donc j'ai enlevé l'argument form et data je l'ai laissé par défaut à null donc aucun soucis à ce niveau. Sinon ton script fonctionne également comme celui de developpez.com mais avec un
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <?php echo"quelque chose" ?>
    comme cité avant. Trop bizarre, j'ai plus aucun soucis maintenant mais j'aimerais tout de même savoir si quelqu'un sait pourquoi est on obligé de faire un echo avant cette balise <script> pour que celui-ci marche sous IE.

Discussions similaires

  1. [AJAX] Une requête AJAX peut-elle insérer du Javascript ?
    Par Reminouche dans le forum jQuery
    Réponses: 10
    Dernier message: 11/01/2013, 15h18
  2. Executer du javascript chargé par une requête AJAX
    Par HWICE dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 12/10/2009, 16h29
  3. [Prototype] [AJAX] Exécuter une fonction javascript via une requête AJAX et innerHTML
    Par Invité dans le forum Bibliothèques & Frameworks
    Réponses: 2
    Dernier message: 01/05/2009, 05h36
  4. [AJAX] positionnement dans la page suite à une requête Ajax
    Par Ascella dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 30/12/2008, 20h10
  5. [Prototype] TinyMCE et autres lib dans une requête ajax
    Par metos256 dans le forum Bibliothèques & Frameworks
    Réponses: 2
    Dernier message: 03/03/2008, 12h25

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