Search code examples
javascriptjqueryjquery-mobilejquery-events

How to use html() to modify html in jQuery mobile page post transition

I have a two page (1 file) jQuery mobile page and I want to write some dynamic text on the second page as soon as it loads.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <link href="css/codiqa.ext.min.css" rel="stylesheet">
  <link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet">

  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/jquery.mobile-1.3.1.min.js"></script>
  <script src="js/codiqa.ext.min.js"></script>
  <script src="js/universal-lotto.js"></script>
</head>
<body>
  <div data-role="page" data-control-title="Home" id="page1">
      <div data-role="content">
          <ul data-role="listview" data-divider-theme="b" data-inset="true" id=menu>
              <li data-role="list-divider" role="heading">Menu</li>
              <li data-theme="c"><a href="#ViewN" data-transition="slidedown">Help</a></li>
            </ul>
          </div>
  </div>
  <div data-role="page" data-control-title="AnotherPage" id="ViewN" data-back-btn-text="Menu" data-add-back-btn="true">
      <div data-role="content">
          <div data-controltype="htmlblock" id=printhere>
          </div>
      </div>
  </div>
</body>
</html>

How can I modify the #printhere div? In the file universal-lotto.js I have the following function:

$(document).on('pageshow', '#ViewN' ,function(){
  alert('hi');
  $('#printhere').html('printthis');
});

The alert comes up when the second page shows but the page itself remains blank.

Solution

  • your lign is invalid here :

    <div data-controltype="htmlblock" id=printhere>
</div>

    It should be : 

    <div data-controltype="htmlblock" id="printhere">
</div>