append() mutliple balise

**Atom87** · 25/08/2015, 10h01

Bonjour;

Voici le résultat que je voudrais avoir : http://jsfiddle.net/cdog/EpG7x/

Une liste avec un bouton delete sur le coté droit...

Je construis ma liste en jquery avec append :

Code :

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

1
2
3
4
5
                    $listPoints.append($('<a class="list-group-item">').attr("href",value._id.$oid)
                                                                       .text(value.name)
                                                                       .data('latitude',value.latitude)
                                                                       .data('longitude',value.longitude)
                                                                       .data('name',value.name));

Donc pour chaque élément de ma liste je souhaiterais ajouter cela :

Code :

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

1
2
3
4
5
<span class="pull-right">
        <button class="btn btn-xs btn-danger">
          <span class="glyphicon glyphicon-trash"></span>
        </button>
        </span>

Comment faire ?

Merci pour votre aide...

EDIT : $listPoints.append($('<a class="list-group-item"><'+'/'+'a><span class="pull-right"><button class="btn btn-xs btn-danger"><span class="glyphicon glyphicon-trash"><'+'/'+'span><'+'/'+'button><'+'/'+'span>')

mais cela ne marche pas

EDIT 2 : j'en suis ici :

Code :

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

1
2
3
4
5
6
7
8
$listPoints.append($('<a class="list-group-item clearfix">')
                                                                       // .attr("href",value._id.$oid)
                                                                       .text(value.name)
                                                                       .data('latitude',value.latitude)
                                                                       .data('longitude',value.longitude)
                                                                       .data('name',value.name))
                                                                       append('<span class="pull-right"><button class="btn btn-xs btn-danger"><span class="glyphicon glyphicon-trash"></span></button></span>')
                });

**SpaceFrog** · 25/08/2015, 10h34

https://jsfiddle.net/EpG7x/253/

**Atom87** · 25/08/2015, 10h40

Merci, en effet dans mon code j'ai zappé une parenthése aprés mon dernier data...

**SpaceFrog** · 25/08/2015, 10h46

Note que tu peux factoriser les data en un seul Json ...

**Atom87** · 25/08/2015, 11h23

Puis je récupérer l'id de mon<a> ( en passant par le href) pour supprimer l'élément de ma liste....via ajax ?

Je code en rails...

**SpaceFrog** · 25/08/2015, 11h40

heu tes a n'ont pas d'id

**Atom87** · 25/08/2015, 11h50

oui, vous avez raison et si je passai mon id via un data dans mon button et ensuite je fais cela ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
  $('#delete_button').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: /interest_points/+$(this).data('id'), 
                dataType: 'json',
                data: {"_method":"destroy"},
                success: function(data) {
                    alert('ok')
                }
            });
        });

**SpaceFrog** · 25/08/2015, 12h00

c'est une possibilité

**Atom87** · 25/08/2015, 13h42

Oups probléme quand je crée un alert("ok") lors d'un clique sur mon button....cela ne fait rien ....il centre sur la map ( ce que je fais un cliquant sur l'élément de la liste)...je crois que que le button n'est pas pris en compte...(a part le curseur qui change quand on passe la souris sur le button...)

**SpaceFrog** · 25/08/2015, 13h53

lors d'un clique sur mon button.

quel bouton ?
un bouton ajouté dynamiquement ?

Comme l'élément n'existe pas lors de l'attribution de l'evenement click, il faut attribuer le click avec .on()

Code :

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

1
2
 
$('#delete_button').on('click',function(e) {

**Atom87** · 25/08/2015, 13h58

Sur jiddle cela marche :

http://jsfiddle.net/cdog/EpG7x/

mais dans mon code, il ne marche pas....

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
                $deleteButtons = '<span class="pull-right"><button class="btn btn-xs btn-danger delete_buttons" id="delete_button"><span class="glyphicon glyphicon-trash" style="color:E12121"></span></button></span>';
 
                $.each(currentJson, function(key,value){
                    $listPoints.append($('<a class="list-group-item clearfix">')
                                                                       // .attr("href",value._id.$oid)
                                                                       .text(value.name)
                                                                       .data('latitude',value.latitude)
                                                                       .data('longitude',value.longitude)
                                                                       .data('name',value.name)
                                                                       .append($deleteButtons))
                                                                       .data("id",value._id.$oid)
                });
 
        $('#delete_button').on('click',function(){
            alert("ok");
        });

je n'ai pas mon alert ok...

**SpaceFrog** · 25/08/2015, 14h07

my mistake ...
il ne faut pas mettre un id sur le bouton vu qu'il est dupliqué ...
mets une class ...

Code :

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

 $deleteButtons = '<span class="pull-right"><button class="btn btn-xs btn-danger delete_buttons" class="delete_button"><span class="glyphicon glyphicon-trash" style="color:E12121"></span></button></span>';

et

Code :

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

1
2
3
4
 
$('.delete_button').on('click',function(){
            alert("ok");
        });

**Atom87** · 25/08/2015, 14h11

merci pour l'info

Bizarre on dirait que mon <a> prend le dessus sur mon <button>....

**SpaceFrog** · 25/08/2015, 14h14

Normal si ton button est DANS ton a ...

Deux solutions:
soit tu sors le button du a
ou tu fais un stopPropagation sur le button

**Atom87** · 25/08/2015, 14h19

sortir le button du a comme ceci : en mettant un </a> ?

Code :

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

1
2
3
4
5
6
$listPoints.append($('<a class="list-group-item clearfix"></a>')
                                                                       // .attr("href",value._id.$oid)
                                                                       .text(value.name)
                                                                       .data({'latitude':value.latitude,'longitude':value.longitude,'name':value.name})
                                                                       .append($deleteButtons)
                                                                       .data("id",value._id.$oid))

je regarde pour le stop propagation