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

**Daxou31** · 16/10/2009, 18h46

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 :

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

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 :

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

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) :

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

Voici un exemple basique du ficheir xml :

Code :

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

1
2
3
4
<?xml version="1.0"?>
<item class="ListImagesAction">
	<div class="imageDossier">blabla</div>
</item>

J'espère avoir été clair ?

Merci

**danielhagnoul** · 16/10/2009, 22h37

Bonsoir.

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

Code :

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

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

**Daxou31** · 17/10/2009, 11h07

Non en fait c'est un peu plus galère que ca je pense car mon exemple état trop basique :

Code :

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

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 :

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

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 :

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

Du texte Encore encore une div

**danielhagnoul** · 17/10/2009, 13h03

Bonjour.

Exemple :

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
 
<!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>

**Daxou31** · 17/10/2009, 13h52

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 ...

Voici un parmi plusieurs vrai exemple parmi l'infinité de fichiers possibles (car ils sont générés via php) :

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
<?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

**danielhagnoul** · 17/10/2009, 22h36

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 :

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

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...

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

jQuery

Vue hybride

Discussions similaires

Partager

Partager