Discussion :

[Hotgeart]

Bonjour,

Pour le bien d'un site je dois charger les informations de plusieurs div grâce à un seul XML.

Celui-ci ce présente sous cette forme :

Code xml :

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
<?xml version="1.0" encoding="UTF-8"?>
<data>
	<block >
		<class>one</class>
		<titre>Titre</titre>
		<image path="images/image1.jpg"></image>
		<image path="images/image2.jpg"></image>
		<image path="images/image3.jpg"></image>
		<description>
		Une super description
		</description>
		<bgcolor>#de052d</bgcolor>
	</block>
	<block >
		<class>two</class>
		<titre>Titre2</titre>
		<image path="images/imagetwo.jpg"></image>
		<description>
		Une super description2
		</description>
		<bgcolor>#de052d</bgcolor>
	</block>
      etc...

Donc il y a :

• Un titre
• Une image
• Une description
• La couleur de bg de la div

Seulement voila il une div la .one qui a 3 image et donc je dois en prendre une des trois au hasard. Mais voila je ne sais pas comment :/ .

J'ai pour ce faire le code Jquery suivant :

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
var jqxhr = $.get("banner.xml", function(data) {
$(data).find('block').each(function(){// find all blocks
 	var $block = $(this);
	var classs = "."+$block.find('class').text();
 
	var image = $block.find("image").attr("path");
 
	$(classs).find(".content").css("background-color", $block.find("bgcolor").text() );
	$(classs).find(".contain").css("background-color", $block.find("bgcolor").text() );
 
	if(classs==".one") {
 
		//Prendre une des 3 images
 
	} else {				
		$(classs).find("img").attr("src", image );
	}
 
	$(classs).find("h2").text( $block.find("titre").text() );
	$(classs).find(".description").html( $block.find("description").text() )		
});
})

• Donc je charge mon XML
• je parcours les block
• je prends l'attribut path pour l'image
• je mets met backgroud
• si la classe est one je prend une des 3 images 3 est un exemple il peut en y avoir qu'une ou 5 même 1000
• sinon je prends simplement l'image
• je mets mon h2 et ma description

Et je suis paumé je serait tenté de faire un
<image id="1" path="images/ima-bpk1.jpg"></image>
<image id="2" path="images/ima-bpk2.jpg"></image>
<image id="3" path="images/ima-bpk3.jpg"></image>

merci pour votre aide

[danielhagnoul]

Bonsoir

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$( function(){
 
	// retourne X tel que : min <= X <= max
	function intRandom( min, max ){
		return Math.floor( Math.random() * ( max - min + 1 ) + min );
	}
 
	var jqXHR = $.get( "effaceXml.xml", "xml" );
 
	jqXHR.done( function( data, textStatus, jqXHR ){
		// succès de la transaction, on doit traiter le contenu de data
 
               // debug 
		// console.log( data, textStatus, jqXHR );
 
		$( data ).find( "block" ).each( function( i, item ){
 
			var tab = [],
				tabImg = [];
 
			$( item ).children().each( function( j, jtem ){
				if ( jtem.tagName == "image" ){
					tabImg.push( $( jtem ).attr( "path" ) );
				} else {
					tab.push( $( jtem ).text() );
				}
			});
 
			// debug
			// console.log( tab, tabImg, tabImg[ intRandom( 0, tabImg.length - 1 ) ] );
 
			$( "." + tab[ 0 ] )
				.find( ".content" )
				.css( "background-color", tab[ 3 ] )
				.end()
				.find( ".contain" )
				.css( "background-color", tab[ 3 ] )
				.end()
				.find( "img" )
				.attr( "src", tabImg[ intRandom( 0, tabImg.length - 1 ) ] )
				.end()
				.find( "h2" )
				.text( tab[ 1 ] )
				.end()
				.find( ".description" ).html( tab[ 2 ] );
		});
 
	});
 
	jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
		// échec de la transaction, gérer la catastrophe
 
		// debug
		console.log( jqXHR, textStatus, errorThrown );
 
	});
 
       /*
	jqXHR.always( function( jqXHR, textStatus ){
		// la transaction est terminée
 
		// debug
		console.log( jqXHR, textStatus );
	});
       */
 
}):