0

In the following code i am trying to print and insert an element from javascript to the android emulator.I do not see the text hello world again..What am i doing wrong here..

<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/fonts/font.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />


    <script>
    goLogin();
    </script>
</head>

<body>

<div id="medn_content" class="medn_content" data-role="page" >      
    </div>
</body>
</html>

index.js

function goLogin(htm)
{
alert('here');
$("#medn_content").appendTo("<p> hello world again</p>");
}
Rajeev
  • 44,985
  • 76
  • 186
  • 285

2 Answers2

1

Working example: http://jsfiddle.net/Gajotres/rrSdV/

You have an error in your code, this:

function goLogin(htm)
{
    alert('here');
    $("#medn_content").appendTo("<p> hello world again</p>");
}

should be this:

function goLogin(htm)
{
    alert('here');
    $("#medn_content").append("<p> hello world again</p>");
}

Basically change appendTo to append. There's a big difference how those functions work.

Also if you are using jQuery Mobile they you need to append new content after the page is loaded into the DOM. for that you will need to use proper jQuery Mobile page events. your code should look like this:

<script>
    $(document).on('pagebeforeshow', '#medn_content', function(){ 
        goLogin();
    });
</script>

If you want to find out more about jQuery Mobile page events and how they work take a look at this ARTICLE or find it HERE.

In the end your code should look like this:

HTML:

<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/fonts/font.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script>
    $(document).on('pagebeforeshow', '#medn_content', function(){ 
        goLogin();
    });
</script>
</head>
<body>
    <div id="medn_content" class="medn_content" data-role="page" >      
    </div>
</body>
</html>

Javascript:

function goLogin(htm)
{
    alert('here');
    $("#medn_content").append("<p> hello world again</p>");
}
Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • If it is working in my jsFiddle example it should also work in your case. Tell me is this the first page to load? – Gajotres Jul 01 '13 at 11:34
  • yes..Can u tell why have u used #medn_content in the following...... $(document).on('pagebeforeshow', '#medn_content', function(){ goLogin(); }); – Rajeev Jul 01 '13 at 11:36
  • Because in your case (even if correct append function is used) you are trying to append a content before page is loaded into the DOM. That is why jQuery used document ready. Unfortunately document ready dont work correctly with jQuery Mobile. That's why jQuery Mobile developers have created page events. Read more about it in a links I have posted in my answer. everything is described there. I have also tested my example and it is successfully working in a Phonegap app so I dont understand how you can't make it work. – Gajotres Jul 01 '13 at 11:47
  • so i got hello world working..So when i place a nested html
    ........etc
    then it is showing a blank page..i dont understand whats wrong..     – Rajeev Jul 01 '13 at 11:58
0

Use this script tag instead:

<script>
$( function() {
    document.addEventListener("deviceready", goLogin, false);
});

 function goLogin(htm)
 {
   alert('here');
   $("#medn_content").appendTo("<p> hello world again</p>");
 }
 </script>
Avadhani Y
  • 7,566
  • 19
  • 63
  • 90