Stepper is not working when i call it through jquery

Questions
1

stepper is not working when i call stepper through jquery.

On page:init
{
var stepper =



Default







$(".show-stepper").html(stepper)

}

when i call through jquery it is not working.

2

thats your real code?
do you mean something like

$('.show-stepper').html(stepper)
// or
$('#show-stepper').html(stepper)
3

i wrote by mistake $(show-stepper). my code is same as your code but still not working… when i code without jquery direct in html page its working

4

can you share the full code, so i can reproduce the error? or even better, if you can, make a jsfiddle with the error, you can start here
jsfiddle

5

i updated jsfiddle. i create 2 stepper one is on direct in code and second through jquery. but second one is not visible.

6

You should post the link of your updated fiddle

1 Like
7

https://jsfiddle.net/todevesh/83Lr4hye/14/

8

Hi, just watch your fiddle.
you are mixing concepts.
$ !== jquery
$ == Dom7

So you say you cant add stepper via jquery, but in your fiddle i didnt find any reference to jquery. Insted you are trying to do it via Dom7.
So for that to work, just asign Dom7 to $

// Now you have acces to Dom7 via '$'
var $ = Dom7

And then, on app Init start the stepper;
Full JS code

var $ = Dom7 
var app = new Framework7({
  root: '#app',
  theme: 'auto',
  routes: [{
    path: '/about/',
    content: `
      	<div class="page">
          <div class="navbar">
            <div class="navbar-inner sliding">
            	<div class="left">
                <a href="#" class="link back">
                  <i class="icon icon-back"></i>
                  <span class="ios-only">Back</span>
                </a>
              </div>
              <div class="title">About</div>
            </div>
          </div>
          <div class="page-content">
            <div class="block block-strong">About page</div>
          </div>
        </div>
      `
  }],
  on: {
  	init: function () {
	  var jqstep = "<div class='stepper stepper-small stepper-init'> <div class='stepper-button-minus'></div> <div class='stepper-input-wrap'> <input type='text' value='0' min='0' max='100' step='1' readonly> </div> <div class='stepper-button-plus'></div> </div>"
$(".jqstepper").html(jqstep);
}
  }
});
2 Likes
9

Also when added stepper with stepper-init class after pageInit it won’t work. You need to init it manually using app.stepper.create method

1 Like
10 
var $ = Dom7
var app = new Framework7({
  root: '#app',
  theme: 'auto',
  routes: [{
    path: '/about/',
    content: `
      	<div class="page">
          <div class="navbar">
            <div class="navbar-inner sliding">
            	<div class="left">
                <a href="#" class="link back">
                  <i class="icon icon-back"></i>
                  <span class="ios-only">Back</span>
                </a>
              </div>
              <div class="title">About</div>
            </div>
          </div>
          <div class="page-content">
            <div class="block block-strong">About page</div>
          </div>
        </div>
      `
  }],
  on: {
  	init: function () {
	  var jqstep = "<div class='stepper stepper-small'> <div class='stepper-button-minus'></div> <div class='stepper-input-wrap'> <input type='text' value='0' min='0' max='100' step='1' readonly> </div> <div class='stepper-button-plus'></div> </div>"
$(".jqstepper").html(jqstep);
app.stepper.create(".stepper");

}
  }
});

var viewMain = app.views.create('.view-main');

https://jsfiddle.net/todevesh/83Lr4hye/19/;

I Initialized with app.stepper.create(".stepper"); but still not working.

11 
this.stepper.create({
	el: ".stepper"
});
2 Likes