Question

I’m struggling with something that i think would be simple. I know that i’ve had the same problem in plain old javascript without JQuery before. What i try to do is:

//When the postal code blurs, lookup the city, country, province
$('#codePostal').blur(function(){
    $.get('/fr/radio-telethon/ajax_code_postal.php', {code_postal: $('#codePostal').val()}, function(data){
        if(data.code_postal.toLowerCase() == $('#codePostal').val().toLowerCase()){
            $('#ville').val(data.ville);
            $('#pays').val(data.pays);
            $('#pays').trigger('change');
            $('#province').val(data.province);
            $('#province').trigger('change');
        }
    });
});

This basically calls a postalcode lookup script and returns an object with the data. The data itself is correct, i can alert it and it shows fine. The problem is that the change trigger on #pays (country in english) reloads the information inside #province (state) and it seems like the DOM is strugling and not loading the info.

If i alert between the the trigger on the country and the val on the province, i can set the province correctly. The method i use to add provinces to the province box is the following:

//Empty the provinces
$('#province').empty();

//Get the new data
$.get('/include/radio-telethon/formulaire-ajax.php', {pays: code}, function(data){

    //Loop the items
    for(i in data.options){
        $('#province').append('<option value="'+data.options[i].value+'">'+data.options[i].label+'</option>');
    }

    //Setup the label
    $('#labelProvince').html(data.label);

});

So my guess is that APPEND is messing up everything and making the whole DOM linger and thats why i can’t seem to do $(‘#province’).val(data.province);

Is it me? Or is there a magic trick i can’t seem to find…

Answer 1

With the help of Jasper, i found a more than applicable solution to my problem so i’ll thumbs up Jasper for his solution but i’ll mark mine as the answer.

What i used is that i passed the data.province to the extraParameters of the trigger and added a

//When country changes, show/hide the province/region
$('#pays').change(function(event, province){

    ........ other code .......

    //If there is a province in the parameter, set it
    if(province !== 'undefined'){
        $('#province').val(province);
        $('#province').trigger('change');
    }


    ........ other code .......

});

in the #pays.change handler using:

$('#pays').trigger('change', data.province);

This way, i don’t create a global variable like Jasper did and i can still detect if the trigger of the change event passed in a province or not.

Thanks Jasper