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

dan1 pro asked 10 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 9 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 free commented 9 years ago

Thanks for finding solution to this issue

Wouter pro commented 9 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();

ijabit free answered 10 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

LexBel free answered 10 years ago

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

Michal Szymanski staff answered 10 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.

Daniel pro answered 10 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 answered 10 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>

dan1 pro answered 10 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.
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
  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
select-form
About author
dan1
Pro User 7Support score
2Questions 2Answers 0Snippets