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

Version imprimable

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:

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!');
                    }
                });

15/07/2010, 11h44
sedryk
Hello cpetitjean,

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

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.
15/07/2010, 11h49
RomainVALERI

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:

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

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:

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:

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:

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:

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.

15/07/2010, 13h12
patouche

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
15/07/2010, 13h17
Bovino

Code:

type: "Ajax"

???
Le type, c'est "GET" ou "POST", "Ajax" n'a aucun sens et perturbe probablement jQuery...
15/07/2010, 13h39
patouche

Citation:

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.
15/07/2010, 14h01
cpetitjean

Effectivement le type est "GET", j'ai également redéfini le dataType et le contentType, mais sans succès.
15/07/2010, 14h20
patouche

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....
15/07/2010, 14h39
cpetitjean

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.

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

Bonjour,

Au lieu de faire :

Citation:

As-tu essayer de passer directement ta variable data dans ta div ?

Code:

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 !

15/07/2010, 17h40
cpetitjean

Oui, j'ai essayé et il me renvoie un Object vide !
Merci de ton aide en tout cas.
15/07/2010, 18h05
patouche

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