Re-Initialize a Select field

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Re-Initialize a Select field

dan1 pro asked 9 years ago

If user interaction on a page changes the contents of a select field, how do we successfully re-initialize it? Right now I tried just called the material_select() function again but it's putting some weird carets in the drop box now.

Wouter pro answered 7 years ago

[EDIT]
You need reintialize your .mdb-select items. I tried calling it scoped to the wrapping div of the html returned, but that doesnt work.
THIS DOESNT WORK!

function OnAjaxComplete(e) {     
     $('.async-wrapper .mdb-select').material_select()    
  }

THIS DOES:

function OnAjaxComplete(e) {     
       $('.mdb-select').material_select('destroy'); 
       $('.mdb-select').material_select();
  }

Adrian Sawicki commented 7 years ago

Thanks for finding solution to this issue

Wouter pro commented 7 years ago

@Adrian Sawicki, dont say : "Thanks finding a solution if the code is wrong, check your comment..." Calling ".material_select()" doesnt do it. you need destroy all : ('.mdb-select').material_select('destroy') and reinit all: $('.mdb-select').material_select();

dan1 pro answered 9 years ago

ALSO - when an underlying select is not visible, it would be nice if the material_select didn't render the drop down stuff as visible. I am trying to generically wire up selects as material_select but in the event I have one that's on the page, hidden, waiting user interaction it renders a material select with "undefined" as the only choice.

Michal Szymanski staff pro premium priority answered 9 years ago

I have to admit our material select causes us a lot of troubles. We are going to completely rewrite it in the next MDB release. I don't want to give you a temporary fix, so right now I would recommend you to use a standard select: 
<label>Browser Select</label>
  <select class="browser-default">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>

Daniel pro answered 9 years ago

This is a huge problem generally when using AJAX methods and the MDB As example the very popular Views Plugin by Toolset, offers AJAX pagination and Searches, and kind enough, frontend events where we can enqueue MDB again after things happen BUT this should not be necessary, as it works fine with default Bootstrap as example Do you have any updates on the cages required? are they implemented? As on test, it is not. When can we expect a through event delegation?

Michal Szymanski staff pro premium priority answered 9 years ago

Daniel, when we close most pressing issues with our project I'll come back to this problem. Looking at our schedule and situation it should be end of an end of April / beginning of May. I know it's late. It's frustrating for me to, believe me. I'm sorry, I cannot do anything about that right now, apart from trying to finish all the others issues that block me to start working on that. Thank you for understanding.

LexBel answered 8 years ago

Do you have any updates on the cages required? are they implemented?

ijabit answered 8 years ago

Michal, will this re-write make it's way back into the MDB3 project as well? I've also spent a ton of time working around this issue. Here's how I've got it working: this.element.material_select("destroy"); // destroy this.element.material_select() // reinitialize (so it's visible while data is getting loaded from ajax call) // perform async ajax call here to get new data this.element.material_select("destroy"); // destroy again (select disappears) // perform DOM changes to add options to select tag here // this.element.material_select() // reinitialize with new data
Write
Create snippet
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
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
select-form
Related topics
1
Select default Props "selected" are not overwritable
1
Forms -> Select -> Options groups
1
Select wrapper duplicated on form reset
0
Assign value to a select
0
Material Select "Empty option" is too small
About author
dan1
Pro User
7Support score
2Questions 2Answers
0Snippets likes 0Snippets