Liste en JQuery [Débutant(e)]

**Cvanhove** · 29/03/2016, 14h38

Bonjour,

pour m'apprendre le JQuery, on m'a demander de créer une liste de 4/5 pays et de créer une textbox et un bouton permettant d'ajouter un pays ou supprimer si celui ci est deja existant.
J'ai récupérer la construction d'une liste sur le net, et suivis un tuto pour essayer de comprendre les bases, mais je dois dire que ça reste encore flou pour moi. Ma liste ne s'affiche pas.
Pouvez-vous m'aidez à me mettre sur la voie?

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
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test JQuery</title>
	</head>
	<body>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
 
		<script>
		var countries = ['United States', 'Canada', 'Argentina', 'Armenia'];
		var cList = $('ul.mylist')
		$.each(countries, function(i)
		{
		    var li = $('<li/>')
		        .addClass('ui-menu-item')
		        .attr('role', 'menuitem')
		        .appendTo(cList);
		    var aaa = $('<a/>')
		        .addClass('ui-all')
		        .text(countries[i])
		        .appendTo(li);
		});
		</script>
	</body>
</html>

**NoSmoking** · 29/03/2016, 15h21

Bonjour,
ne te manquerait-il pas un élément <ul class="mylist"></ul> dans ta page ?

**Cvanhove** · 29/03/2016, 15h35

MAJ :

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
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test JQuery</title>
	</head>
	<body>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
 
		<table id=maTable>
			<tbody>
				<tr>
					<td></td>
				</tr>
			</tbody>
		</table>
 
		<div id="erreur">
		    <p>Liste interactives en JQuery!</p>
		</div>
	    	<input type="text" name="name"/>
	    	<input type="button" name="Ajouter" value="Ajouter" onclick="addList()"/>
	    	<input type="button" name="Supprimer" value="Supprimer" onclick="deleteList()"/>
    </body>
    <script type="text/javascript">
        var obj = [
        		    {nom: 'Cedric'}, 
        			{nom: 'Gustavo'}, 
        			{nom: 'Alexandre'}, 
        			{nom: 'Mickael'}, 
        			{nom: 'Pepito'}
        		]; 
 
        function addList() {
        	$(function(){
        		$(#maTable > tbody:last).append(<tr><td></td></tr>);
       		})
        }
 
        function deleteList() {
 
        }
    </script>
	</body>
</html>

**Cvanhove** · 29/03/2016, 15h37

Du coup, j'ai ma liste en paramétre, il me faut la charger, et implémenter la possibilité d'y ajouter un nom ou d'en supprimer un

**Golgotha** · 29/03/2016, 15h53

Bonjour,

n'oublie pas les double quote dans ta commande : $("#maTable > tbody:last").append("<tr><td></td></tr>");

Invité · 29/03/2016, 18h37

Avec AngularJs c'est plus facile

**Cvanhove** · 30/03/2016, 09h40

Oui mais on m'a demandé de le faire en full JQuery pour apprendre...

**Golgotha** · 30/03/2016, 11h07

Tu t'en sort Cvanhove ?

**Cvanhove** · 30/03/2016, 11h24

Je m'en sors plus où moins, j'ai encore une petite erreur qui dois me boucher la vue

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
 
<script type="text/javascript">
 
    	createList(obj);
 
    	var obj = [
       		    {nom: 'Cedric'},
       			{nom: 'Gustavo'},
       			{nom: 'Alexandre'},
       			{nom: 'Mickael'},
       			{nom: 'Pepito'}
       		];
 
    	$.("#idAjoutBouton").click(function(){
    		obj.push($("#name").val());
			$("#maTable").empty();
			createList();
		});
 
    	function createList(var obj){
			$.each(obj, function(key, value){
				$("#maTable").append("<tr><td>" + value.nom + "</td></tr>");
			})
		};
    </script>

ma fonction createList ne trouve pas l'objet obj. la fonction est bonne c'est certain mais ça bloque ailleurs, peut etre l'appel de mon objet qui n'est pas bon?

**Golgotha** · 30/03/2016, 11h29

Tu veux utiliser une variable qui n'existe pas encore

Met la déclaration de ta variable obj avant l'appel createList

**Cvanhove** · 30/03/2016, 13h05

Effectivement ça fonctionne beaucoup mieux quand je fais pas des erreurs à la *** comme ça

J'ai modifié un petit peu ma liste pour rajouter un id, pour pouvoir simplifier la fonction suppression, seulement j'ai peur que mon remove ne fonctionne pas bien, une idée?

Ma liste :

Code :

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

1
2
3
4
5
6
7
8
 
   	 	var obj = [
      		    {id: '1', nom: 'Cedric'},
      			{id: '2', nom: 'Gustavo'},
      			{id: '3', nom: 'Alexandre'},
      			{id: '4', nom: 'Mickael'},
      			{id: '5', nom: 'Pepito'}
      		];

ma fonction remove :

Code :

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

1
2
3
4
5
6
 
$("#idSuppBouton").click(function(){
			$(obj).remove("#num");
			$("#maTable").empty();
			createList(obj);
		});

le #num correspond à une simple textbox où l'on insert l'id de la ligne a supp.

**Golgotha** · 30/03/2016, 15h45

Cvanhove,

J'ai bricolé une interface : liste avec ajout et suppression avec jQuery.

J'ai mis de commentaire, j’espère que ça pourra t'inspirer. En tout cas te montrer les possibilités de jQuery.

https://jsfiddle.net/bfypa9td/

Je reste disponible si tu as des questions.

Liste en JQuery [Débutant(e)]

jQuery

Partager

Partager