Searchbar problem in components page

Questions
1

i can’t use search bar in components page why it’s not working … in first page is working
i’m go from page to components by default routes
in categorydetails.html search bar is not working or when go from page to another by click as example go not working i put .view and .view-main classes not working i get example from framework.io is working in index.html page…
my routes file is:

{
path: ‘/categorydetails/:catID/’,
async: function (routeTo, routeFrom, resolve, reject) {
// Router instance
var router = this;

  // App instance
  var app = router.app;

  // Show Preloader
  app.preloader.show();

  // User ID from request
  var catID = routeTo.params.catID;

  // Simulate Ajax Request
  setTimeout(function () {
    // We got user data from request
    var cat = catID;
    // Hide Preloader
    app.preloader.hide();
	var path='http://www.example.com/api/product.php?cat='+cat;

app.request.json(path, function (data) {
// Resolve route to load page
resolve(
{
componentUrl: ‘./pages/categorydetails.html’,
},
{
context: {
cat: data,
}
}
);

});
}, 1000);
},
},

2

And what is in your index and component HTML files?

3

thank you i found problem …

Now new problem :slight_smile: stepper is not working i used normal stepper not for md theme is not working i used in index.html not take style there is wrong …

Default
4

My question is still the same

5

thank you for help me

----index.html-------

test 
  <!-- Your main view, should have "view-main" class -->
<div class="view view-main ios-edges">
  <!-- Page, data-name contains page name which can be used in callbacks -->
  <div class="page backgroundimage" data-name="home" >
  
  <div class="page-content" >
<center>
<img data-src="img/logo.png" class="lazy margin-top" width="35%">
</center>


 <form id="my-form" action="javascript:;" method="GET" class=" list" enctype="multipart/form-data" >

  <div class="item-content item-input">
   <div class="item-media">
      <i class = "icon icon-form-email"></i>
    </div>
    <div class="item-inner">
      <div class="item-title item-label">E-posta</div>
      <div class="item-input-wrap">
        <input id ="email" type="text" name="email" placeholder="Your name">
      </div>
    </div>
  </div>

  <div class="item-content item-input">
  <div class="item-media">
      <i class = "icon icon-form-password"></i>
    </div>
    <div class="item-inner">
      <div class="item-title item-label">Şifre</div>
      <div class="item-input-wrap">
        <input id="password" type="password" name="password" placeholder="Şifre">
      </div>
    </div>
  </div>
Giriş 
 </div>
 </div>    
	</div>
	</div>

----------app.js----

// Dom7
var $$ = Dom7;

var app = new Framework7({
// App root element
root: ‘#app’,
// App Name
name: ‘My App’,
// App id
id: ‘com.myapp.test’,
// Enable swipe panel
// App routes
routes: routes,
lazy: {
threshold: 50,
sequential: true,
},
panel: {
swipe: ‘left’,
},

});

var mainView = app.views.create(’.view-main’);

$$(’.ayman’).on(‘click’, function (e) {
var password = $$(’#password’).val();
var email = $$(’#email’).val();
app.request.get(‘http://www.example.com/api/zzz.php’, { email:email, password:password }, function (data) {
if (data == false) {
$$(’.aaa’).html(“Şifre Yada Kullancı Yanliş”);
}
else {
localStorage.setItem(“username”,email);
mainView.router.load({url:’./pages/category.html’, ignoreCache:true, reload:true });
}
});
});

-------routes.js------

routes = [
{
path: ‘/’,
url: ‘./index.html’,
},
{
path: ‘/form/’,
url: ‘./pages/form.html’,
},
// Left View Pages
{
path: ‘/left-page-1/’,
url: ‘./pages/left-page-1.html’,
},
{
path: ‘/left-page-2/’,
url: ‘./pages/left-page-2.html’,
},
{
path: ‘/categorydetails/’,
url: ‘./pages/categorydetails.html’,
},
{
path: ‘/categorydetails/:catID/’,
async: function (routeTo, routeFrom, resolve, reject) {
// Router instance
var router = this;

  // App instance
  var app = router.app;

  // Show Preloader
  app.preloader.show();

  // User ID from request
  var catID = routeTo.params.catID;

  // Simulate Ajax Request
  setTimeout(function () {
    // We got user data from request
    var cat = catID;
    // Hide Preloader
    app.preloader.hide();
	var path='http://www.example.com/api/product.php?cat='+cat;

app.request.json(path, function (data) {
// Resolve route to load page
resolve(
{
componentUrl: ‘./pages/categorydetails.html’,
},
{
context: {
cat: data,
}
}
);

});
}, 1000);
},
},
{
path: ‘/sepet/’,
async: function (routeTo, routeFrom, resolve, reject) {
// Router instance
var router = this;

  // App instance
  var app = router.app;
  // Show Preloader
  app.preloader.show();
  // Simulate Ajax Request
  setTimeout(function () {
    // We got user data from request
    // Hide Preloader
    app.preloader.hide();
    // Resolve route to load page
	
	resolve({componentUrl: './pages/sepet.html'});
	
   
  }, 1000);
},

},
{
path: ‘/search/’,
async: function (routeTo, routeFrom, resolve, reject) {
// Router instance
var router = this;

  // App instance
  var app = router.app;
  // Show Preloader
  app.preloader.show();
  // Simulate Ajax Request
  setTimeout(function () {
    // We got user data from request
    // Hide Preloader
    app.preloader.hide();
    // Resolve route to load page
	
	resolve({componentUrl: './pages/search.html'});
	
   
  }, 1000);
},

},

// Default route (404 page). MUST BE THE LAST
{
path: ‘(.*)’,
url: ‘./pages/404.html’,
},
];

-------./pages/categorydetails.html-------

      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Menu</div>
        </div>
      </div>
      <div class="page-content">
        <div class="block">
		<div class="list links-list">
          <ul>
            <li><a data-view=".view-main" href="/categorydetails/51/">Powerbank</a></li>
            <li><a data-view=".view-main" href="/categorydetails/60/">Left Page 2</a></li>
          </ul>
        </div>
		</div>
      </div>
    
</div>
<div class="navbar">
  <div class="navbar-inner sliding">
    <div class="left">
      <a href="#" class="back link">
        <i class="icon icon-back"></i>
        <span class="ios-only">Back</span>
      </a>
    </div>
    <div class="title">Ürünleri</div>
	<div class="center">
     
       <i class="icon icon-bag"></i>
       <a href="/sepet/"> <span> Adet: </span><span class="count">{{qty 1}}</span> - <span class="total">{{total 2}}</span><span>TL</span></a>
     
    </div>
	 <div class="right">
      <a href="#" class="button button-raised button-fill panel-open" data-panel="right">Right Panel</a>
    </div>
	<div class="subnavbar">
    <!-- Searchbar with auto init -->
    <form class="searchbar">
      <div class="searchbar-inner">
        <div class="searchbar-input-wrap">
          <input type="search" placeholder="Search">
          <i class="searchbar-icon"></i>
          <span class="input-clear-button"></span>
        </div>
        <span class="searchbar-disable-button">Cancel</span>
      </div>
    </form>
  </div>
	
  </div>
</div>
<div class="page-content">

<div class="searchbar-backdrop"></div>
<!-- hide-on-search element -->
<div class="block searchbar-hide-on-search">
  <p>This block will be hidden on search. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<!-- search target list -->


  <div class="block block-strong">
  <div class="list media-list searchbar-found">
  <ul>
   {{#each cat}}
   <li class="">
   <div href="#" class="item-link item-content">
    <div class="item-media"><img style="width:80px;" src="http://store.example.com/include/3rdparty/PHPThumb/phpThumb.php?src=images/urunler/{{resim}}" data-src="http://store.example.com/include/3rdparty/PHPThumb/phpThumb.php?src=images/urunler/{{resim}}" class="lazy lazy lazy-fade-in photopro{{ID}}"/>
	<div class="store">
	  {{storeshow stok}}
	  </div>
	</div>
    <div class="item-inner">
      <div class="item-title-row">
        <div class="item-title"><a class="item-title item-input-wrap external name{{ID}}" target="_blank" href="">{{name}}</a></div>
      </div>
      <div class="item-subtitle "><a class="external price{{ID}}" target="_blank" href=""><span>Fiyat:</span>{{price fiyat1 value}} </a><span>TL</span></div>
      
	  <div class="item-text">
	 
	 <div class="row">
   <div class="col-25">
 <span> Adet: </span>
  </div>
  <div class="col-75">
  <input type="number" value="1" min="0" max="100" class="counter{{ID}}">
  </div>
  </div>
	 
	  </div>
	  <div class="item-text">
	  {{splitColor color qty_color ID}}
	  </div>
	  <div class="item-text">
	  <a class="popup-open" herf="#"  id={{ID}} data-popup=".popup-{{ID}}" >Detay</a>
	  </div>
	  	 <div class="item-text">
	 <button class="col button button-fill idadd" @click="openAlert" id={{ID}} data="{{stok}}" >Sepet Ekle</button>
	  </div>
 
    </div>
	</div> 
		
<div class="popup popup-{{ID}}">
<div class="block">
 <div class="row">
   <div class="col-75">
  <p>{{name}}</p>
  </div>
  <div class="col-25">
  <a class="link popup-close" href="#">Kapat</a>
  </div>
  </div>
    <img src="http://store.example.com/include/3rdparty/PHPThumb/phpThumb.php?src=images/urunler/{{resim}}" data-src="http://store.example.com/include/3rdparty/PHPThumb/phpThumb.php?src=images/urunler/{{resim}}" class="lazy lazy lazy-fade-in photopro{{ID}}"/>
  <!-- Close Popup -->
  <p class="popupul">{{detay}}</p>
  <p><a class="link popup-close" href="#">Kapat</a></p>
</div>
{{/each}}
6
7

Can’t see stepper in your code, but you probably need to update F7 to latest 2.1.3 version

8

i’m sorry forget to add stepper,now i update to 2.2 i used f7 with cordeva and i copy only src folder from f7 to my cordeva every thing is work good only stepper style not taken:

if there are things to add in script file ???
-----my index.html—

  <!-- Your main view, should have "view-main" class -->
<div class="view view-main ios-edges">
  <!-- Page, data-name contains page name which can be used in callbacks -->
  <div class="page backgroundimage" data-name="home" >
  
  <div class="page-content" >
<center>
<img data-src="img/logo.png" class="lazy margin-top" width="35%">
</center>


 <form id="my-form" action="javascript:;" method="GET" class=" list" enctype="multipart/form-data" >

  <div class="item-content item-input">
   <div class="item-media">
      <i class = "icon icon-form-email"></i>
    </div>
    <div class="item-inner">
      <div class="item-title item-label">E-posta</div>
      <div class="item-input-wrap">
        <input id ="email" type="text" name="email" placeholder="Your name">
      </div>
    </div>
  </div>

  <div class="item-content item-input">
  <div class="item-media">
      <i class = "icon icon-form-password"></i>
    </div>
    <div class="item-inner">
      <div class="item-title item-label">Şifre</div>
      <div class="item-input-wrap">
        <input id="password" type="password" name="password" placeholder="Şifre">
      </div>
    </div>
  </div>
Giriş
Default 
 </div>
 </div>    
	</div>
	</div>
9

You also need to update latest F7 css

10

ok thank you is working … i think problem old f7