Discussion :

[lolo34140]

Bonjour,

J'ai créé un script qui me permet de récupérer des éléments d'une base de donnée en xml et de les insérer dans un conteneur.

Pour l'instant, je n'arrive qu'a insérer tous les elements du fichier xml en une seule fois avec une fonction each.

Je souhaiterais pourvoir définir un nombre d’élément donné à insérer dans mon conteneur.

Par exemple avec un onload insérer les 10 premiers éléments du fichier xml. Puis avec un bouton insérer les 10 éléments suivant avec un clique.

Voici mon script jquery :

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
$.get('data.xml', function (d){
 
    $(d).find('element').each(function (){
	var $element = $(this);
	var id = $element.attr("id");
	var $element = $(this);
	var id = $element.attr("id");
	var size = $element.attr("size");
	var category = $element.attr("category");
	var urlpage = $element.find('urlpage').text();
        var urlimage = $element.find('urlimage').text();
        var title = $element.find('title').text();
	var $newelement = $('<div class="element '+ size +' '+category +'" id="_'+id+'"></div>').html('<a class= "link" href="' + urlpage + '"><img  src="' + urlimage + '" class="thumbnail" />' + '<div>' + '<span>' + '<i class="icon-pencil"></i>' + '&nbsp;&nbsp;' + title + '</span><span class="more">more.</span></div></a></div>');
	$container.isotope( 'insert', $newelement)
    });
});

et la structure de mon fichier xml:

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
24
25
26
27
28
29
30
31
32
33
34
<?xml version="1.0" encoding="utf-8" ?>
<elements>
 
	<element id="13" size="normal" category="blog">
		<urlpage>/portfolio/dock.html</urlpage>
		<urlimage>./Post thumbnail images/formlabs.jpg</urlimage>
		<title>Formlabs : An offordable 3D printer on kickstarter</title>
	</element>
 
	<element id="12" size="square" category="portfolio">
		<urlpage>/portfolio/dock.html</urlpage>
		<urlimage>./Post thumbnail images/Bumper.JPG</urlimage>
		<title>Minimal Bumper for iPhone 5</title>
	</element>
 
	<element id="11" size="normal" category="portfolio">
		<urlpage>/portfolio/dock.html</urlpage>
		<urlimage>./Post thumbnail images/Ultraslimcase.jpg</urlimage>
		<title>UltraSlim case</title>
	</element>
 
	<element id="10" size="wide" category="portfolio">
		<urlpage>/portfolio/dock.html</urlpage>
		<urlimage>./Post thumbnail images/Dock.jpg</urlimage>
		<title>iPhone 5 Dock</title>
	</element>
 
	<element id="9" size="normal" category="blog">
		<urlpage>/portfolio/dock.html</urlpage>
		<urlimage>./Post thumbnail images/Freakyshapeshop.jpg</urlimage>
		<title>Shop on Shapeway now!</title>
	</element>
 
</elements>

Je pense qu'il me faut une boucle for avec un itération sur l'id de chaque élément contenu dans le xml.

Merci d'avance,

Loïc

[lolo34140]

Je crois que je suis vraiment pas loin de la solution...

Mais je pense avoir quelques problèmes avec la façon dont l’écrire. Notamment sur la hiérarchisation de mes fonctions et sur comment bien récupérer mes variables.

Je pense que la logique du code est bonne. Elle devrait permettre d'insérer les éléments à l affichage de la page et de pouvoir en insérer d’autres via un clique.

Avec ce code j arrive à choisir le nombre d'élément que je souhaite afficher au chargement de la page :

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
function init(){
 
    $.get('data.xml', function (d){
 
			var count = $(d).find("element").size();
			var last = $(d).find("element").first().attr("id");
			var nbOfelemet = 5;
			var nbToappend = last - nbOfelemet;
			alert(count);
			alert(last);
 
$(d).find('element').each(function (){		
 
			var $element = $(this);
			var id = $element.attr("id");
			var size = $element.attr("size");
			var category = $element.attr("category");
			var urlpage = $element.find('urlpage').text();
            var urlimage = $element.find('urlimage').text();
            var title = $element.find('title').text();		
 
 
 
var $newelement = $('<div class="element '+ size +' '+category +'" id="_'+id+'"></div>').html('<a class= "link" href="' + urlpage + '"><img  src="' + urlimage + '" class="thumbnail" />' + '<div>' + '<span>' + '<i class="icon-pencil"></i>' + '&nbsp;&nbsp;' + title + '</span><span class="more">more.</span></div></a></div>');
 
$container.isotope( 'insert', $newelement)
 
var last = id;
return ( id != nbToappend);
 
		});
		initIsotope();
 
	});
}

Seulement si je veux pouvoir utiliser ce code avec un clique, je dois sortir les variables count et last afin de sélectionner les prochains éléments à insérer avec un clique.

J'ai essayé ça mais plus rien ne marche :

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
function atfirst(){
$.get('data.xml', function (d){
	var count = $(d).find("element").size();
	var last = $(d).find("element").first().attr("id");	
	var nbOfelemet = 5;
	var nbToappend = last - nbOfelemet;	
	alert(count);
	alert(last);
	alert(nbToappend);
});
}
 
atfirst();		
init();	
 
function init(){
 
$.get('data.xml', function (d){
 
			var nbOfelemet = 5;
			var nbToappend = last - nbOfelemet;
			alert(nbToappend);
 
 
$(d).find('element').each(function (){		
 
			var $element = $(this);
			var id = $element.attr("id");
			var size = $element.attr("size");
			var category = $element.attr("category");
			var urlpage = $element.find('urlpage').text();
            var urlimage = $element.find('urlimage').text();
            var title = $element.find('title').text();		
 
var $newelement = $('<div class="element '+ size +' '+category +'" id="_'+id+'"></div>').html('<a class= "link" href="' + urlpage + '"><img  src="' + urlimage + '" class="thumbnail" />' + '<div>' + '<span>' + '<i class="icon-pencil"></i>' + '&nbsp;&nbsp;' + title + '</span><span class="more">more.</span></div></a></div>');
 
$container.isotope( 'insert', $newelement)
 
var last = id;
alert(id);			
return ( id != nbToappend);
 
		});
		initIsotope();		
	});
}

C'est qu'une histoire d'écriture du code, d'organisation. Je ne sais pas bien comment le saisir. En tout cas je pense que la logique devrait permettre de faire ce que je souhaite.

En espérant que l'on puisse m'aider.