Re-Initialize a Select field

Topic: Re-Initialize a Select field

dan1 pro asked 8 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.

Add comment

Wouter pro answered 7 years ago

1 0 Best answer

[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 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();

Add comment

ijabit free answered 8 years ago

0 0 Best answer

Please insert min. 20 characters.

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

Add comment

LexBel free answered 8 years ago

0 0 Best answer

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

Add comment

Michal Szymanski staff answered 8 years ago

0 0 Best answer

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.

Add comment

Daniel pro answered 8 years ago

0 0 Best answer

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?

Add comment

Michal Szymanski staff answered 8 years ago

0 0 Best answer

Please insert min. 20 characters.

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>

Add comment

dan1 pro answered 8 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

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

dan1

Pro User 7Support score
2Questions 2Answers 0Snippets