iScroll - Uncaught ReferenceError: myScroll is not defined in index and Stale touch event ACTION_DOWN received from webcore

Question

I use iScroll in my levels page but somehow my editor complain ReferenceError in my index page (another page) which I didnt use iScroll. I search 'myScroll' in my index but there is no such word in my index. Because of the error, my iScroll that work in the browser does not work in the Android emulator.

09-04 08:31:06.249: E/Web Console(942): Uncaught ReferenceError: myScroll is not defined at file:///android_asset/www/index.html:1

If I swipe in the emulator, it produces

09-04 15:58:57.318: W/webview(3045): Stale touch event ACTION_DOWN received from webcore; ignoring

index.html (I didnt use iScroll)

<!DOCTYPE html>
<html>
<head>

<title>App Name</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>        
<div id="mainContainer" data-role="page" >
<div data-role="content">
    <div id="homeLinks">
    <img id="icon" src="css/images/icon.png">
    <p><a href="#level" data-role="button" data-theme="a">level</a></p>

    </div>   
  </div>        
</div>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
</body>
</html>

level page (page I used iScroll)

<div data-role="page" data-add-back-btn="true" >
<header data-role="header">  
    <a href="settings.html" data-icon="gear" data-theme="b" class="ui-btn-right">Settings</a>  
    <h1>Study Levels</h1>  
</header>
<div id="level1" data-role="content">
    <div id="wrapper">
        <div id="scroller">
             <ul id="thelist">
                  <li><img src="css/images/level1.png"/></li>
                  <li><img src="css/images/level2.png"/></li>
                  <li>zz</li>
            </ul>
        </div>
    </div>

</div>      

<footer data-role="footer" data-position="fixed" data-tap-toggle="false">
    <div id="nav">
      <div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false">&larr; prev</div>
      <ul id="indicator">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <div id="next" onclick="myScroll.scrollToPage('next', 0);return false">next &rarr;</div>
    </div>
</footer>

<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
<script src="js/ender.js"></script>
<script type="text/javascript" src="iscroll-lite.js"></script>
<script type="text/javascript" charset="utf-8">
         $(document).ready(function () {

        this.myScroll = $('#wrapper').iScroll({
        snap: true,
        momentum: false,
       hScrollbar: false,
        onScrollEnd: function () {
          document.querySelector('#indicator > li.active').className = '';
          document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
        }
        })
    })
 </script>
</body>

Varinder · Answer 1 · 2012-09-05T23:23:07.200

1

----Update------

Having another look, $ in $('#wrapper').iScroll... is from ender not jQuery and i believe thats causing a conflict.

So you might wanna create a closure, something like this:

  (function($){
      $(document).ready(function() {
           this.myScroll = $('#wrapper').iScroll({
           //custom options here 
           });
      });
  })(ender);

And because 'this' inside enders document.ready function points to window object,

you can simply pass inline event handeler like this:

 <div id="prev" onclick="myScroll.scrollToPage('prev', 0);return false"> stuff </div>

Hope it helps :)

edited Sep 05 '12 at 23:23

answered Sep 04 '12 at 03:25

Varinder

2,634
1
17
20

I follow the examples of ender from the official website. When I change my codes (the jquery part) it become cannot be swiped. It gets : 09-04 14:27:14.318: E/Web Console(2594): Uncaught TypeError: Cannot call method 'scrollToPage' of undefined at file:///android_asset/www/index.html:1 – shoujo_sm Sep 04 '12 at 06:24
Appologies for reading your question incorrectly, updated my answer above. cheers :) – Varinder Sep 05 '12 at 23:23

ThoKra · Answer 2 · 2012-09-04T15:27:28.920

0

You have bound the myScroll variable to the document. So either you have to us it by calling document.myScroll, or you can bind it to the window by replacing this with window (Or just remove it) so it becomes:

window.myScroll = $('#wrapper') ...

and then you can call it as a regular variable.

edited Sep 04 '12 at 15:27

answered Sep 04 '12 at 00:49

ThoKra

2,959
2
27
38

So I have to change to window.myScroll = $('#wrapper').iScroll ? – shoujo_sm Sep 04 '12 at 02:13
Getting Cannot call method 'scrollToPage' of undefined at file:///android_asset/www/index.html:1. Can you show me a more complete set of snippets? Thank you. – shoujo_sm Sep 04 '12 at 16:14

iScroll - Uncaught ReferenceError: myScroll is not defined in index and Stale touch event ACTION_DOWN received from webcore

2 Answers2