Uncaught TypeError: swiper.destroy is not a function (welcomescreen.js:165)

[stileinverso]

Hi, there

I'm using this plugin to show a small tutorial on app startup (I'm using Framework7 + PhoneGap/Cordova). This works well untill I click/tap the "End Tutorial" or "Skip" button.

I got this error: Uncaught TypeError: swiper.destroy is not a function (welcomescreen.js:165)

This is a piece of my code (scripts.js):

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
  // some code ...
  InitApp();
  // some code ...
}

function InitApp() {
  // some code ...
  LaunchTutorial();
}

function LaunchTutorial() {
  var welcomescreen_slides = [
    {
      id: 'slide0',
      picture: '<div class="tutorialicon">♥</div>',
      text: 'Welcome to this tutorial. In the next steps we will guide you through a manual that will teach you how to use this app.'
    },
    {
      id: 'slide1',
      picture: '<div class="tutorialicon">✲</div>',
      text: 'This is slide 2'
    },
    {
      id: 'slide2',
      picture: '<div class="tutorialicon">♫</div>',
      text: 'This is slide 3'
    },
    {
      id: 'slide3',
      picture: '<div class="tutorialicon">☆</div>',
      text: 'Thanks for reading! Enjoy this app.<br><br><a id="tutorial-close-btn" href="#" class="link color-white">End Tutorial</a>'
    }
  ];

  var options = {
    'bgcolor': '#f44336',
    'fontcolor': 'rgba(255, 255, 255, 0.75)'
  }
  var welcomescreen = myApp.welcomescreen(welcomescreen_slides, options);
}

In index.html:

<link rel="stylesheet" href="css/welcomescreen.css">    
<!-- A lot of HTML code ....  -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/framework7.min.js"></script> 
<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="js/toast.js"></script>    
<script type="text/javascript" src="js/welcomescreen.js"></script>
<script type="text/javascript" src="js/fw7.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/localization/messages_it.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

Solutions?

[valnub]

Can you provide a runnable example of your code with jsfiddle? Your code looks ok so far, so there must be a mistake somewhere else.

[stileinverso]

Here the (incomplete) code but the error is still there:

http://www.stileinverso.it/demo/welcomescreen/www.zip

I found why the error occours: I use swipeable tabs in main view!

If you run the code and click "Skip" or "End tutorial" -> Error! Now try to change this in the HTML code (line 38):

<div class="tabs-swipeable-wrap">

With this:

<div class="">

And the error goes away, your plugin works but that class is required like the docs says here: http://framework7.io/docs/tabs.html#swipeable-tabs

I don't understand :-/

[valnub]

It's not your fault. There was an incompatibility issue with swipeable tabs which are a new component in F7.

I fixed the bug in the latest version of welcomescreen.js: https://github.com/valnub/Framework7-Plugin-Welcomescreen/blob/master/welcomescreen.js

Update to this new version and it should work.

[stileinverso]

Hi, valnub! With your update the problem is been solved. However I had to change this code:

{
  id: 'slide3',
  picture: '<div class="tutorialicon">☆</div>',
  text: 'Thanks for reading! Enjoy this app.<br><br><a id="tutorial-close-btn" href="#">End Tutorial</a>'
}

With this:

{
  id: 'slide3',
  picture: '<div class="tutorialicon">☆</div>',
  text: 'Thanks for reading! Enjoy this app.<br><br><a href="#" class="link color-white close-welcomescreen">End Tutorial</a>'
}

I.E.: <a id="tutorial-close-btn" href="#">End Tutorial</a> -> <a href="#" class="link color-white close-welcomescreen">End Tutorial</a>

I hope I've done in a correct way, otherwise please tell me where I'm wrong. I hope it could be useful for other people!

Thank again!

[valnub]

Hi, why did you have the HTML markup? I only updated the welcomescreen.js file and that worked for me

[stileinverso]

Sorry, I forgot to tell you the reason why I modified that HTML code. The "Skip" button works, but the "End tutorial" not with the original code! Can you test it?

[valnub]

Hm, that's very weird because in the example from this repo it works https://github.com/valnub/Framework7-Plugin-Welcomescreen/tree/master/example

[stileinverso]

Yes, it works if you don't use swipeable tabs from main view!

[valnub]

Ah, ok. I found the problem. Has nothing to do with swipeable tabs.

That "end tutorial" button is not part of this lib. Thus, you have to attach an event listener for it on your own.

See in the example code, there you will find something like this:

$$(document).on('click', '.tutorial-close-btn', function () {
  welcomescreen.close();
});

I would not recommend to add .close-welcomescreen class to that button as it is intended for the "skip" button only.

[stileinverso]

Ok, problem solved! Thanks!!