Searchbar Expandable on multiple pages

1

Hi, I’m using multiple pages showing Virtual-List with JSON request and I’m using Searchbar Expandable on each one of the pages to search items on it.
On page1.html the searchbar works fine, but when navigate to page2.html the searchbar won’t work.
It’s like the searchbar from page2 opens the page1 searchbar. I’ll post code below. Thanks in advance.

page1.html

<div class="page page-with-subnavbar" data-name="clinicas">
  <!-- Navbar -->
  <div class="navbar">
    <div class="navbar-inner sliding">
      <!-- Left -->
      <div class="left sliding">
        <a href="#" class="link icon-only panel-open" data-panel="left">
          <i class="icon f7-icons ios-only">menu</i>
          <i class="icon material-icons md-only">menu</i>
        </a>
      </div>
      <!-- Title -->
      <div class="title sliding">Clínicas</div>
      <!-- Right -->
      <div class="right">
        <!-- Link to enable searchbar -->
        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar">
          <i class="icon f7-icons ios-only">search_strong</i>
          <i class="icon material-icons md-only">search</i>
        </a>
      </div>
     
     <!-- Searchbar is a direct child of "navbar-inner" -->
      <form class="searchbar searchbar-expandable searchbar-init"
      data-search-container=".virtual-listClinicas" data-search-item="li" data-search-in=".item-title">
        <div class="searchbar-inner">
          <div class="searchbar-input-wrap">
            <input type="search" placeholder="Buscar clínicas"/>
            <i class="searchbar-icon"></i>
            <span class="input-clear-button"></span>
          </div>
          <span class="searchbar-disable-button">Cancelar</span>
        </div>
      </form>

      <!-- Subnavbar -->
      <div class="subnavbar">
        <div class="subnavbar-inner">
          <!-- Subnavbar content, for example tabs buttons -->
          <div class="segmented">
            <a href="#" id="button-turno" class="button">
              <i class="icon f7-icons ios-only">person</i>
              <i class="icon material-icons md-only">person</i></a>
            <a href="#" id="button-sobreturno"  class="button">
              <i class="icon f7-icons ios-only">calendar</i>
              <i class="icon material-icons md-only">date_range</i></a>
            <a href="#" id="button-turnoslibres" class="button">
              <i class="icon f7-icons ios-only">time</i>
              <i class="icon material-icons md-only">access_time</i></a>
            <a href="#" id="button-anular" class="button">
              <i class="icon f7-icons ios-only">world</i>
              <i class="icon material-icons md-only">public</i></a>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Page Content -->
  <div class="page-content hide-navbar-on-scroll">
    <!-- Searchbar backdrop -->
    <div class="searchbar-backdrop"></div>

    <div class="list simple-list searchbar-not-found">
      <ul>
        <li>No se han encontrado resultados.</li>
      </ul>
    </div>

    <!--Virtual List Clinicas-->
    <div class="list virtual-listClinicas media-list searchbar-found">
    </div>
    <!--Virtual List Clinicas-->
  </div>

</div>

page2.html

<div class="page page-with-subnavbar" data-name="turnos">
  <!-- Navbar -->
  <div class="navbar">
    <div class="navbar-inner sliding">
      <!-- Left -->
      <div class="left sliding">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Atrás</span>
        </a>
      </div>
      <!-- Title -->
      <div class="title sliding">Turnos</div>
      <!-- Right -->
      <div class="right">
        <!-- Link to enable searchbar -->
        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar">
          <i class="icon f7-icons ios-only">search_strong</i>
          <i class="icon material-icons md-only">search</i>
        </a>
      </div>
      
      <!-- Searchbar is a direct child of "navbar-inner" -->
      <form class="searchbar searchbar-expandable searchbar-init"
      data-search-container=".virtual-listTurnos" data-search-item="li" data-search-in=".item-title">
        <div class="searchbar-inner">
          <div class="searchbar-input-wrap">
            <input type="search" placeholder="Buscar turnos"/>
            <i class="searchbar-icon"></i>
            <span class="input-clear-button"></span>
          </div>
          <span class="searchbar-disable-button">Cancelar</span>
        </div>
      </form>

      <!-- Subnavbar -->
      <div class="subnavbar">
        <div class="subnavbar-inner">
          <!-- Subnavbar content, for example tabs buttons -->
          <div class="segmented">
            <a href="#" id="button-turno" class="button">
              <i class="icon f7-icons ios-only">person</i>
              <i class="icon material-icons md-only">person</i></a>
            <a href="#" id="button-sobreturno"  class="button">
              <i class="icon f7-icons ios-only">calendar</i>
              <i class="icon material-icons md-only">date_range</i></a>
            <a href="#" id="button-turnoslibres" class="button">
              <i class="icon f7-icons ios-only">time</i>
              <i class="icon material-icons md-only">access_time</i></a>
            <a href="#" id="button-anular" class="button">
              <i class="icon f7-icons ios-only">world</i>
              <i class="icon material-icons md-only">public</i></a>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Page Content -->
  <div class="page-content hide-navbar-on-scroll">
    <!-- Searchbar backdrop -->
    <div class="searchbar-backdrop"></div>

    <div class="list simple-list searchbar-not-found">
      <ul>
        <li>No se han encontrado resultados.</li>
      </ul>
    </div>

    <!--Virtual List Turnos-->
    <div class="list virtual-listTurnos media-list searchbar-found">
    </div>
    <!--Virtual List Turnos-->
  </div>

</div>
2

Use different/unique selectors in your searchbar-open links

2 Likes
3

Do you mean here?

<a class="link icon-only searchbar-enable" data-searchbar=".searchbar">

Where should I put the unique selector? CSS?

4 
<a class="link icon-only searchbar-enable" data-searchbar=".searchbar-1">

<a class="link icon-only searchbar-enable" data-searchbar=".searchbar-2">

And target searchbars must have additional searchbar-1 and searchbar-2 classes

1 Like
5

I tried that but won’t work. Should I create searchbar on app.js?

6

Live example or JSFiddle with what you have tried will be very helpful

7

I’ll try to upload an live example soon as I can.
I tried to put an unique id to data-searchbar on each page like this:

<a class="link icon-only searchbar-enable" data-searchbar=".searchbar-clinicas">

<a class="link icon-only searchbar-enable" data-searchbar=".searchbar-turnos">

Heres the jsfiddle example:
https://jsfiddle.net/o2ejupu1/195/

On the other pages I use the same code on .html and .js to load the virtual-list.

8

JSFiddle supposed to be working, here is with some fixes https://jsfiddle.net/8p04x71w/
Now you need to add there second page and illustrate the issue

9

Ok, thanks for the fixes! :smiley:
I added the second page and both Searchbar seems to be working but the second virtual-list won’t load.

https://jsfiddle.net/bqd0p4km/

EDIT :
Also I discovered I get this error when typing on searchbar

image
image.png1920×1080 252 KB 

framework7.js:21065 Uncaught TypeError: Cannot read property 'params' of undefined
    at t.search (framework7.js:21065)
    at HTMLInputElement.w (framework7.js:20821)
    at HTMLInputElement.l (framework7.js:1078)
t.search @ framework7.js:21065
w @ framework7.js:20821
l @ framework7.js:1078
10

Still can’t solve this :S

11

Apparently you need to init second virtual list when it is in DOM, i moved that logic to pageInit of the second page for example https://jsfiddle.net/nolimits4web/r7qsy16a/

12

Ok, I see. Actually I load the JSON list passing parameters to my PHP calls, is it possible to pass parameters that way on DOM?