Topic: Multiselect list update with ajax on filter

dipeshshah free asked 5 years ago


I want to get data using multiselect filter from the database. I can get the data from the server using ajax call also updated the options for multiselect and called materialSelect() method to recreate the multiselect. The list is updated but the multiselect search popup is being closed. So please help me on this.


Piotr Glejzer staff commented 5 years ago

May you show us your code about that problem?


dipeshshah free answered 5 years ago


Below is the code that is executed after ajax call. So what is happening here is it is re-initialising everything (with correct data) but closes the filter text box

                        var ddlStoresHtml = '';                             
                    ddlStoresHtml = '<select id="ddlStores" class="mdb-select colorful-select dropdown-default" multiple searchable="Type here to search ...">'
                                        +'<option value="" disabled selected>Choose store(s)</option>';                                 
                    if($('#jsonDdlStores').text()!=''){                        
                    var jsonDdlStores = JSON.parse($('#jsonDdlStores').text());
                    $.each(jsonDdlStores.storesList, function(i, store) {
                        ddlStoresHtml+='<option value="'+store.storeNumber+'">'+store.storeNumber+' - '+store.storeName+'</option>';
                    });
                    }               
                    ddlStoresHtml+= '</select><button class="btn-save btn btn-default btn-sm" onclick="closeMultiSelect(this,event)">Done</button>';
                    $('#ddlStoresContainer').html(ddlStoresHtml);
                    var defaultStore;
                    if(jsonData!=null){
                    $("#ddlStores option:selected").prop("selected", false)
                    $.each(jsonData.stores, function(i, val) {
                        $('#ddlStores option[value="'+ val.store + '"]').prop('selected', true);
                        if(val.default){
                            defaultStore=val.store;
                        }
                    });                 
                    }else{
                    $("#ddlStores option:selected").prop("selected", false)
                    }

                    $('#ddlStores').materialSelect();
                    $('#ddlStores').closest('div.row').find('li.select-toggle-all').css('display','none');

Bartłomiej Malanowski staff commented 5 years ago

Could you please record a screencast and share it with us?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.7
  • Device: Computer
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No