I am trying to build a Web application using jQuery Mobile. When testing on

Question

0

Asked: June 7, 20262026-06-07T05:39:24+00:00 2026-06-07T05:39:24+00:00

I am trying to build a Web application using jQuery Mobile. When testing on

0

I am trying to build a Web application using jQuery Mobile.
When testing on my desktop everything works as expected.
On Android (both 3.2 and 4.0.3) seems like JavaScript is disabled after navigating to second page.

My first page looks like:

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
  href="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h3>Jetty experiments:</h3>
    </div>
    <div data-role="content">
      <ul data-role="listview">
        <li><a href="HelloWorld" data-ajax="false">Hello World</a></li>
        <li><a href="sample-form.html">Sample Form</a></li>
        <li><a href="test.jsp" data-ajax="false">Test JSP</a></li>
      </ul>
    </div>
    <div data-role="footer">
      <button id="jquery-test">JQuery Test</button>
    </div>
  </div>
</body>
<script type="text/javascript">
    $(document).ready(function() {
        $("#jquery-test").click(function(event) {
            alert("OK");
        });
    });
</script>
</html>

My second page (that is sample-form.html):

<!DOCTYPE html>
<html>
<head>
<title>Collects text into a database</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
  href="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
  src="script/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="script/tempo.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h3>Enter some text:</h3>
    </div>
    <div data-role="content">
      <form id="searchForm" method="get" action="SampleForm"
        data-ajax="false">
        <input type="text" name="text" /> <input type="submit"
          value="Submit" />
      </form>
      <ul id="names" data-role="listview">
        <li data-template>{{name}}</li> <!-- the template here does not work on Android -->
        <li data-template-fallback>Sorry, JavaScript required!</li>
      </ul>
    </div>
    <div data-role="footer">
      <button id="jquery-test">JQuery Test</button>
    </div>
  </div>
</body>
<script>
    var names;

    $(document).ready(function() {
        $("#jquery-test").click(function(event) {
            alert("OK"); // the alert here does not work on Android :(
        });
        names = Tempo.prepare("names")
    });

    // this binding does not work on Android
    $("#searchForm").submit(function(event) {
        event.preventDefault();

        $.getJSON("SampleForm", function(data) {
            names.render(data);
        });
    });
</script>
</html>

Any idea what am I doing wrong?
BR,
Adrian.