event sur html crée dynamiquement (ajax)

**abradax** · 13/02/2014, 14h39

Bonjour,

j'ai un souci en ce qui concerne les évènements d'éléments html crée dynamiquement.

du code vaut mieux que de belle parole.

Voici l'évènement click d'un de mes liens. (à savoir qu'au premier chargement de la page, des services sont déjà affichés à l'écran et que l'évènement click marche pour ces services, mais pas pour les suivants (système de pagination avec ajax).

Le code de la pagination ce trouve après.

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
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
$(function () {
 
 
    $('.hideJs').hide();
 
    /*-----------------------------------------------------------------------------------------------------------------*/
 
    //On test si la page à été réactualisée. Si c'est le cas, c'est qu'une session contenant une liste est présente et donc un apperçu existe déjà
    //Il suffit de l'afficher
    SiSessionListeExist();
 
    /*-----------------------------------------------------------------------------------------------------------------*/
 
    $('.LienAjoutListe').on("click",function (e) {
 
        e.preventDefault();
 
        var IdItem = $(this).data('iditem');
        var NomItem = $(this).data('nomitem');
        var TypeItem = $(this).data('typeitem');
        var TypeLst = $(this).data('typelst');
        var PrixServ = $(this).data('prixserv');
 
        //On compte le nombre de ligne du tableau d'aperçu
        var NbreTr = $('#TabAppercuLst tr').length;
 
 
        //S'il n'y a que la ligne de titre, on initialise le tableau
        if (NbreTr == 1)
            InitialiserApercu(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
        else {
            // On vérifie que le service n'est pas déjà présent dans l'aperçus.
            if ($('#ApercuListe').find('#IdItem' + IdItem + '').length) {
 
                //On met à jour la quantité
                UpdateQte(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
            }
            else {
                //On insère une nouvelle ligne
                InsertNewLine(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
            }
        }
    });
 
 
    /*-----------------------------------------------------------------------------------------------------------------*/
 
    //On écoute l'évènement change des input type=number (les quantités) du tableau d'aperçu, car les ligne du tableau on été ajoutée dynamiquement et ne sont pas dans le DOM de départ
    $('#TabAppercuLst').on("change", 'input[type="number"]', function (e) {
        e.preventDefault();
 
        var IdItem = $(this).data('iditem');
        var NomItem = $(this).data('nomitem');
        var TypeItem = $(this).data('typeitem');
        var TypeLst = $(this).data('typelst');
        var PrixServ = $(this).data('prixserv');
 
        var valeur = $(this).val();
 
        if (valeur == 0)
        {
            DeleteListLine(IdItem);
 
            if($('#TabAppercuLst tr').length == 1)
                $('#ApercuListe').fadeOut(1200);
 
        }
        else
            UpdateQte(IdItem, NomItem, PrixServ, TypeItem, TypeLst, true);
    });
 
 
    /********************************************************* LES FONCTIONS *******************************************************/
 
    /*********************************************************************/
    /*  Initialise l'apercu de liste pour la première fois               */
    /*********************************************************************/
 
    function InitialiserApercu(IdItem, NomItem, PrixServ, TypeItem, TypeLst) {
        $('#ApercuListe').fadeIn(1200);
        $('#btValidList').fadeIn(1200);
        $('#AucunItemLst').hide();
 
        InsertNewLine(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
    }
 
 
    /*********************************************************************/
    /*  Insère dynamiquement une nouvelle ligne dans le tableau d'apercu */
    /*********************************************************************/
 
    function InsertNewLine(IdItem, NomItem, PrixServ, TypeItem, TypeLst) {
        $('#TabAppercuLst').append('<tr id="LineItem-' + IdItem + '">' +
                                   '    <td id="IdItem' + IdItem + '" style="display:none">' + IdItem + '</td>' +
                                   '    <td>' + NomItem + '</td>' +
                                   '    <td> <input type="number" class="QteNumber" id="Qte-' + IdItem + '" value="1" min="0" style="width:70px;" data-iditem="' + IdItem + '" data-nomitem="' + NomItem + '" data-typeitem ="' + TypeItem + '" data-typelst="' + TypeLst + '" data-prixserv="' + PrixServ + '" /> </td>' +
                                   '    <td id="prix' + IdItem + '">' + PrixServ + '</td>' +
                                   '</tr>');
 
        //On créer la liste avec actif = false (seulement si la liste n'est pas encore crée) et on créer la ligne de liste en DB
 
        $.post('../../GestionListe/CreateOrUpdateLigneListe',
                {
                    pItem: IdItem,
                    Qte: 1,
                    prixItem: PrixServ,
                    prixLigne: PrixServ,
                    cote: 4,
                    typeItem: TypeItem,
                    nomItemV: NomItem,
                    typeLst: TypeLst
                });
    }
 
 
    /*********************************************************************/
    /*  Met à jour la quantité d'un service, si ce service est déjà dans */
    /*  l'aperçu de liste                                                */
    /*********************************************************************/
 
    function UpdateQte(IdItem, NomItem, PrixServ, TypeItem, TypeLst, decrease) {
 
        var ValueNumber = $('#Qte-' + IdItem + '').val();
 
 
        if (typeof (decrease) == 'undefined')
            decrease = false
        //on fait ++ et on modifie la valeur de l'input dans le cas ou l'utilisateur aurai cliqué sur le lien "Ajouter à la liste"
        if (!decrease) {
            ValueNumber++;
            $('#Qte-' + IdItem + '').val(ValueNumber);
        }
 
 
        //Calcul du nouveau prix de ligne
        var prix = ValueNumber * PrixServ;
 
        //Modification du total dans l'aperçu de liste
        $('#prix' + IdItem).html(prix);
 
        //mise à jour de la ligne de liste en DB
        $.post('../../GestionListe/CreateOrUpdateLigneListe',
              {
                  pItem: IdItem,
                  Qte: ValueNumber,
                  prixItem: PrixServ,
                  prixLigne: prix,
                  cote: 4,
                  typeItem: TypeItem,
                  nomItemV: NomItem,
                  typeLst: TypeLst
              });
    }
 
    /*********************************************************************/
    /*  Si la quantité d'une ligne de l'aperçu de liste est à 0, on      */
    /*  supprime la ligne de la liste en DB                              */
    /*********************************************************************/
    function DeleteListLine(idItem) {
 
 
        $('#TabAppercuLst').find('#LineItem-' + idItem).remove();
 
        $.post('../../GestionListe/DeleteLigneListe',
              {
                  pItem: idItem,
              });
    }
 
 
    /*********************************************************************/
    /*  Test si une session de liste existe en cas de réactualisation de */
    /*  la page. Si c'est el cas, c'est qu'un aperçu de liste est déjà   */
    /*  crée, il suffit juste de l'afficher                              */
    /*********************************************************************/
 
    function SiSessionListeExist() {
        if ($('#TabAppercuLst tr').length > 1) {
            $('#ApercuListe').fadeIn(1200);
            $('#btValidList').fadeIn(1200);
            $('#AucunItemLst').hide();
        }
    }
 
});

et voilà le code de pagination (ici il ne gère que le système de filtre par thème de mes services à afficher).

Ce code est mis dans un autre fichier .js.

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
68
69
70
71
72
/// <reference path="../../jquery-1.5.1.min.js" />
 
$(function () {
 
    $('#ThemePagination').change(function (e) {
        alert("je suis dedans");
        var commune = $(this).data('commune');
        var typeLst = $(this).data('typelst');
 
        var recup = $(this).val();
        //var text = $('option[value="' + recup + '"]').text();
 
 
        //On récupère les données du thème, on vide le div contenant les services et on le re-remplit avec les nouveaux services
        $.post('../../GestionPagination/GererFiltrePaginationCreateListe',
              {
                  IdThemeSelection: recup,
                  typeLst: typeLst
              },
              function (data) {
                  viderServiceAff();
 
                  if (data.length > 0)
                      remplirConteneurService(data, commune, typeLst);
                  else
                      alert("Aucune donnée n\'a été trouvée");
              }
        );
    });
 
 
    /**************************************************************************LES FONCTIONS********************************************************/
 
    /*****************************************************************/
    /* Vide le div qui contetien tous les services                   */
    /*****************************************************************/
 
    function viderServiceAff() {
        $('#ConteneurPagination').empty();
    }
 
    /*****************************************************************/
    /* Rempli le div qui contient les services avec les services     */
    /* du thème choisi                                               */
    /*****************************************************************/
 
    function remplirConteneurService(data, nomCommune, typeLst) {
 
        var cpt = 0;
 
        while (cpt < data.length) {
            $('#ConteneurPagination').append(
                '<div style="width:230px; border:1px solid black; display:inline-block; vertical-align:top; margin-bottom:5px; margin-right : 5px;"> ' +
                '   <div> ' +
                '           <div> ' +
                '               <img src="' + data[cpt].UrlImg + '" alt="Image item" title="Image item" style="width:50px; height:50px;"/> ' +
                '           </div> ' +
                '              <p style="margin:0px;">' + data[cpt].NomItem + '</p>' +
                '              <p style="margin:0px;">' + data[cpt].PrixCourantItem + '&euro; </p>' +
                '              <p style="margin:0px;"><a href="#">Lien détail</a></p>' +
                '              <p style="margin:0px;">importance</p>' +
                '              <p style="margin:0px;"><a href="#" class="VoirPrest" data-iditem="' + data[cpt].IdItemVendable + '" data-communeuser="' + nomCommune + '">Voir prestataire</a></p>' +
                '   </div>' +
                '        <a href="#" class="LienAjoutListe" data-iditem="' + data[cpt].IdItemVendable + '" data-nomitem="' + data[cpt].NomItem + '" data-typeitem ="1" data-typelst ="' + typeLst + '" data-prixserv="' + data[cpt].PrixCourantItem + '">Ajouter le service</a>' +
                '</div>'
            );
 
            cpt++;
        }
    }
 
});

Après ce code, une fois que la fonction remplirConteneurService() à été effectuée, l'affichage est correcte, mais mon évènement lié au lien "Ajouter le service" ne fonctionne plus car c'est du code dynamiquement ajouté.

J'aimerai donc savoir comment faire en sorte de lié l'évènement click à ce lien pour qu'il exécute mon évènement click programmé dans le premier code.

au cas ou ça pourrait aider, voici le code html affiché lors du tout premier chargement de la page. (code asp.net mvc3 (View))

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
//Filtre de sélection des Items à afficher.----------------------------------------------------------
   <form name="FormFiltreCreaLst" id="FiltreCreaLst" action="../../GestionPagination/GererFiltrePaginationCreateListe" method="post">
       <select id="ThemePagination" name="IdThemeSelection" data-commune="@NomCommune" data-typelst="@TypeList">
       @{
           foreach (ThemeService theme in LstTheme)
           {
               <option value="@theme.IdTheme">@theme.Theme</option>
           }
       }
           <option value="Pack">Les packs</option>
       </select>
   </form>
 
   //Système de pagination ------------------------------------------------------------------------------
 
   <div id="ConteneurPagination" style="margin-top:5px; border:5px solid black; padding:5px; padding-left:17px;">
       @{
           foreach(Service s in LstTheme[0].LstService)
           {
               <div style="width:230px; border:1px solid black; display:inline-block; vertical-align:top; margin-bottom:5px; margin-right : 5px;">
                   <div>
                       <div>
                           <img src="@s.UrlImg" alt="Image item" title="Image item" style="width:50px; height:50px;"/>
                       </div>
                       <p style="margin:0px;">@s.NomItem</p>
                       <p style="margin:0px;">@Math.Round(s.PrixCourantItem) &euro;</p>
                       <p style="margin:0px;"><a href="#">Lien détail</a></p>
                       <p style="margin:0px;">importance</p>
                       <p style="margin:0px;"><a href="#" class="VoirPrest" data-iditem="@s.IdItemVendable" data-communeuser="@NomCommune">Voir prestataire</a></p>
                   </div>
 
                   <a href="#" class="LienAjoutListe" data-iditem="@s.IdItemVendable" data-nomitem="@s.NomItem" data-typeitem ="1" data-typelst ="@TypeList" data-prixserv="@Math.Round(s.PrixCourantItem)">Ajouter le service</a>
               </div>
           }
 
           <div id="NavigationPagination" style="text-align:center;">
               @{
                   for (int cpt = 0; cpt < NbrePage; cpt++)
                   {
                       int num = cpt + 1;
                       <a href="#">@num</a>
                   }
               }
 
           </div>
           }
   </div>

Merci d'avance pour vos réponses.

ps : Si je n'ai pas été clair dans ma demande, n'hésitez pas à me le dire, j'essaierai de corriger.

**whiteslash** · 13/02/2014, 14h49

Salut,

Je pense que ta solution se trouve dans le .delegate() ou le .live() de jQuery qui te permet d'attacher un évènement à tout élément présent et futur qui correspond au critère du selecteur

**Bovino** · 13/02/2014, 15h03

delegate() et live() sont des méthodes dépréciées, il faut passer par .on().

**SpaceFrog** · 13/02/2014, 15h04

live() et delegate() c'était avant ...

plus récemment on()

**abradax** · 13/02/2014, 15h07

Envoyé par whiteslash

Salut,

Je pense que ta solution se trouve dans le .delegate() ou le .live() de jQuery qui te permet d'attacher un évènement à tout élément présent et futur qui correspond au critère du selecteur

Salut whiteslash, merci de ta réponse,

à vrai dire, j'ai déjà cherché de ce côté là aussi :s mais ça ne convient pas à mon problème dans le sens ou, si j'utilise delegate, il faut que je réécrive toutes ma fonction du premier code.

en gros je devrais avoir ça :

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
$('#ConteneurPagination').delegate('.LienAjoutListe', 'click', function(){
 
$('.LienAjoutListe').on("click",function (e) {
 
        e.preventDefault();
 
        var IdItem = $(this).data('iditem');
        var NomItem = $(this).data('nomitem');
        var TypeItem = $(this).data('typeitem');
        var TypeLst = $(this).data('typelst');
        var PrixServ = $(this).data('prixserv');
 
        //On compte le nombre de ligne du tableau d'aperçu
        var NbreTr = $('#TabAppercuLst tr').length;
 
 
        //S'il n'y a que la ligne de titre, on initialise le tableau
        if (NbreTr == 1)
            InitialiserApercu(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
        else {
            // On vérifie que le service n'est pas déjà présent dans l'aperçus.
            if ($('#ApercuListe').find('#IdItem' + IdItem + '').length) {
 
                //On met à jour la quantité
                UpdateQte(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
            }
            else {
                //On insère une nouvelle ligne
                InsertNewLine(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
            }
        }
    });
 
});

et ce code ne marche pas non plus de toute ^^.

puis il est répétitif, ce que j'essaie d'éviter.

une autre idée ?

**whiteslash** · 13/02/2014, 15h07

Il inclut la 1.5.1, ça n'était pas déprécié déjà, si ?

**abradax** · 13/02/2014, 15h08

Envoyé par SpaceFrog

live() et delegate() c'était avant ...

plus récemment on()

j'ai tenté avec on aussi mais le problème est le même qu'avec delegate

.

**whiteslash** · 13/02/2014, 15h14

Après, ça vient peut-être de la formation de ton HTML... J'avoue avoir un peu de mal à visualiser le rendu final avec les bouts de code qui s'ajoutent dans tous les sens

(et sur ton dernier exemple de code tu as mis ET .delegate() ET .on(), et dans ma tête ça ne s'utilise pas comme ça ^^)

**abradax** · 13/02/2014, 15h21

Envoyé par whiteslash

Après, ça vient peut-être de la formation de ton HTML... J'avoue avoir un peu de mal à visualiser le rendu final avec les bouts de code qui s'ajoutent dans tous les sens

(et sur ton dernier exemple de code tu as mis ET .delegate() ET .on(), et dans ma tête ça ne s'utilise pas comme ça ^^)

Oui j'ai remarqué aussi pour le .delegate() ET .on() lol, effectivement ça ne s'utilise pas comme ça ^^ j'ai fais un bête copier coller sans modif. mais j'ai essayé en modifiant ^^ et ça ne fonctionne toujours pas :o, par contre je viens de faire ceci et ça marche ... je sélectionne d'abord un élément non dynamique (mon conteneur de service) puis je crée l'évènement.

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
$('#ConteneurPagination').on("click",".LienAjoutListe",function (e) {

        e.preventDefault();

        var IdItem = $(this).data('iditem');
        var NomItem = $(this).data('nomitem');
        var TypeItem = $(this).data('typeitem');
        var TypeLst = $(this).data('typelst');
        var PrixServ = $(this).data('prixserv');

        //On compte le nombre de ligne du tableau d'aperçu
        var NbreTr = $('#TabAppercuLst tr').length;


        //S'il n'y a que la ligne de titre, on initialise le tableau
        if (NbreTr == 1)
            InitialiserApercu(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
        else {
            // On vérifie que le service n'est pas déjà présent dans l'aperçus.
            if ($('#ApercuListe').find('#IdItem' + IdItem + '').length) {

                //On met à jour la quantité
                UpdateQte(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
            }
            else {
                //On insère une nouvelle ligne
                InsertNewLine(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
            }
        }
    });

Merci de vos aides !!!

**Bovino** · 13/02/2014, 15h23

Code :

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

1
2
3
4
5
$('#ConteneurPagination').delegate('.LienAjoutListe', 'click', function(){
    $('.LienAjoutListe').on("click",function (e) {
        // ...
    }
}

Ca n'a aucun sens ça...

En gros, tu dis que lorsqu'on clique sur un des éléments, on ajoute un gestionnaire d'événement pour cet élément concernant le même événement.

Code :

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

1
2
3
$('#ConteneurPagination').on('click', '.LienAjoutListe', function(){
    // le code à exécuter ici
}

est largement suffisant !

**abradax** · 13/02/2014, 15h32

oui c'est pour ça que je me suis corrigé dans mon précédent message

.

voici mes codes fonctionnel pour ceux que ça intéresserait (il sont dans l'ordre, comme dans mon premier message)

la seul modification faite par rapport à mon premier message est la ligne mise en rouge

.

En réalité, je sélectionne d'abord le conteneur qui contiendra mes services ==> $('#ConteneurPagination'). et je lui dit d'écouter tous les évènements click du lien qui a pour class : .LienAjoutListe et ensuite je fais ma popote dans la fonction

.

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
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
$('#ConteneurPagination').on("click",".LienAjoutListe",function (e) {

        e.preventDefault();

        var IdItem = $(this).data('iditem');
        var NomItem = $(this).data('nomitem');
        var TypeItem = $(this).data('typeitem');
        var TypeLst = $(this).data('typelst');
        var PrixServ = $(this).data('prixserv');

        //On compte le nombre de ligne du tableau d'aperçu
        var NbreTr = $('#TabAppercuLst tr').length;


        //S'il n'y a que la ligne de titre, on initialise le tableau
        if (NbreTr == 1)
            InitialiserApercu(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
        else {
            // On vérifie que le service n'est pas déjà présent dans l'aperçus.
            if ($('#ApercuListe').find('#IdItem' + IdItem + '').length) {

                //On met à jour la quantité
                UpdateQte(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
            }
            else {
                //On insère une nouvelle ligne
                InsertNewLine(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
            }
        }
    });


    /*-----------------------------------------------------------------------------------------------------------------*/

    //On écoute l'évènement change des input type=number (les quantités) du tableau d'aperçu, car les ligne du tableau on été ajoutée dynamiquement et ne sont pas dans le DOM de départ
    $('#TabAppercuLst').on("change", 'input[type="number"]', function (e) {
        e.preventDefault();

        var IdItem = $(this).data('iditem');
        var NomItem = $(this).data('nomitem');
        var TypeItem = $(this).data('typeitem');
        var TypeLst = $(this).data('typelst');
        var PrixServ = $(this).data('prixserv');

        var valeur = $(this).val();

        if (valeur == 0)
        {
            DeleteListLine(IdItem);

            if($('#TabAppercuLst tr').length == 1)
                $('#ApercuListe').fadeOut(1200);
                
        }
        else
            UpdateQte(IdItem, NomItem, PrixServ, TypeItem, TypeLst, true);
    });


    /********************************************************* LES FONCTIONS *******************************************************/

    /*********************************************************************/
    /*  Initialise l'apercu de liste pour la première fois               */
    /*********************************************************************/

    function InitialiserApercu(IdItem, NomItem, PrixServ, TypeItem, TypeLst) {
        $('#ApercuListe').fadeIn(1200);
        $('#btValidList').fadeIn(1200);
        $('#AucunItemLst').hide();

        InsertNewLine(IdItem, NomItem, PrixServ, TypeItem, TypeLst);
    }


    /*********************************************************************/
    /*  Insère dynamiquement une nouvelle ligne dans le tableau d'apercu */
    /*********************************************************************/

    function InsertNewLine(IdItem, NomItem, PrixServ, TypeItem, TypeLst) {
        $('#TabAppercuLst').append('<tr id="LineItem-' + IdItem + '">' +
                                   '    <td id="IdItem' + IdItem + '" style="display:none">' + IdItem + '</td>' +
                                   '    <td>' + NomItem + '</td>' +
                                   '    <td> <input type="number" class="QteNumber" id="Qte-' + IdItem + '" value="1" min="0" style="width:70px;" data-iditem="' + IdItem + '" data-nomitem="' + NomItem + '" data-typeitem ="' + TypeItem + '" data-typelst="' + TypeLst + '" data-prixserv="' + PrixServ + '" /> </td>' +
                                   '    <td id="prix' + IdItem + '">' + PrixServ + '</td>' +
                                   '</tr>');

        //On créer la liste avec actif = false (seulement si la liste n'est pas encore crée) et on créer la ligne de liste en DB

        $.post('../../GestionListe/CreateOrUpdateLigneListe',
                {
                    pItem: IdItem,
                    Qte: 1,
                    prixItem: PrixServ,
                    prixLigne: PrixServ,
                    cote: 4,
                    typeItem: TypeItem,
                    nomItemV: NomItem,
                    typeLst: TypeLst
                });
    }


    /*********************************************************************/
    /*  Met à jour la quantité d'un service, si ce service est déjà dans */
    /*  l'aperçu de liste                                                */
    /*********************************************************************/

    function UpdateQte(IdItem, NomItem, PrixServ, TypeItem, TypeLst, decrease) {

        var ValueNumber = $('#Qte-' + IdItem + '').val();


        if (typeof (decrease) == 'undefined')
            decrease = false
        //on fait ++ et on modifie la valeur de l'input dans le cas ou l'utilisateur aurai cliqué sur le lien "Ajouter à la liste"
        if (!decrease) {
            ValueNumber++;
            $('#Qte-' + IdItem + '').val(ValueNumber);
        }


        //Calcul du nouveau prix de ligne
        var prix = ValueNumber * PrixServ;

        //Modification du total dans l'aperçu de liste
        $('#prix' + IdItem).html(prix);

        //mise à jour de la ligne de liste en DB
        $.post('../../GestionListe/CreateOrUpdateLigneListe',
              {
                  pItem: IdItem,
                  Qte: ValueNumber,
                  prixItem: PrixServ,
                  prixLigne: prix,
                  cote: 4,
                  typeItem: TypeItem,
                  nomItemV: NomItem,
                  typeLst: TypeLst
              });
    }

    /*********************************************************************/
    /*  Si la quantité d'une ligne de l'aperçu de liste est à 0, on      */
    /*  supprime la ligne de la liste en DB                              */
    /*********************************************************************/
    function DeleteListLine(idItem) {

        
        $('#TabAppercuLst').find('#LineItem-' + idItem).remove();

        $.post('../../GestionListe/DeleteLigneListe',
              {
                  pItem: idItem,
              });
    }


    /*********************************************************************/
    /*  Test si une session de liste existe en cas de réactualisation de */
    /*  la page. Si c'est el cas, c'est qu'un aperçu de liste est déjà   */
    /*  crée, il suffit juste de l'afficher                              */
    /*********************************************************************/

    function SiSessionListeExist() {
        if ($('#TabAppercuLst tr').length > 1) {
            $('#ApercuListe').fadeIn(1200);
            $('#btValidList').fadeIn(1200);
            $('#AucunItemLst').hide();
        }
    }

le code gérant le filtre, l'appel ajax et la création dynamique html.

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
68
69
70
71
72
73
/// <reference path="../../jquery-1.5.1.min.js" />
 
$(function () {
 
    $('#ThemePagination').change(function (e) {
        alert("je suis dedans");
        var commune = $(this).data('commune');
        var typeLst = $(this).data('typelst');
 
        var recup = $(this).val();
        //var text = $('option[value="' + recup + '"]').text();
 
 
        //On récupère les données du thème, on vide le div contenant les services et on le re-remplit avec les nouveaux services
        $.post('../../GestionPagination/GererFiltrePaginationCreateListe',
              {
                  IdThemeSelection: recup,
                  typeLst: typeLst
              },
              function (data) {
                  viderServiceAff();
 
                  if (data.length > 0)
                      remplirConteneurService(data, commune, typeLst);
                  else
                      alert("Aucune donnée n\'a été trouvée");
              }
        );
    });
 
 
    /**************************************************************************LES FONCTIONS********************************************************/
 
    /*****************************************************************/
    /* Vide le div qui contetien tous les services                   */
    /*****************************************************************/
 
    function viderServiceAff() {
        $('#ConteneurPagination').empty();
    }
 
    /*****************************************************************/
    /* Rempli le div qui contient les services avec les services     */
    /* du thème choisi                                               */
    /*****************************************************************/
 
    function remplirConteneurService(data, nomCommune, typeLst) {
 
        var cpt = 0;
 
        while (cpt < data.length) {
            $('#ConteneurPagination').append(
                '<div style="width:230px; border:1px solid black; display:inline-block; vertical-align:top; margin-bottom:5px; margin-right : 5px;"> ' +
                '   <div> ' +
                '           <div> ' +
                '               <img src="' + data[cpt].UrlImg + '" alt="Image item" title="Image item" style="width:50px; height:50px;"/> ' +
                '           </div> ' +
                '              <p style="margin:0px;">' + data[cpt].NomItem + '</p>' +
                '              <p style="margin:0px;">' + data[cpt].PrixCourantItem + '&euro; </p>' +
                '              <p style="margin:0px;"><a href="#">Lien détail</a></p>' +
                '              <p style="margin:0px;">importance</p>' +
                '              <p style="margin:0px;"><a href="#" class="VoirPrest" data-iditem="' + data[cpt].IdItemVendable + '" data-communeuser="' + nomCommune + '">Voir prestataire</a></p>' +
                '   </div>' +
                '        <a href="#" class="LienAjoutListe" data-iditem="' + data[cpt].IdItemVendable + '" data-nomitem="' + data[cpt].NomItem + '" data-typeitem ="1" data-typelst ="' + typeLst + '" data-prixserv="' + data[cpt].PrixCourantItem + '">Ajouter le service</a>' +
                '</div>'
            );
 
            cpt++;
        }
 
    }
 
});

et enfin le code du tout premier chargement de la page. Je rappel que c'est de l'asp.net mvc3.

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
//Filtre de sélection des Items à afficher.----------------------------------------------------------
    <form name="FormFiltreCreaLst" id="FiltreCreaLst" action="../../GestionPagination/GererFiltrePaginationCreateListe" method="post">
        <select id="ThemePagination" name="IdThemeSelection" data-commune="@NomCommune" data-typelst="@TypeList">
        @{
            foreach (ThemeService theme in LstTheme)
            {
                <option value="@theme.IdTheme">@theme.Theme</option>
            }
        }
            <option value="Pack">Les packs</option>
        </select>
    </form>
 
    //Système de pagination ------------------------------------------------------------------------------
 
    <div id="ConteneurPagination" style="margin-top:5px; border:5px solid black; padding:5px; padding-left:17px;">
        @{
            foreach(Service s in LstTheme[0].LstService)
            {
                <div style="width:230px; border:1px solid black; display:inline-block; vertical-align:top; margin-bottom:5px; margin-right : 5px;">
                    <div>
                        <div>
                            <img src="@s.UrlImg" alt="Image item" title="Image item" style="width:50px; height:50px;"/>
                        </div>
                        <p style="margin:0px;">@s.NomItem</p>
                        <p style="margin:0px;">@Math.Round(s.PrixCourantItem) &euro;</p>
                        <p style="margin:0px;"><a href="#">Lien détail</a></p>
                        <p style="margin:0px;">importance</p>
                        <p style="margin:0px;"><a href="#" class="VoirPrest" data-iditem="@s.IdItemVendable" data-communeuser="@NomCommune">Voir prestataire</a></p>
                    </div>
 
                    <a href="#" class="LienAjoutListe" data-iditem="@s.IdItemVendable" data-nomitem="@s.NomItem" data-typeitem ="1" data-typelst ="@TypeList" data-prixserv="@Math.Round(s.PrixCourantItem)">Ajouter le service</a>
                </div>
            }
 
            <div id="NavigationPagination" style="text-align:center;">
                @{
                    for (int cpt = 0; cpt < NbrePage; cpt++)
                    {
                        int num = cpt + 1;
                        <a href="#">@num</a>
                    }
                }
 
            </div>
            }
    </div>

event sur html crée dynamiquement (ajax)

jQuery

Discussions similaires

Partager

Partager