I have a smart select rendered on the page that works fine until i try to put it inside a sheet modal on the same page. I get the old “Smart Select requires initialized View” Strange that it works in the same view just fine until its inside the sheet modal. Also tried adding the “smart-select-init” class as well as view-init to the view the page is contained. no luck.
Yuo can set the prop openIn of the smart select. instead of making a Sheet Modal to show a smart select.
Defines how to open Smart Select. Can be page or popup or popover or sheet
I am sorry i didnt describe the problem clearly. I am not trying to make the smart select options appear in a sheet modal, im trying to put the actual select boxes inside a sheet modal. Like this:
<div class="sheet-modal my-sheet"> <div class="toolbar"> <div class="toolbar-inner"> <div class="left"><span class="small">Console/Game</span></div> <div class="right"><a class="link sheet-close" href="#">Close</a></div> </div> </div> <div class="sheet-modal-inner"> <div class="list no-margin-top"> <ul> <li> <a href="#" class="item-link smart-select" data-view="view-home" data-close-on-select="true"> <select name="filter_system" id="filter_system"> <option value="all">All</option> <option value="1">1</option> <option value="2">2</option> </select> <div class="item-content"> <div class="item-inner"> <div class="item-title">Console</div> <div id="default_console" class="item-after">All</div> </div> </div> </a> </li> </ul> </div> </div>
First i was getting the “Smart Select requires initialized View” error until i added the data-view=“view-home” property, but now i get a new error: Uncaught TypeError: Cannot read property ‘navigate’ of undefined. my view looks like this:
<div class="view view-main" id="view-home"> </div>
Ok, so you need a view with router to use smart select. since sheets its independent of view main, if you dont specify the view element with data-view, it will find the parent view. Since there is no view you get, Smart Select requires initialized View. Then you specify the view with data-view. But now the smart-select tries to navigate to a new page (smart select page) but it cant find a navigate.
so the solution I found is to create a new view for sheet and use it. But again, its my solution. Maybe there is a better approach.
Or @nolimits4web can say the correct way of doing it.
here is the fiddle;