[SOLVED]Smart-select: perform actions on closure

Questions
1

Hi,
I have a form that needs to be validated.
I need to be sure that in smart-select multiple options, at least one is selected (but can be more than one).
I’d prefer to make the validation once the smart-select is closed.
1- Which event is triggered when the smart select is closed?
2- How can I change the values in the form (due to validation) and find them in the smart select when i reopen (for example, user selects nothing and app selects automatically all the options)

Similar question for point 2 is for picker: it seems a change in input does not reflects automatically in values of the picker…

2

You can detect page:back event on smart-select page:

$$(document).on('page:back', '.smart-select-page', function () {
  console.log('smart select page close')
})
3

hmmm, doesn’t seem to work… the event does not get issued (at least not on Ripple emulator simulating Android)…

4

Are you using v1 or v2?

5

V1. Shall I move to V2? Happy to do that if suggested…

6

Must work you can check in Kitchen sink at http://framework7.io/kitchen-sink-ios/. Open console and put there

$$(document).on('page:back', '.smart-select-page', function () {
  console.log('smart select page close')
})

Go to Forms->Smart Select->Pick Any->Go Back and you see it is fired in console

7

Thank you, will give it a try tonight

8

Ok. Your example works.
I forgot to specificy I use the picker and in that case it does not work:

<li><a href="#" class="item-link smart-select" data-open-in="picker" >
                        <!-- "multiple" attribute for multiple select-->
                        <select name="direction" multiple>
                        <!-- options grouped within "optgroup" tag-->
                        <optgroup label="Direction">
                            <option value="nnn" selected>North</option>
                            <option value="eee" selected>East</option>
                            <option value="www" selected>West</option>
                            <option value="sss" selected>South</option>
                        </optgroup>
                        </select>
                        <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title">Direction</div>
                        </div>
                        </div></a>
                    </li>
9

Visit documention for picker modal events then

10

Ok.
For anyone who might need, here a generic solution which works whatever option you want to use for smart-select (picker or view):

    //first cover smart-select picker, second cover full view
    if (($$('.smart-select-picker.modal-in').length > 0) || (page.name.indexOf('smart-select')>=0)) {        
        myApp.closeModal('.smart-select-picker.modal-in'); //close picker
        $$("div[class*='smart-select-']").remove(); //close full window
        //do something
        return
    }
2 Likes
11

I did the following in a similar situation (I wanted to detect the closing of smart select using the picker after a user selects one or many items):

HTML:

        <li><a href="#" 
                class="item-link smart-select"
                data-open-in = "picker"
            >
                     
            <select id="form_entry_item" name="name">
                <option value=""></option>
                <!-- javascript smart select option items added here -->
            </select>   
            <div class="item-content">
              <div class="item-inner"> 
                <div class="item-title">Form Entry</div>
              </div>  
            </div></a> 
        </li>

Javascript:

$$('#form_entry_item').on('change', function() {
    console.log('Form entry item was changed was changed!');
    
    //detect if picker is closed after a selection is made for additional actions:
    $$('.picker-modal').on('close', function() {
        console.log('Picker closed after selecting an item!');
        //additional actions here
    });
});
12

Comment on my solution suggested above: This works but the issue with it is that a new event handler is created upon every selection made in the smart-select, even prior to hitting “Done” and closing the smart select, so that when the smart select is finally closed the inner .on(‘close’) event will trigger once for every selection that was made instead of just the last selection as desired.

I suggest the solution below which keeps the two events separate and set a flag variable within the .on(‘change’) event that is tested within the .on(‘close’) event such that the additional actions are conditioned upon the .on(‘change’) event happening.

Is there a better way to approach this?

var itemSelected = false;
$$('#form_entry_item').on('change', function() {
    console.log('Form entry item was changed was changed!');
    var itemSelected = true;
});    
//detect if picker is closed after a selection is made for additional actions:
$$('.picker-modal').on('close', function() {
    if (itemSelected) {
        console.log('Picker closed after selecting an item!');
        //additional actions here
   }
});
>