CODEWITHSUNDEEP
javascriptjquery
Seth
Seth

Reputation: 984

jquery Select list not reflecting new items in UI

I'm attempting to update a select list with an ajax call after clicking a checkbox. The call returns the expected list, items (the list of 'options' created below) looks as expected. Alert even reveals the value in distlist to be updated, but the UI just does not reflect this at all. The original list remains as the ony visible items. functionally it behaves as if the list has been updated. 

$('#includeHistoricCheckbox').unbind('change').change(function () {
    var historic = false;
    if ($("#includeHistoricCheckbox").is(':checked'))
        historic = true;

    $.post('Search/UpdateDistrictList', { includeHistoric: historic }, function (data) {
        var $distList = $('#districtDropdown');

        var items = "<option value=\" |ALL| \" selected=\"selected\"> (all) </option>";
                $.each(data, function(i, item) {
                    items += "<option value=\"" + item + "\" selected=\"selected\">" + item + "</option>";
                });

        $distList.html(items);

                alert($distList.val());

    });
});

What am I missing? How do I forcibly refresh this? Oh, by the way this is j-query 1.7.1

EDIT

I missed closing bracket in my post.

Upvotes: 0

Views: 74

Answers (3)

Jai
Jai

Reputation: 74738

Try this:

$('#includeHistoricCheckbox').off('change').on('change', function () {
    var historic = this.checked; // true if checked, false if not
    $.post('Search/UpdateDistrictList', { includeHistoric: historic }, function (data) {
        var $distList = $('#districtDropdown');
        var items = "<option value=\" |ALL| \" selected=\"selected\"> (all) </option>";
        $.each(data, function(i, item) {
             items += "<option value=\"" + item + "\">" + item + "</option>";
        });
        $distList.html(items);
        alert($distList.val());   
    });
}); // <---i think you missed this (closing of change event.)

As i found that you have missed the closing (this might be during posting) but yet you can make use of this.checked which returns true||false on check||uncheck and you can update to on, off instead of unbind.

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

Remove selected=\"selected\" from your list-items and use on() and off() like 

$('#includeHistoricCheckbox').off('change').on('change',function () {
    var historic = this.checked;// use this.checked it will return true/false
    $.post('Search/UpdateDistrictList',{ includeHistoric: historic },function (data){
        var $distList = $('#districtDropdown');
        var items = "<option value=\" |ALL| > (all) </option>";
        $.each(data, function(i, item) {
            items += "<option value=\"" + item + "\" selected=\"selected\">" + item + "</option>";
        });    
        $distList.html(items);    
        alert($distList.val());
    });
});

Upvotes: 1

DhruvJoshi
DhruvJoshi

Reputation: 17146

Try changing you code to use append

$('#includeHistoricCheckbox').unbind('change').change(function () {
    var historic = false;
    if ($("#includeHistoricCheckbox").is(':checked'))
        historic = true;

$.post('Search/UpdateDistrictList', { includeHistoric: historic }, function (data) {
    var $distList = $('#districtDropdown');

    var items = "<option value=\" |ALL| \" selected=\"selected\"> (all) </option>";
            $.each(data, function(i, item) {
                items += "<option value=\"" + item + "\" selected=\"selected\">" + item + "</option>";
            });

    $distList.append(items);//append used instead of .html() function

            alert($distList.val());

});

Upvotes: 0

Related Questions