Bootstrap Dual Listbox problems while populate via JavaScript

Question

I have some problem while using Bootstrap Dual Listbox (http://www.virtuosoft.eu/code/bootstrap-duallistbox/). It is not working as expected when the ListBox is populated via java Script.What I mean with not working is the list is not populated properly and the transferring selected items from both list box is not as what as it should work. Somehow when the list is populated by hard coded, it is working well.

This is the part where everything working fine :

<div class="row-fluid">
    <div class="container">
        <select multiple="multiple" size="10" name="SelectItem" class="eItems" id="SelectItem">
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3" selected="selected">Option 3</option>
            <option value="option4">Option 4</option>
            <option value="option5">Option 5</option>
            <option value="option6" selected="selected">Option 6</option>
            <option value="option7">Option 7</option>
            <option value="option8">Option 8</option>
        </select>

        <script type="text/javascript">
            var demo2 = $('.eItems').bootstrapDualListbox({
                nonselectedlistlabel: 'Non-selected',
                selectedlistlabel: 'Selected',
                preserveselectiononmove: 'moved',
                moveonselect: false,
                bootstrap2compatible : true
            });
        </script>
    </div>
</div>

but when populate using JavaScript, it is populated but the functions is not functioning well :

The data collector from Controller :

<script type="text/javascript">
    function ProductChange() {
        $.getJSON("/WEBAPP/MasterData/GetItems", null, function (data) {        
            var items;
            $.each(data, function (i, item) {                
                items += "<option value=" + item.Value + ">" + item.Key + "</option>";          
            });

            $("#SelectItem").html(items);
        })
    }
</script>

The list box populating here :

<div class="row-fluid">
    <div class="row-fluid">
        <div class="container">
            <select id="SelectProduct"></select>
        </div>
    </div>

    <div class="row-fluid">
        <div class="container">
            <select multiple="multiple" size="10" name="SelectItem" class="eItems" id="SelectItem"></select>

            <script type="text/javascript">
                var demo2 = $('.eItems').bootstrapDualListbox({
                    nonselectedlistlabel: 'Non-selected',
                    selectedlistlabel: 'Selected',
                    preserveselectiononmove: 'moved',
                    moveonselect: false,
                    bootstrap2compatible : true
                });

                $(function () {
                    $("#SelectProduct").change(function () {
                        ProductChange();
                    });
                });
            </script>
        </div>
    </div>
</div>

The controller :

[HttpGet]
public JsonResult GetItems(int productID = 0)
{
    try
    {
        var items =
               from item in dbItem.items.ToList()
               join p in dbItem.Productitems.ToList()
               on item.itemID equals p.itemID
               where item.Language.LanguageCode.Trim() == repLanguage
               where p.ProductID == productID
               orderby item.DisplaySequence
               select new { Key = item.itemDescription, Value = item.itemID };

        if (items.Count() == 0)
        {
            items = from item in dbItem.items.ToList()
                    where item.Language.LanguageCode.Trim() == repLanguage
                    orderby item.DisplaySequence
                    select new { Key = item.itemDescription, Value = item.itemID };
        }

        return Json(items, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
        return Json(new { Result = "ERROR", Message = ex.Message });
    }
}

Is it because the java script is reloaded every time the trigger action takes place? Apologize if the explanation is not so clear and just let me know if u need more information.

Thanks a lot

Solution 1

I cannot populate the list box properly by calling and a populate function directly as normal drop down. I changed the populate code as below

<select multiple="multiple" size="10" name="SelectItem" class="eItems" id="SelectItem"></select>

<script type="text/javascript">
    var demo2 = $('.eItems').bootstrapDualListbox({
        nonselectedlistlabel: 'Non-selected',
        selectedlistlabel: 'Selected',
        preserveselectiononmove: 'moved',
        moveonselect: false,
        bootstrap2compatible: true
    });

    $(function () {
        $("#SelectProduct").change(function () {
            $('#SelectItem').empty();
            demo2.trigger('bootstrapduallistbox.refresh');

            $.getJSON("/WEBAPP/MasterData/GetItems", { productID: $("#SelectProduct").val() }, function (data) {
                var items;
                $.each(data, function (i, item) {
                    demo2.append("<option value=" + item.Value + ">" + item.Key + "</option>");
                });
                demo2.trigger('bootstrapduallistbox.refresh');
            })
        });
    });

</script>

From my understanding, the list items are re-populate using original code.
Correct me if I am wrong.

Solution 2

You should try something like this:

demo2.trigger('bootstrapDualListbox.refresh' , true);

This works form me!

Comments

[Hakan Fıstık]

this is not really answer for the question, and actually the javascript is case senstive, not the bootstrapDualListbox