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

**onirisme** · 18/10/2009, 11h00

Bonjour,

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

Code :

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

1
2
3
4
 
$(document).ready(function(){
    $("#conteneur").load('test.xml div');
});

**Daxou31** · 23/10/2009, 01h05

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 :

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

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.

**Daxou31** · 30/10/2009, 08h00

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

Par exemple au lieu de faire :

Code :

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

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

Code :

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

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.

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

jQuery

Discussions similaires

Partager

Partager