Faire un append du contenu xml récupéré par ajax

Version imprimable

Bonjour, comme le titre l'indique, je souhaite faire un append d'un contenu xml récupéré par ajax.

Je récupère bien mon élément voici ma fonction en cas de succès :
Code:

1 2 3 4 5 6 7 8 9 success: function( data ) { // Le premier noeud var first = $( data ).children().get( 0 ); // La div de réception var content = $( '#'+$( first ).attr( 'class' ) ).find( '.contentAction' ); $( content ).empty(); $( content ).append( $( first ).children() ); }
Lorsque j'inspecte mon code (avec firebug) je vois mes balises mais à l'écran n'est visible que le texte comme si je faisais .text() sur tous les enfants de "first".
Du coup comment je peux récupérer le code html car quand je fais à la place du append je mets
Code:

1 2 3 4 $( first ).children().each( function() { $( content ).append( $( this ).html() ); });
J'ai une erreur javascript (normale vu que ce n'est pas un élément html) :

Citation:

Erreur*: this[0].innerHTML is undefined
Fichier Source*: http://localhost/gallerix/Js/JQuery.js
Ligne*: 12

Voici un exemple basique du ficheir xml :
Code:

1 2 3 4 <?xml version="1.0"?> <item class="ListImagesAction"> <div class="imageDossier">blabla</div> </item>
J'espère avoir été clair ?

Merci

Bonsoir.

Si j'ai bien compris la structure du fichier XML, exemple :
Code:

1 2 3 4 5 6 $(data).find("div").each(function(i, item) { var classe = $(item).attr("class"); var str = $(item).text(); ... });

17/10/2009, 11h07
Daxou31
Non en fait c'est un peu plus galère que ca je pense car mon exemple état trop basique :
Code:

1 2 3 4 5 6 7 8 9 10 11 <?xml version="1.0"?> <item class="ListImagesAction"> <div> <p>Du texte</p> <p>Encore</p> <div>encore une div</div> </div> <div> <img src="img.png" alt="img" /> </div> </item>
Le root qui est appelé item est juste là pour contenir les informations en fait et je voudrais insérer dans ma page toute la structure qui correspond donc à
Code:

1 2 3 4 5 6 7 8 <div> <p>Du texte</p> <p>Encore</p> <div>encore une div</div> </div> <div> <img src="img.png" alt="img" /> </div>
Et pas juste :

Code:

Du texte Encore encore une div

Bonjour.

Exemple :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans nom</title>
    <script type="text/javascript" src="../../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
 
            $.get("exercice1.xml", function(xml){
                var s = [];
 
                $(xml).children("div").each(function(i, item){
                    //console.log("item[" + i + "] = " + item);
 
                    $(item).children("p").each(function(j, jtem){
                        //console.log("jtem[" + j + "] = " + jtem);
 
                        s.push("<p>" + $(jtem).text() + "</p>");
                    });
 
                    $(item).children("div").each(function(k, ktem){
                        //console.log("ktem[" + k + "] = " + ktem);
 
                        s.push("<div>" + $(ktem).text() + "</div>");
                    });
 
                    $(item).children("img").each(function(m, mtem){
                        //console.log("mtem[" + m + "] = " + mtem);
 
                        s.push("<img style='margin:12px; border:1px solid black;' src='" + $(mtem).attr("src") + "' alt='" + $(mtem).attr("alt") + "' />");
                    });
                });
 
                $("#conteneur").html("<div>" + s[0] + s[1] + s[2] + "</div><div>" + s[3] + "</div>");
            }, "xml");
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <p>
            Désolé, le code XML n'est pas disponible !
        </p>
        <p>
            Veuillez avoir l'obligeance de signaler cette erreur au <a href='mailto:moi@ici.com'>Webmestre</a>. Merci !
        </p>
    </div>
</body>
</html>

Merci pour ta réponse mais elle ne me convient qu'à moitié car mon exemple n'était qu'un diminutif de toutes les possibilités. En fait je voudrais faire ca mais de manière plus générique donc si je veux reprendre ta méthode, je n'ai qu'à faire un find( '*' ) et créer les balises avec nodeName tout en testant les balises orphelines ....... un case tête.

Est ce qu'il n'y aurait pas plutôt moyen de convertir mon objet JQuery de manière à ce qu'il accepte le .html()

J'ai pas trop envie de boucler sur tous mes éléments et les recréer avec tous les attributs que je dois récupérer ... :mur:

Voici un parmi plusieurs vrai exemple parmi l'infinité de fichiers possibles (car ils sont générés via php) :
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 <?xml version="1.0"?> <item class="ListImagesAction"> <div class="imageDossier"> <div class="listImages"> <p class="folderClose folderLink">aa</p> <div class="imageDossier" style="display: none;"> <div class="listImages"> <p class="imageUse imageLink" title="4">nes.png</p> </div> </div> <p class="folderClose folderLink">bb</p> <div class="imageDossier" style="display: none;"> <div class="listImages"> <p class="folderClose folderLink">cc</p> <div class="imageDossier" style="display: none;"> <div class="listImages"> <p class="imageNoUse imageLink" title="6">ichi.png</p> <p class="imageUse imageLink" title="7">tuxichi.png</p> </div> </div> <p class="imageNoUse imageLink" title="94">Tortue.png</p> <p class="imageUse imageLink" title="5">tuxichi.png</p> </div> </div> <p class="folderClose folderLink">cc</p> <div class="imageDossier" style="display: none;"> <div class="listImages"> <p class="imageUse imageLink" title="93">Bleach-05.jpg</p> <p class="imageUse imageLink" title="9">major1.jpg</p> <p class="imageUse imageLink" title="10">Nintendo.jpg</p> <p class="imageUse imageLink" title="11">tf2-2.png</p> </div> </div> <p class="folderClose folderLink">photos</p> <div class="imageDossier" style="display: none;"> <div class="listImages"> <p class="imageUse imageLink" title="15">c2xlelouch1280.png</p> <p class="imageUse imageLink" title="16">CodeGeassGazeAbyss.jpg</p> <p class="imageUse imageLink" title="12">Mario-01.jpg</p> <p class="imageUse imageLink" title="13">testchmba11advanced0000.jpg</p> </div> </div> <p class="imageUse imageLink" title="1">lucky.gif</p> <p class="imageNoUse imageLink" title="98">Major.png</p> <p class="imageUse imageLink" title="2">spy.png</p> <p class="imageUse imageLink" title="3">tuxichi.png</p> </div> </div> </item>
Comme tu peux le voir c'est assez diversifié dans les emboitements et ils ne sont pas tous comme ca

17/10/2009, 22h36
danielhagnoul
Bonsoir.

Si, je dis si, votre xml est toujours un html emballé et qu'il commence toujours par <div> et se termine toujours par un </div> alors on peut essayer :
Code:

1 2 3 4 5 $.get("exercice1.xml", function(data){ var s = data; $("#conteneur").html(s.slice(s.indexOf("<div>"), s.lastIndexOf("</div>")+6)); }, "xml");
Ce n'est pas très beau, mais...
18/10/2009, 11h00
onirisme
Bonjour,

Regarde du côté de la fonction $.load(URL,DATA,CALLBACK).
Code:

1 2 3 4 $(document).ready(function(){ $("#conteneur").load('test.xml div'); });
23/10/2009, 01h05
Daxou31
Bonjour tout le monde,

désolé du retard mais j'ai eu quelques mouvement donc j'ai aps eu le temps de répondre.

J'ai finalement réussi en changeant le dataType en html (même si ca n'est pas vraiment donc j'ai une petite bidouille pour récupérer la class tout va bien j'arrive bien à intégrer le contenu html mais il me reste un soucis qui est le dynamisme de cette partie qui est bloqué car les évènements javascript de JQuery ne reconnaissent pas l'ajout comme comme de l'élément activable

Par exemple ceci ne marche plus :
Code:

1 2 3 4 5 $( 'h3' ).mouseover( function() { $( this ).css( 'cursor' , 'pointer' ); $( this ).css( 'background-color' , '#DDDDDD' ); });
Du coup si dans mon code que je copie il y a un h3, celui-ci ne réagit pas à cet évènement.

Merci.

Ok j'ai trouvé : utiliser live à la place de .event.

Par exemple au lieu de faire :
Code:

1 2 3 4 5 $( 'h3' ).mouseover( function() { $( this ).css( 'cursor' , 'pointer' ); $( this ).css( 'background-color' , '#DDDDDD' ); });
Code:

1 2 3 4 5 $( 'h3' ).live( 'mouseover' , function() { $( this ).css( 'cursor' , 'pointer' ); $( this ).css( 'background-color' , '#DDDDDD' ); });
Voici un exemple : http://bestyle.org/jquery-live-test/

Voilou.