0

i am executing below snippet in android mobile, i am able to see my web form, but jquery snippet not working.

public class MainActivity extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }

}

Jquery Snippet

   <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
<!-- NOTE: Script load order is significant! -->
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript">
$(document).ready(function () // Call function when page is ready for load..
{
    alert("Step 1");
});
</script>
</head>
<body>
<div data-role="page">
  <div data-role="header"data-position="fixed" >
    <h1>My Income</h1>
  </div>
  <div data-role="content">
    <form id="myincome" data-ajax="true">
      <table data-role="table" data-mode="columntoggle">
        <tr>
          <th>CUSTOMER NAME</th>
          <th><input type="text" name="txt_cust_name" id ="txt_cust_name"/></th>
        </tr>
        <tr>
          <th colspan="2"><input type="button" value="Save Changes" id="save_me" /></th>
        </tr>
      </table>
    </form>
  </div>
  <div data-role="footer" data-position="fixed">
    <p>Footer</p>
  </div>
</div>
</body>
</html>

java script alert not displayed.

Bharanikumar
  • 25,457
  • 50
  • 131
  • 201
  • 1) you shouldn't use `.ready()` with jQM. 2) place code snippet inside `data-role=page` not in `head`. Any JS in `head` won't be loaded as jQM uses Ajax to load pages. – Omar Nov 11 '13 at 13:30
  • small tips: check your index.html is working in browser or not? – Avijit Nov 11 '13 at 13:37

1 Answers1

0

use

    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() 
   {
    alert("Step 1");
    }

and read understand how pages are loaded in jquery mobile here is an example

http://jquerymobile.com/demos/1.2.0/docs/pages/page-template.html

right to view code or get the theory here

http://api.jquerymobile.com/loader/

all the best

Stephen Ngethe
  • 1,034
  • 13
  • 24