wenzhixin/multiple-select

Loading data from Ajax takes time

avtarsm opened this issue · 1 comments

avtarsm commented

Hi,
I am using the multiple select for country, state and city dropdown. The city dropdown takes around 15 to 20 seconds to load the data. The average city data items would be around 300.

$country.multipleSelect({
    filter: true,
    selectAll: false,
    onClick: function (view) {
        jQuery.ajax({
            url: "state_url",
            data: {'q' : $country.multipleSelect('getSelects') },
            type: "GET",
            dataType: "JSON",
            success: function (data) {
                $state.empty();
                $.each(data, function (id, name) {
                    var $stateOption = $('<option />', {
                        value: name.id,
                        text: name.name
                    })
                    $state.append($stateOption).multipleSelect('refresh');
                });
            }
        });
    },
});
$state.multipleSelect({
    filter: true,
    selectAll: false,
    onClick: function (view) {
        jQuery.ajax({
            url: "city_url",
            data: {'q' : $state.multipleSelect('getSelects') },
            type: "GET",
            dataType: "JSON",
            success: function (data) {
                $city.empty();
                $.each(data, function (id, name) {
                    var $cityOption = $('<option />', {
                        value: name.id,
                        text: name.name
                    })
                    $city.append($cityOption).multipleSelect('refresh');
                });
            }
        });
    },
});

$city.multipleSelect({
    filter: true,
});
avtarsm commented

It was my mistake, I was refreshing the multiselect in the loop, it should be:

$country.multipleSelect({
filter: true,
selectAll: false,
onClick: function (view) {
jQuery.ajax({
url: "state_url",
data: {'q' : $country.multipleSelect('getSelects') },
type: "GET",
dataType: "JSON",
success: function (data) {
$state.empty();
$.each(data, function (id, name) {
var $stateOption = $('', {
value: name.id,
text: name.name
})
$state.append($stateOption);
});
$state.multipleSelect('refresh');
}
});
},
});
$state.multipleSelect({
filter: true,
selectAll: false,
onClick: function (view) {
jQuery.ajax({
url: "city_url",
data: {'q' : $state.multipleSelect('getSelects') },
type: "GET",
dataType: "JSON",
success: function (data) {
$city.empty();
$.each(data, function (id, name) {
var $cityOption = $('', {
value: name.id,
text: name.name
})
$city.append($cityOption);
});
$city.multipleSelect('refresh');
}
});
},
});