Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

routes not being called from links on android 2.3 #105

Closed
tubaman opened this Issue · 3 comments

2 participants

@tubaman

None of the route callbacks get called when I click on the links in the Android 2.3 browser. It fails both on my phone and the Android SDK virtual device.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Single Page Application</title>
  <script src="js/jquery-1.6.2.js" type="text/javascript"></script>
  <script src="js/sammy.js" type="text/javascript"></script>
  <script type="text/javascript">
    /* Show the current page and hide the others*/
    function showPage(page) {
      $('.page').each(function(index) {
        if ($(this).attr('id') == page) {
          $(this).show();
        }
        else {
          $(this).hide()
        }
      });
    }

    var app = $.sammy(function() {
      // This is our sammy route.  Anything after the '#/' is the name of the
      // page that we display
      this.get('#/(.*)', function(context) {
        page = this.params['splat'];
        if (page == '') {
          page = 'index';
        }
        showPage(page);
      });

      this.get('', function(context) {
        showPage('index');
      });
    });

    $(function() {
      app.run('#/');
    });

  </script>

</head>

<body>
  <h1>Single Page Application</h1>
  <div id="container">
    <!-- Here's where our pages start.  Each page has a class "page" and
    the id is the page name that goes in the url after the '#/' -->
    <div id="index" class="page">
      This is the index page
    </div>
    <div id="page1" class="page">
      This is page 1
    </div>
    <div id="page2" class="page">
      This is page 2
    </div>
    <div id="page3" class="page">
      This is page 3
    </div>
  </div>
  <a href="#/page1">page 1</a>
  <a href="#/page2">page 2</a>
  <a href="#/page3">page 3</a>

</body>
</html>
@tubaman

I've tried both sammy 0.7.0 and master.

@tubaman

I tried the Android 3.2 emulator and it works there.

@quirkey
Owner

This is actually a known issue with the android browser and HTML5 History. Basically, Android reports through the common test for HTML5 history (does window.history.pushState exist?) that it does in fact have it, even though it actually does not support it and you get situations like above. We chose not to include the browser sniffing code for this as we try to keep browser sniffing out of the core codebase. The fix is simple though, if you plan to support android, either disable push state support entirely or add some browser sniffing to your own code base. You can do this by

           var app = $.sammy(function() {

                 this.disable_push_state = true; 
                // or do your browser sniffs = is_android_browser; 
           })
@quirkey quirkey closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.