append() mutliple balise

Version imprimable

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:

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:

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:

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>')
                });

25/08/2015, 11h34
SpaceFrog

https://jsfiddle.net/EpG7x/253/
25/08/2015, 11h40
Atom87

Merci, en effet dans mon code j'ai zappé une parenthése aprés mon dernier data...:aie:
25/08/2015, 11h46
SpaceFrog

Note que tu peux factoriser les data en un seul Json ...
25/08/2015, 12h23
Atom87

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...
25/08/2015, 12h40
SpaceFrog

heu tes a n'ont pas d'id :koi:

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

Code:

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')
                }
            });
        });

25/08/2015, 13h00
SpaceFrog

c'est une possibilité
25/08/2015, 14h42
Atom87

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...)
25/08/2015, 14h53
SpaceFrog
Citation:

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:

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

Sur jiddle cela marche :

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

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

Code:

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

25/08/2015, 15h07
SpaceFrog
my mistake ...
il ne faut pas mettre un id sur le bouton vu qu'il est dupliqué ...
mets une class ...

Code:

$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:

1 2 3 4 $('.delete_button').on('click',function(){ alert("ok"); });
25/08/2015, 15h11
Atom87

merci pour l'info :D

Bizarre on dirait que mon <a> prend le dessus sur mon <button>....
25/08/2015, 15h14
SpaceFrog

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

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

Code:

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

25/08/2015, 15h29
SpaceFrog

https://jsfiddle.net/EpG7x/254/
25/08/2015, 15h29
Atom87

j'ai vu pour le stop propagation...mais ou le placer ?
25/08/2015, 15h31
SpaceFrog

cf ma réponse précédente, nos posts se sont croisés ...
25/08/2015, 15h37
Atom87

cela ne marche pas dans mon code...
25/08/2015, 15h54
SpaceFrog

:roll:
mhhhh ...

mais comme je ne vois pas ton code ...

désolé...

Code:

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
 
 $deleteButtons = '<span class="pull-right"><button class="btn btn-xs btn-danger delete_buttons" class="deletebutton" ><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,'longitude':value.longitude,'name':value.name})
                                                                       .append($deleteButtons)
                                                                       .data("id",value._id.$oid))
                });
 
   $('.deletebutton').on('click', function(e){
            e.stopPropagation();
            e.preventDefault();
 
            alert('ok');
        })   
 
        // ajax destroy an interest point in list
        $('.deletebutton').on('click',function(e) {
            e.preventDefault();
            $.ajax({
                type: "DELETE",
                url: '/interest_points/', 
                dataType: 'json',
                data: { id: $(this).data('id')},
                success: function(data) {
                    alert('ok')
                }
            });
        });

25/08/2015, 16h29
SpaceFrog

:koi: deux fois le on click ??
25/08/2015, 16h30
Atom87

non désolé mais j'ai mis le second on click en commentaire...donc je garde le alert("ok")...quine fonctionne pas
25/08/2015, 16h36
SpaceFrog

deux fois class ??
https://jsfiddle.net/EpG7x/255/
25/08/2015, 16h47
Atom87

non je viens de supprimer la seconde classe ^^

mais cela ne marche toujours pas
25/08/2015, 18h08
SpaceFrog

Aucun message d'erreur en console ?

Exemple :

Code:

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
  <style>
 
    .list-group-item { display: block; }
 
  </style>
</head>
<body>
 
  <div class="container">
    <div class="list-group"></div>
  </div>
 
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
    "use strict";
 
    $( function(){ // forme abrégée de $(document).ready( function( ){
 
      var
        data = [
          {
            "latitude" : 65465,
            "longitude" : 98765,
            "name" : "Paris",
            "_id" : {
              "$oid" : "http://www.google.fr"
            }
          },
          {
            "latitude" : 65465,
            "longitude" : 98765,
            "name" : "Bruxelles",
            "_id" : {
              "$oid" : "http://www.google.fr"
            }
          },
          {
            "latitude" : 65465,
            "longitude" : 98765,
            "name" : "Anvers",
            "_id" : {
              "$oid" : "http://www.google.fr"
            }
          }
        ],
        jObjListPoints = $( ".list-group" ),
        jObjButtons = $( '<span class="pull-right"></span>' ),
        jObjBtnInfo = $( '<button/>', {
          "css" : {
            "display" : "inline-block",
            "margin-left" : "6px"
          },
          "class" : "btn btn-xs btn-info",
          "text" : "Info",
          "click" : function( event ){
            event.preventDefault()
            event.stopPropagation();
 
            // debug, console touche F12
            console.log( "btn-info", $( event.target ).parents( ".list-group-item" ).attr( "href" ) );
          }
        }),
        jObjBtnWarning = $( '<button/>', {
          "css" : {
            "display" : "inline-block",
            "margin-left" : "6px"
          },
          "class" : "btn btn-xs btn-warning",
          "text" : "Warning",
          "click" : function( event ){
            event.preventDefault()
            event.stopPropagation();
 
            // debug, console touche F12
            console.log( "btn-warning", $( event.target ).parents( ".list-group-item" ).data( "name" ) );
          }
        });
 
      jObjButtons.append( jObjBtnInfo, jObjBtnWarning );
 
      $.each( data, function( i, item ){
          $( '<a/>', {
            "class" : "list-group-item",
            "href" : item._id.$oid,
            "text" : item.name,
            "data" : {
              'latitude' : item.latitude,
              'longitude': item.longitude,
              'name' : item.name
            }
          })
          .append( jObjButtons.clone( true, true ) )
          .appendTo( jObjListPoints );
      });
 
    });
 
    $( window ).load( function(){
 
    });
  </script>
</body>
</html>

Voila probléme corrigé :

Code:

1
2
3
4
5
        $("#list-interest-points").on('click', "a .delete_buttons", function(e){
            e.stopPropagation();
            e.preventDefault();
            alert('ok');
        })

26/08/2015, 11h41
SpaceFrog

arf oui :oops: on() mais par délégation