CODEWITHSUNDEEP
javascriptjqueryhtmlrefresh
nazarov
nazarov

Reputation: 167

Jquery html() method doesn't work

Here is my code:

$(function () {

    var region = $('#region');

    var city = $('#city');

    var pickedRegionId = region.find(':selected').val();

    var options;

    if (pickedRegionId === '') {
        console.log('region is empty, html() and disable');
        city.html('');
        city.attr('disabled', true);
    }

    region.change(function(){
        console.log('region is changed');
        pickedRegionId = $(this).val();
        if (pickedRegionId !== '') {
            city.html('');
            console.log('loading cities');
            getCities(pickedRegionId);
        }
    });

    function getCities (regionId) {
        city.attr('disabled', true);
        city.html('<option>Loading...</option>');

        $.get(
            '/ajax/get_cities',
            'region_id='+regionId,
            function (responce) {
                if (responce.result === 'success') {
                    $(responce.cities).each(function(){
                        options += '<option value="'+$(this).attr('id')+'">'+$(this).attr('city')+'</option>';
                    });
                    city.html(options);
                    city.attr('disabled', false);
                }
            }, 'json'
        );
    }
});

When page loads all is ok, I pick some region and select with cities fills with ajax data. But when I pick another region, data in cities select just extends with newer data.

So the problem that I have cities from both regions(new and old one). And not matter how many times I pick another region it's just adding new data to city select. In the code all looks fine and on region change I've put .html('') so it should be empty before inserting received values. But I can't figure out what the bug is.

Upvotes: 0

Views: 191

Answers (6)

SenorAmor
SenorAmor

Reputation: 3345

Two things:

1) city.attr('disabled', true); should be city.prop('disabled', 'disabled');

2) Try resetting options back to an empty string before repopulating it like so:

if (responce.result === 'success') {
    options = '';                        
    $(responce.cities).each(function(){
        options += '<option value="'+$(this).attr('id')+'">'+$(this).attr('city')+'</option>';
    });

    city.html(options);
    city.attr('disabled', false);
}

Upvotes: 0

j08691
j08691

Reputation: 208032

In function getCities, add var options=''; as the first line. You're constantly adding to it but never clearing it out, hence the problem.

Upvotes: 0

Alessandro Desantis
Alessandro Desantis

Reputation: 14343

The problem is that, when you receive the data, you add it to the options variable that is global. So, just add this before $(responce.cities).each(function(){:

options = '';

And everything should be fine.

BTW, it's response, not responce. :)

Upvotes: 0

kufi
kufi

Reputation: 2458

You have to empty the variable options first. You're just adding new cities to the options variable.

The simplest solution would be to move the options variable into the getCities function like this:

function getCities (regionId) {
    var options = "";

    city.attr('disabled', true);
    city.html('<option>Loading...</option>');

    $.get(
        '/ajax/get_cities',
        'region_id='+regionId,
        function (responce) {
            if (responce.result === 'success') {
                $(responce.cities).each(function(){
                    options += '<option value="'+$(this).attr('id')+'">'+$(this).attr('city')+'</option>';
                });
                city.html(options);
                city.attr('disabled', false);
            }
        }, 'json'
    );
}

Upvotes: 0

jeanreis
jeanreis

Reputation: 908

try reseting your "options" var before the loop:

...
options = '';
$(responce.cities).each(function(){
...

Upvotes: 0

Bot
Bot

Reputation: 11865

$(responce.cities).each(function(){
    options += '<option value="'+$(this).attr('id')+'">'+$(this).attr('city')+'</option>';
});

You are just appending to options and not clearing it at all. I would empty your options just below where you set cities to loading.

Upvotes: 2

Related Questions