Picker only working in index.html page

Questions
1

Hi, I am trying to use a picker for my form. The picker is from the documentation. However it is not working for me in any other page except for the index page. How can I make this work on other pages??

Thanks

2

how are you adding the script?

3

Hi thanks your reaction.
I added the following script in the app.js file. See code:

var pickerDevice = app.picker.create({
  inputEl: '#demo-picker-device',
  cols: [
    {
      textAlign: 'center',
      values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
    }
  ]
});

AND INSIDE THE HTML PAGE IT LOOKS LIKE THE FOLLOWING:

<div class="block-title">Picker with single value</div>
            <div class="list no-hairlines-md">
              <ul>
                <li>
                  <div class="item-content item-input">
                    <div class="item-inner">
                      <div class="item-input-wrap">
                        <input type="text" placeholder="Your iOS device" readonly="readonly" id="demo-picker-device"/>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
4

your problem is similar to this one:

so read f7 component docs. And use components and events, just create your autocomplete on pageBeforIn event.

your issue is that you create the autocomplete from home when your page with the autocomplete dosnt exist yet.

3 Likes
5

Thanks! It works fine now!