La fonction .html() ne me renvoie pas ma balise <script>

**cpetitjean** · 13/07/2010, 16h50

Bonjour à tous,

Je souhaiterai récupérer le contenu d'un DIV dans une page html, et ce DIV contient un Script Javascript, apparemment lorsque j'exécute le code suivant, je récupère tout mon code Html sauf mon Script.
Cette fonction ne fonctionne plus depuis que j'utilise Jquery v1.4.2, ça fonctionnait avec la 1.3.
Quelqu'un aurait-il une idée ?
Merci d'avance pour votre aide.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
jQuery.ajax({
                    type: "Ajax",
                    url: monURL,
                    success: function(data) {
	      // ici, je récupère dans ma page HTML, tout ce qui se trouve dans mon div [idDiv] dont un script 
                    var content = jQuery("#idDiv", data).html();
                    alert(content);
                    },
                    error: function(data) {
                        alert('Notification d'erreur!');
                    }
                });

**sedryk** · 15/07/2010, 11h44

Hello cpetitjean,

J'ai fais un test simple sans appel Ajax et la fonction html() fonctionne correctement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="id1">
	<script type="text/javascript">var a = "a";</script>
	<a href="javascript:alert($('#id1').html())">html()</a>
</div>

Il faudrait voir du côté de ton appel Ajax.

**RomainVALERI** · 15/07/2010, 11h49

Ce n'était peut-être que pour l'exemple, mais dans ton extrait il y a une erreur de quotes dans l'alert de ta callback error :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

alert('Notification d\'erreur!');

**cpetitjean** · 15/07/2010, 12h14

Merci à vous 2 pour votre aide.
Pour répondre à l'histoire des quotes dans l'alert, effectivement c'était juste pour l'exemple. Mon alert fonctionne.
Merci aussi sedryk d'avoir tester, c'est vrai que le code inclus dans la même page fonctionne bien, mais en fait dans mon exemple (désolé, je ne l'avais pas bien spécifié), je récupère un morceau de code d'une autre page.
Je vous donne le code de mes 2 pages :

Page : [PageA.htm]

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
 
<html>
  <head>
        <script type="text/javascript" src="../jquery.js"></script>
  </head>
  <body>
           <div id="monDiv">
            <script type="text/javascript">
                //<![CDATA[
                var t = "";
                $(document).ready(function() {
                   $("li.divT4").css({ backgroundColor: "#red", color: "#56839F", font: "14px Verdana,Sans-Serif" });
                });
                //]]>
            </script>
                <ul>
                    <li id="divT1"><a href="#">Titre 1</a></li>
                    <li id="divT2"><a href="#">Titre 2</a></li>
                    <li id="divT3"><a href="#">Titre 3</a></li>
                    <li id="divT4"><a href="#">Titre 4</a></li>
                    <li id="divT5" class="active"><a href="#">Titre 5</a></li>
                </ul>
            </div>
  <body>
</html>

Page : [PageB.htm]

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
 
<html>
  <head>
    <script type="text/javascript" language="JavaScript" src="../jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(
            function() {
                $.ajax({
                    url: "PageA.htm",
                    type: "GET",
                    success: function(data) {
                    var content = $("#monDiv", data).html();
                        $("#essai").html(content); 
                    },
                    error: function(data) {
                        alert('La page cible ne répond pas');
                    }
                });
            });  
    </script>
 
</head>
  <body>
    texte...
    <div id="essai">xxx</div>
  <body>
</html>

Et du coup dans mon div #essai, je ne récupère que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
                <ul>
                    <li id="divT1"><a href="#">Titre 1</a></li>
                    <li id="divT2"><a href="#">Titre 2</a></li>
                    <li id="divT3"><a href="#">Titre 3</a></li>
                    <li id="divT4"><a href="#">Titre 4</a></li>
                    <li id="divT5" class="active"><a href="#">Titre 5</a></li>
                </ul>

au lieu de :

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
 
            <script type="text/javascript">
                //<![CDATA[
                var t = "";
                $(document).ready(function() {
                   $("li.divT4").css({ backgroundColor: "#red", color: "#56839F", font: "14px Verdana,Sans-Serif" });
                });
                //]]>
            </script>
                <ul>
                    <li id="divT1"><a href="#">Titre 1</a></li>
                    <li id="divT2"><a href="#">Titre 2</a></li>
                    <li id="divT3"><a href="#">Titre 3</a></li>
                    <li id="divT4"><a href="#">Titre 4</a></li>
                    <li id="divT5" class="active"><a href="#">Titre 5</a></li>
                </ul>

Avec la version 1.3 de JQuery cela fonctionne parfaitement. Avec la nouvelle version 1.4.2, impossible de le faire fonctionner à nouveau. J'ai essayé pas mal de chose, mais là je cale.
Merci encore pour votre aide.

**patouche** · 15/07/2010, 13h12

Je sais pas trop mais essaie de voir si en définissant ton dataType sur text dans ta requete ajax ça change quelque chose.

Cordialement,
Patouche

**Bovino** · 15/07/2010, 13h17

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

type: "Ajax"

???
Le type, c'est "GET" ou "POST", "Ajax" n'a aucun sens et perturbe probablement jQuery...

**patouche** · 15/07/2010, 13h39

Envoyé par Bovino

???
Le type, c'est "GET" ou "POST", "Ajax" n'a aucun sens et perturbe probablement jQuery...

Non, ça c'était juste pour son exemple de démonstration, mais ce que tu dis n'est cependant pas faux.

**cpetitjean** · 15/07/2010, 14h01

Effectivement le type est "GET", j'ai également redéfini le dataType et le contentType, mais sans succès.

**patouche** · 15/07/2010, 14h20

une solution un peu violent... Tu définies le header (en php) dans ton fichier A afin qu'il te renvoie un contenu text... Si tu n'as pas tout le contenu, je comprend pas trop. Et il ne faut pas que tu aies à accéder directement à ta page A sinon, ça ne fonctionne pas.

Sinon, tu récupères ton objet xhr et tu prends le responseText.

De plus je comprends pas trop l'intérêt d'insérer une page html dans une page html....

**cpetitjean** · 15/07/2010, 14h39

Ma page A en fait, est un userControl (je suis en ASP.NET) qui est utilisé dans plusieurs pages dont une modale qui ne récupère qu'une partie du code de cette page.
Il n'y a donc pas de Header dans ma page A.
Désolé j'aurais dû effectivement donner un peu plus d'élément concernant le contexte avant tout.

**rchabier72** · 15/07/2010, 17h13

Bonjour,

Au lieu de faire :

As-tu essayer de passer directement ta variable data dans ta 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
<script type="text/javascript">
        $(document).ready(
            function() {
                $.ajax({
                    url: "PageA.htm",
                    type: "GET",
                    success: function(data) {
                    var content = $("#monDiv").html(data);
                    },
                    error: function(data) {
                        alert('La page cible ne répond pas');
                    }
                });
            });  
    </script>

En espérant que cela aide !

**cpetitjean** · 15/07/2010, 17h40

Oui, j'ai essayé et il me renvoie un Object vide !
Merci de ton aide en tout cas.

**patouche** · 15/07/2010, 18h05

Regarde la réponse renvoyé lorsque tu fais ta requete ajax. Si tu as firebug, la requete devrait apparaitre dans la console. Si tu n'as pas la balise <script> dans ta réponse, ça ne sert à rien de chercher du coté de la méthode .html qui n'ai alors pas en cause.

Patouche

La fonction .html() ne me renvoie pas ma balise <script>

jQuery

Discussions similaires

Partager

Partager