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.