i have an index.html with an href button to another page to display a pie chart, but when i click on the button the chart doesn't appear, then if i refresh the page the chart appears.
here is the html page .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>the Stats</title>
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" />
<link rel="stylesheet" href="demo.css">
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b" >
<h1>HsV</h1>
</div><!-- /header -->
<div data-role="content">
<img id='img' src="HSV-logo.png" width=150 />
</div> <!--/content -->
<div class="content-primary">
<ul data-role="listview">
<li><img src="images/gf.png" alt="France" class="ui-li-icon">France </li>
<li><img src="images/gb.png" alt="Great Britain" class="ui-li-icon">Great Britain </li>
<li><img src="images/gbl.png" alt="Belgium" class="ui-li-icon">Belgium </li> </ul>
</div>
<div id="footer" data-role="footer" data-theme="b">
<h1>my app</h1>
</div>
</div><!-- /page -->
</body>
</html>
here is the code of the linked page for the pie chart .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HybridStatsViewer</title>
<link rel="stylesheet" href="jquery.mobile-1.3.1.css" />
<link rel="stylesheet" href="demo.css">
<!--link rel="stylesheet" href="demo-print.css"media="print"-->
<script src="jquery.js"></script>
<script src="jquery.mobile-1.3.1.js"></script>
<script src="raphael.js"></script>
<script src="pie-10.js"></script>
<script src="moteur.js"></script>
</head>
<body onload="moteur();">
<div data-role="page">
<div data-role="header" data-theme="b" >
<h1>HsV</h1>
Back
</div><!-- /header -->
<div id ="holder">
</div>
<a id="bt" href="France-30.html" data-mini="true" data-role="button" data-inline="true" data-transition="flow" data-theme="b">Slide</a>
<div id="footer" data-role="footer" data-theme="b">
<h1>my app</h1>
</div>
</div><!-- /page -->
</body>
You didn't post your javascript code but I think I know what is your problem.
All jQuery plugins that work with page height and width (in your case pie chart) MUST be initialized through pageshow event. This is because jQuery Mobile pages has correct height only at that point. So if page height is 0 plugin will initialize but with height set to 0.
So if you are doing it during the document ready or any other page event, switch your pie chart plugin initialization to pageshow evenet.
If you don't know what pageshow event is take a look at my other detailed answer: jQuery Mobile: document ready vs page events
EDIT :
I have fixed your problem.
To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages.
First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM.
Read more about it in my other answer other answer: Why I have to put all the script to index.html in jquery mobile
Add the below code inside pie chart page and remove onload="moteur();" function.
<script>
$(document).on('pageshow', '[data-role=page]', function () {
moteur();
});
</script>
Any scripts and styles referenced the head of a page won't have any effect when a page is loaded via Ajax, but they will execute if the page is requested normally via HTTP. When scripting jQuery Mobile sites, both scenarios need to be considered. The reason that the head of a page is ignored when requested via Ajax is that the potential of re-executing the same JavaScript is very high (it's common to reference the same scripts in every page of a site). Due to the complexity of attempting to work around that issue, we leave the task of executing page-specific scripts to the developer, and assume head scripts are only expected to execute once per browsing session.
The simplest approach when building a jQuery Mobile site is to reference the same set of stylesheets and scripts in the head of every page. If you need to load in specific scripts or styles for a particular page, we recommend binding logic to the pageinit event (details below) to run necessary code when a specific page is created (which can be determined by its id attribute, or a number of other ways). Following this approach will ensure that the code executes if the page is loaded directly or is pulled in and shown via Ajax.
Another approach for page-specific scripting would be to include scripts at the end of the body element when no data-role=page element is defined, or inside the first data-role=page element. If you include your custom scripting this way, be aware that these scripts will execute when that page is loaded via Ajax or regular HTTP, so if these scripts are the same on every page, you'll likely run into problems. If you're including scripts this way, we'd recommend enclosing your page content in a data-role="page" element, and placing scripts that are referenced on every page outside of that element. Scripts that are unique to that page can be placed in that element, to ensure that they execute when the page is fetched via Ajax.
Check our this link for complete details.....
http://demos.jquerymobile.com/1.2.0-beta.1/docs/pages/page-scripting.html
Related
I have a web page where I am using javascript to redirect to another page. The second page displays correctly but I can't get javascript to run when the second page is loaded. Here are 3 ways I have tried to get my javascript function to load on the second page:
Put the function as onload parameter for html body
Tried calling it as inline javascript inside both the heading and body of the page
Used jquery $(document).ready to try and call the function when page loads
I simplified the function to be a simple alert to make sure the problem wasn't with the function code and also set break point on function to make sure it wasn't being called. The code won't fire when the page is loaded but if I do a refresh on the browser it will work.
The page I am trying to redirect to is generated by a 3rd party application we have so I am limited on how much I can modify it but I can make basic HTML/javascript changes to the page. The second page is also built with Angular.
Any ideas on how I can get this second page to always run my javascript code when I redirect to it? Below is code from second page with the myTest() the function I am trying to run. If I hit refresh on browser when this page loads, I get the myTest alert 3 times.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title ng-controller="TitleCtrl" ng-bind="title"></title>
<!-- third party stylesheets -->
<link rel="stylesheet" type="text/css" href="third-party/bootstrap-3.3.5/css/bootstrap.min.css" />
<link rel="styleSheet" type="text/css" href="third-party/angular-ui-grid-3.1.1/ui-grid.min.css" />
<link rel="stylesheet" type="text/css" href="third-party/font-awesome-4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="angular-1.5.0/angular.min.js"></script>
//editing out list of about 50 javascript files to make code example shorter
<script type="text/javascript">
function myTest() {
alert("My Test");
}
</script>
</head>
<body class="app-body" onload="myTest();">
<ng-include src="'components/property-pages/field-scripts.html'"></ng-include>
<ng-include src="'components/form-editor/form-editor-field-scripts.html'"></ng-include>
<ng-include src="'components/form-editor/field-properties-dialog-definition-scripts.html'"></ng-include>
<ng-include src="'components/form-editor/field-properties-scripts.html'"></ng-include>
<ng-include src="'components/lib/custom-handler/custom-handler-tooltip-script.html'"></ng-include>
<!-- alert notification -->
<div ng-include="'components/alerts/alert.html'"
ng-controller="AlertController as vm">
</div>
<!-- navigation bar -->
<navbar></navbar>
<!-- main container -->
<div id="main-container"
ng-controller="MainContainerController as vm"
ng-style="{ top: vm.getTop(), height: vm.getHeight() }">
<ng-view></ng-view>
</div>
<!-- loading status panel -->
<div ng-include="'components/loading/loading.html'"
ng-controller="LoadingController as vm">
</div>
<!-- pre-bootstrap loading status panel -->
<div class="startup-loading">
<span class="fa fa-spinner fa-pulse fa-3x fa-fw"></span>
</div>
<!-- pre-bootstrap error status panel -->
<div class="startup-error">
<span class="fa fa-exclamation-circle fa-3x fa-fw"></span>
<div id="startup-error"></div>
</div>
<script type="text/javascript">
myTest();
$( document ).ready(function() {
myTest();
});
</script>
</body>
</html>
What browser are you using?
I've seen something similar happen in Firefox, meanwhile the same is working in other browser.
$(document).ready() not firing after redirect with window.location
I'm using JQuery Mobile, and now I would like to navigate through pages with the minimum of loading amount of scripts everytime a page is being loaded, I mean that I would like to import only ONCE all the general scripts of all the pages (JQuery.js, jquery_mobile.js, main.js etc...) and
So I have an index.html with the following code :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title>Hybrid App</title>
<link rel="stylesheet" href="jqueryMobile/jquery.mobile-1.4.4.css" />
<link rel="stylesheet" href="jqueryMobile/jquery.mobile.icons-1.4.4.css" />
<link rel="stylesheet" href="css/jquery.mmenu.css" />
<link rel="stylesheet" href="css/main.css" />
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="jqueryMobile/jquery.mobile-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.mmenu.min.js"></script>
<script type="text/javascript" src="js/initOptions.js"></script>
<script type="text/javascript" src="sharedResources/customersObject.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/messages.js"></script>
</head>
<body style="display: none;">
<div data-role="page" id="page">
<link rel="stylesheet" href="css/pages/splash-view.css" />
<div data-role="header" id="header" data-position="fixed"></div>
<div data-role="content" id="pageContent">
<div id="splash-wrapper">
<div class="splash-content">
Login
</div>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed"></div>
<nav id="menu">
<ul data-role="listview" data-inset="true">
<!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->
</ul>
</nav>
<script src="js/pages/splash-view.js"></script>
</div>
</body>
so when clicking on the link I go to an external HTML file located in : pages/faqs-view.html with the following code :
<div data-role="page" id="page" data-url="pages/faqs-view.html">
<link rel="stylesheet" href="css/pages/faqs-view.css">
<div data-role="header" id="header" data-position="fixed"></div>
<div data-role="content" id="pageContent">
<div id="faqs-wrapper">
<div class="faqs-content">
<div data-role="collapsible-set" data-corners="false" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" id="faq-set">
</div>
</div>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed"></div>
<nav id="menu">
<p class="employee-name">Welcome, Ali</p>
<ul data-role="listview" data-inset="true">
<!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->
</ul>
</nav>
<script src="js/pages/faqs-view.js"></script>
The problem is that when loading the faqs-view.html page, I can see that none of the scripts included in the <head> are being executed, I have tried to put them after the <body> tag, but it's the same, BUT the CSS files are being interpreted.
How can I achieve that ? Thank you.
Worklight-based applications are Single Page Applications. This means you should never navigate away from the index.html. Doing so will cause the app to lose its context to the Worklight framework, thus it will begin to fail.
If you'd like to add multi-page navigation to the application, you can do so using the API provided by 3rd-party frameworks. Here you are using jQuery Mobile.
You've changed the loading order of scripts. You shouldn't.
Use the Worklight Studio wizard in order to create an app template with jQuery Mobile (new project > new hybrid application (click on "configure javascript libraries" > select the library you would like to add))
Keep initOptions.js, main.js and messages.js where they are by default, at the bottom
The index.html you get is your template with jQuery Mobile
If you want to replace the bundled jQuery, you need to comment out (slide #6) the following script tag: <script>window.$ = window.jQuery = WLJQ;</script>. Worklight is bundled with jQuery 1.9.x.
For a bare-bones example of multi-page navigation in a Worklight-based application, using jQuery Mobile, take a look at this project.
As you navigate between pages, you only replace the contents of the data-role="page". The scripts have already been loaded. You can load additional scripts per where required when loading a specific page.
They are executed in the order you put them on the page.
window.$ = window.jQuery = WLJQ;
Cannot be executed before jQuery is included.
Edit:
When you load a new page without the header it's clear that it won't be excecuted because it is not there.
When you replace html in your page you should look at the "on" function for events.
I am developing a jquery mobile website and i have some problems running javascript code.
I have a home page , index.html , which is basically a listview to navigate to various html pages. I use the single-page structure for my pages , that means every 1 html file contains 1 page. Now from the home page , i navigate to another page where i am using a persistent NavBar with a horizontal button with 2 options. One is photos and the other is multimedia.
For the photos i am using the Javascript FB API , to download the photos from a FB Page and then with the PhotoSwipe Plugin i present them to the user.
The problem..
If i run the photos.html page , it will work well and load the albums. There are 2 things that my javascript does. 1) Use FB API to get albums, photos , cover photos etc.. 2) Dynamically create a listview with this albums and their photos. In this case both work great!
However when i am in my index.html and i navigate through the listview to the photos.html (photos is the default chosen button from the persisent NavBar) the Javascript code doesnt work. Like is not called at all..
The index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
<link rel="stylesheet" href="themes/EspacioJoven.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="themes/custom.css" />
</head>
<body>
<div data-role="page" id="home" data-theme="a">
<!--
<div data-role="header">
<h1>Application Title</h1>
</div>
-->
<div data-role="content">
<h2 id="banner">Joven Mobile</h2>
<div class="main_menu">
<ul data-inset="true" data-role="listview">
<li><img src="themes/icons/news.png" alt="Information" class="ui-li-icon">Esen</li>
<li><img src="themes/icons/research.png" alt="Information" class="ui-li-icon">Laen</li>
<li><img src="themes/icons/staff.png" alt="Information" class="ui-li-icon">Multimedia</li>
<li><img src="themes/icons/students.png" alt="Information" class="ui-li-icon">Sanen</li>
</ul>
</div>
</div>
<!--
<div data-role="footer">
<h4>Page Footer</h4>
</div>
-->
</div>
</body>
</html>
The photos.html looks like :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
<link rel="stylesheet" href="themes/EspacioJoven.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="themes/custom.css" />
<!-- Needed from PhotoSwipe Plugin -->
<link href="photoSwipe/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="photoSwipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoSwipe/klass.min.js"></script>
<script type="text/javascript" src="photoSwipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<script type='text/javascript' src='photoSwipe/photoSwipeCall.js'></script>
<!-- Needed from PhotoSwipe Plugin -->
</head>
<body>
<div data-role="page" id="photos" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">
<div data-role="header" data-id="fixedNav" data-position="fixed">
<h1>Application Title</h1>
Back
<div data-role="navbar">
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" class="albums">
<!-- Here the albums are created through javascript (createAlbums.js) -->
</ul>
<button type="button" id="loadMoreAlbums">More Albums...</button>
</div><!-- /content -->
</div><!-- /page -->
<div id="fb-root"></div>
<script type='text/javascript' src='javascript/createAlbums3.js'></script>
</body>
</html>
As you see i call my javascript in the end. Any ideas why its never called? If i refresh the page , that means run the photos.html , it will load normally.
Actually i also look at the "elements" table from the debugger. When im in the index.html page the html elements seem all correct. When i do the transition though to the photos.html page , by looking at the elements table i see that they dont change! The title does change but the rest stays the same which is incredible?! How on earth can that happen? It looks like is the same page , with the same css and javascript sources , but should be different! As you see i use photoSwipe javascript , css etc! Only if i reload the page the elements are correct. Please any ideas? I have no idea what is happening here.
Also for some reason i get a 304 Status , Not Modified through the transition , from one page to another.
The reason for this is because when you navigate to a page in jQuery Mobile it by defaults will try and pull the JQM page (data-role="page" (if there is no data-role='page' then it will pull the body)) via ajax and attaches it to the current page's DOM, the thing is it will only pull the JQM page (or body if there isn't any) and ignore everything (aside from the title) outside of it meaning your JavaScript is not going to get called.
When you refresh the page then a normal HTTP call is made and the entire page is loaded so your code is executed.
In order to have your JavaScript called you need to either have the relevant script's on your first page or you can have it withing your JQM page wrapper and it will then be pulled along with it.
<div data-role="page" id="photos" data-theme="a"
data-add-back-btn="true" data-back-btn-text="Back">
....
<script type='text/javascript' src='javascript/createAlbums3.js'></script>
</div><!-- /page -->
Have a look at the following Q&A from the official docs for more details.
I've added a reference to Jquery Mobile on my website (http://www.simpleprods.com) to get the events vmousedown, vmouseup and such. I only need those, though JQuery mobile annoyingly added some ugly, automatic loading message to my web page. It's 100% coming from the JQuery mobile. I only want vmousedown, vmouseup and vmousemove, I don't need any loading message and that orange box. I already found out how to cancel the message but the orange box just can't be rid of.
Anyone knows what to do? I will be glad if someone can tell me how to just get vmousedown, vmouseup and vmousemove without all the other stuff that JQuery mobile has...
You can rebuild jQuery Mobile framework to have only functionality you need.
Go to this site:
http://jquerymobile.com/download-builder/
select:
Virtual Mouse (vmouse) Bindings
after that just click Build My Download.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="jquery.mobile.custom.js"></script>
<script>
$(document).on('vmousedown', '[data-role="content"]', function(){
alert('asdas');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div><p></p>
<div data-role="content" style="height: 100px; width: 500px; background: #aabbcc;">
<div data-role="popup" id="initialpopup" data-overlay-theme="a" data-theme="a">Foobar</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
You only need to provide a jquery.mobile.custom.js file from builder tool.
Make sure you aren't including scripts inside the <body> tag. That can cause the loading tag to show up when it shouldn't.
I'm quite new in html5 & js and i have some troubles to develop a jQuery Mobile exemple.
From this, i'm just calling another header (partial) when a product is selected to render.
_header2.php:
<!DOCTYPE html>
<head>
<title>h2: <?php echo $_GET['product']; ?> </title>
<meta charset="UTF-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
<link rel='stylesheet' href='assets/css/styles_mob.css'/>
<link rel='stylesheet' href='assets/css/styles.css' />
<link href='assets/css/jquery-mobile.css?<?php echo filemtime("assets/css/jquery-mobile.css");?>' type='text/css' rel='stylesheet' />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.min.js'></script>
<script type='text/javascript' src='http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js'></script>
</script>
<script type='text/javascript'>
function mymessage(msg)
{
if(!msg) msg="?";
alert(msg);
}
</script>
</head>
<body onload="mymessage('onload !')">
<div data-role="page" id="Home">
<div data-role="header" data-theme="b">
Home
<h1> <?php echo $title?></h1>
</div>
<div data-role="content">
Header code appair correctly on the generated page but js call of mymessage() in body tag doesn't work. Same problem when i try to call it from another partial code (_product.php) :
<li><a href='#Gallery1' onClick='mymessage(\"press gallery\")' >...</li>
...concole return: referenceError: mymessage is not defined
Everything rock only when a refreshing the current page !!
I've rode some posts (1, 2, 3) with similar problem but i'm still lost.
Any idea please ?
You're missing the <html> tag. You also have an extra </script> closing tag. This could potentially lead to your error.
There are all sorts of strange coding styles and errors like missing the <html> tag, an extra </script> closing tag, missing the closing tag on your anchor in <li><a href='#Gallery1' onClick='mymessage(\"press gallery\")' >...</li>, and list items should be inside <ul></ul>.
Try this code, it should work. Then analyze it and learn!
<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>h2: <?php echo $_GET['product'];?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
<link rel="stylesheet" type="text/css" href="assets/css/styles_mob.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<!-- this next line makes me wonder.. why?! -->
<link rel="stylesheet" type="text/css" href="assets/css/jquery-mobile.css?<?php echo filemtime('assets/css/jquery-mobile.css');?>">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script type="text/javascript">//<![CDATA[
function mymessage(msg){
msg=msg||'?'; //the usual way to provide defaults
alert(msg);
}
window.onload=function(){ //setting your onload event.
mymessage('onload !');
};
//]]>
</script>
</head><body>
<div data-role="page" id="Home">
<div data-role="header" data-theme="b">
Home
<h1><?php echo $title;?></h1>
</div>
<div data-role="content">
<ul> <!-- Here is your link, working -->
<li>...</li>
</ul>
<!-- added some closing tags for demo-sake -->
</div></div>
</body></html>
PS: since all the beginner errors and the fact that this is just part of your code, I strongly assume the rest of your code has such strange error's to.
Good Luck!!
UPDATE:
Depending on what you'd like to accomplish on page-load, jQuery Mobile might completely change the ballpark.
As can be read in jQuery Mobile's documentation:
By default all navigation within jQuery Mobile is based on changes and
updates to location.hash. Whenever possible, page changes will use a
smooth transition between the current "page" and the next, whether it
is either already present in the DOM, or is automatically loaded via
Ajax.
Another quote from the documentation:
Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This means that the regular techniques described will only fire when you first visit the page, not while navigating the page ajax-style.
Thus in jQuery mobile you must use pageinit or pageshow or one of the other events that are explained in the documentation that suit your exact purpose.
Example how to get pageinit fire for every page (tested live on your site):
$(document).on('pageinit','[data-role=page]', function(){
mymessage('hihi');
});
Or alternatively you could turn off ajax in jQuery Mobile, like this (depends on version):
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});