Custom MOdal with smart select

I have a custom modal and it will be triggered when a button is click, inside of that we I have a smart select, but it is not showing, can somebody point me out what should I add?

PS: I have read some past issue about this , but I did not understand clearly. (like the initilized the view etc…)

Smart Select must be in View in order to work. You need to init a View when your modal is opened.
in v2 it is app.views.create(...), in v1 it is app.addView(...)

hi thanks for you kind response but i cannot find a js for the event of modal is opened

Check docs http://v1.framework7.io/docs/modal.html#modal-events

Hello is this correct?

$$(. mymodal). modal:open(), function {

}

If mymodal var contains modal HTML element then:

$$(mymodal).on('modal:opened', function () {
  // init view here
});

Or you can init the View just right after you call myApp.modal(...)

Hi! About the view do I need to create another one for the smart select?

var modal = myApp.modal({
title: '<img class="home-icon" src="img/icons8-wallet-50.png" alt=""> Add Wallet',
afterText: '<div id="leave-form" class="list-block">' +
'<ul>' +
'<li>' +
'<div class="item-content">' +
'<div class="item-inner">' +
'<div class="item-input">' +
'<input type="text" placeholder="Name">' +
'</div>' +
'</div>' +
'</div>' +
'</li>' +
'<li>' +
'<div class="item-content">' +
'<div class="item-inner">' +
'<div class="item-title label">Currency</div>' +
'<div class="item-input">' +
'<label class="label-switch">' +
'<input type="checkbox">' +
'<div class="checkbox"></div>' +
'</label>' +
'</div>' +
'</div>' +
'</div>' +
'</li>' +
'<li>' +
'<a href="#" class="item-link smart-select">' +
'<select name="fruits">' +
'<option value="apple" selected>US</option>' +
'<option value="pineapple">JPN</option>' +
'</select>' +
'<div class="item-content">' +
'<div class="item-inner">' +
'<div class="item-title">Select</div>' +
'<div class="item-after">JPN</div>' +
'</div>' +
'</div>' +
'</a>' +
'</li>' +
'<li class=="align-top">' +
'<div class="item-content">' +
'<div class="item-inner">' +
'<div class="item-input">' +
'<textarea placeholder="Memo"></textarea>' +
'</div>' +
'</div>' +
'</div>' +
'</li>' +
'</ul>' +
'</div>',


buttons: [{
text: 'Cancel',
onClick: function () {
// myApp.alert('You clicked first button!')
}
},
{
text: 'Save',
onClick: function () {
mainView.router.loadPage('my-wallet.html');
$$('#new-add-from').css('display', 'block');
}
},
]
})

I Like to ask how to initilize the view in the smart select

your modal content must containt the VIEW element which you must initialize, kind of:

<div class="view modal-view">
  <div class="pages">
    <div class="page">
      <div class="page-content">
        <!-- Smart select or what ever is here -->
      </div>
    </div>
  </div>
</div>

after you created modal you must init this view:

var modal = myApp.modal({
  afterText: '<div class="view modal-view">...</div>',
  ...
});
// init view
myApp.addView('.modal-view');

Hi! I try it but there is no content on modal

THIS IS MY CODE

    $$('#add-payment-plan').on('click', function () {
        var paymentplan = myApp.modal({
            title: 'Add Payment Plan',
            afterText:'<div class="view modal-view">' +
                '<div class="pages">' +
                '<div class="page">' +
                '<div class="page-content">' +
                '<div id="leave-form" class="list-block">' +
                '<ul>' +
                '<li>' +
                '<div class="item-content">' +
                '<div class="item-inner">' +
                '<div class="item-input">' +
                '<input type="date" placeholder="To">' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</li>' +
                '<li>' +
                '<div class="item-content">' +
                '<div class="item-inner">' +
                '<div class="item-input">' +
                '<input type="text" placeholder="To">' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</li>' +
                '<li>' +
                '<div class="item-content">' +
                '<div class="item-inner">' +
                '<div class="item-input">' +
                '<input type="text" placeholder="Amount">' +
                '</div>' +
                '</div>' +
                '</div>' +
                '<li>' +
                '<a href="#" class="item-link smart-select">' +
                '<select name="fruits">' +
                '<option value="apple" selected>Monthly</option>' +
                '<option value="pineapple">Weekly</option>' +
                '</select>' +
                '<div class="item-content">' +
                '<div class="item-inner">' +
                '<div class="item-title">One Time</div>' +
                '</div>' +
                '</div>' +
                '</a>' +
                '</li>' +
                '<li class=="align-top">' +
                '<div class="item-content">' +
                '<div class="item-inner">' +
                '<div class="item-input">' +
                '<textarea placeholder="Memo"></textarea>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</li>' +
                '</ul>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>',


            buttons: [{
                    text: 'Cancel',
                    onClick: function () {
                        // myApp.alert('You clicked first button!')
                    }
                },
                {
                    text: 'Save',
                    onClick: function () {
                        mainView.router.loadPage('payment-plan.html');
                        $$('#new-add-from').css('display', 'block');
                    }
                },
            ]
        })


    });

          $$(paymentplan).on('modal:opened', function () {
           myApp.addView('.modal-view');
          // var anotherView = myApp.addView('.view-main');
        });

You may need to apply additional styles to view element inside of modal, inspect its content in dev tools to see what is needed to be changed

Hi! yes but when I put hieght css the conent is there but smart select still does not show option, is there missing in my code?

Can you create a simple JSFiddle with it so I can take a look?

Okay I will make then i will pate here

https://jsfiddle.net/davemanuel/v1wq6pxx/

https://jsfiddle.net/nolimits4web/kr3wbb3t/

1 Like

Thank you so much !!