Evènement change

Version imprimable

Evènement change

Bonjour,

Je dois débugger une fonction et voici mon problème:
j'ai un select avec des Pays, lorsque celui ci est changé, il doit rafraichir un select d’hôtels.

Par défaut, la liste d'hotels est créer et un événement on change sur celle ci est "crée aussi". Ca fonctionne, si je modifie la liste d'hotels, le comportement dans le change se fait.

Maintenant si je change un pays, le select d'hotels se mets à jours ( comportement 2) avec une autre fonction et le on change est " re crée " mais celui ci ne fonctionne plus, aucun code à l'intérieur n'est exécuté. J'ai tenté de ne mettre qu'une fois le " on change " dans le comportement par défaut, et de unbind() la fonction avant de la recréer, mais ça ne fonctionne pas.

Pour moi, ça ne me parait pas logique de créer l'evenement onChange à chaque passage dans la fonction. bref, le code est un peu bizarre.

Je suis assez mauvais en jquery, mais je dois essayer de la débugger quand même :/

Auriez vous des suggestions ?

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
function getHotels(id {
 
    if ( comportement 2 ) { 
        // $("#filtre_hotel"+id).remove()
        // $("#filtre_hotel"+id).unbind('change' );
		[...]
        jQuery.ajax({
            type: 'POST',
            url: "{{ path('VIHotelBundle_hotel_hotels') }}",
            data: {
                pays: pays,
            },
            success: function(data, textStatus, jqXHR) {
                var json = jQuery.parseJSON(data);
                var content = "<select class='filtre_hotel span12' id='filtre_hotel"+id+"' name='filtre_hotel'><option value='' selected='selected'>Hôtel</option>";
                for(i=0;i<json.data.length;i++)
                    content = content + "<option id='"+json.data[i].presd+"' value='"+json.data[i].id+"'>"+json.data[i].content+"</option>";
                content = content + "</select>";
                $('#f'+id+' #hotel').html(content); // on place le select 
            }
        }); 
    }
 
    else if ( comportement par defaut )  { 
        var content = "<select class='filtre_hotel span12' id='filtre_hotel"+id+"' name='filtre_hotel'><option value='' selected='selected'>Hôtel</option>";
        {% for hotel in hotels %}
            {% if hotel.getPrestataire() != NULL %}
                {% set presd = hotel.getPrestataire().getId() %}
            {% else %}
                {% set presd = "-1" %}
            {% endif %}
            content = content + "<option id='{{presd}}' value='{{hotel.id}}'>{{hotel.nom}}</option>";
        {% endfor %}
        content = content + "</select>";
        $('#f'+id+' #hotel').html(content); // on place le select 
    }
 
 
    $("#filtre_hotel"+id).change(function () {
        alert('CHANGE');
 
    });
 
}

04/07/2013, 16h34
Eric Berger

getHotels doit être déclanché sur l'événement change de $("#filtre_hotel"+id)
Autrement dit, on met à jour la liste d'hotels lorque le filtre est modifié.
On est bien d'accord?

Donc ça on le définit une fois, et pas dans la fonction getHotels.

Sinon tu peux donner un peu de contexte? Il y a plusieurs champs filtres? Tu as une page sur laquelle on peut voir ça?
04/07/2013, 16h41
skizoplouc

Bon, je viens de me rendre compte de mon erreur,
Le sélecteur qui ajouté l'évènement Change() ne faisait rien dans le second cas car la requéte ajax n'était pas terminée.
J'ai testé un

Code:

async: false

Mais ça m'a provoqué une boucle je ne sais pas trop où, qui lançait un nombre croissant de requêtes et qui faisait planter le navigateur.. J'ai donc factorisé le bloc commun aux deux cas dans une fonction.
04/07/2013, 16h49
skizoplouc
Citation:

Envoyé par Eric Berger

getHotels doit être déclanché sur l'événement change de $("#filtre_hotel"+id)
Autrement dit, on met à jour la liste d'hotels lorque le filtre est modifié.
On est bien d'accord?

Donc ça on le définit une fois, et pas dans la fonction getHotels.

Sinon tu peux donner un peu de contexte? Il y a plusieurs champs filtres? Tu as une page sur laquelle on peut voir ça?

Non, c'est un backoffice..
Non plus pour le fonctionnement.

Un selecteur Pays

Un selecteur Hotels

Lorsque Pays est modifié, getHotels est appelés pour montrer uniquement les hotels du pays en question.
Au chargement de la page, on mets tous les hotels. Si un pays est ajouté, on fait de l'ajax pour aller chercher les hotels et recréer la balise select.

Donc, on fait un truc du genre:
Code:

1 2 3 var content = "<select id='filtre_hotel"+id+"' name='filtre_hotel'><option value='' >Hôtel</option>"; content = content + "</select>"; $('#f'+id+' #hotel').html(content);
Donc entre deux on écrase l'ancienne balise select par la nouvelle ( qui a le méme nom )

Et donc dans le code, à cet endroit là, ( et c'est d'ailleurs fait dans les milliers de lignes du code que je reprends ), on redéclarer le .change sur la balise select :
Code:

1 2 $("#filtre_hotel"+id).change(function () { alert('CHANGE');});
Je n'aime pas trop le fait de re-déclarer le change tous le temps, mais sans faire ça, ça ne fonctionne plus.