Hi I have two html pages in my mobile application as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Index
</div>
</div>
</body>
</html>
my example.html is like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Test
</div>
<script type="text/javascript">
window.onbeforeunload = function(evt) {
console.log ("*****************");
}
</script>
</div>
</body>
</html>
Now suppose on click of Index button I goes to example.html page. on click of back button in example.html it again goes to index.html. everything is fine, but it does not print console.log ("********"); If i press one more back on index.html then it prints it, what I want is it should print that on click of back button when I am on example.html.
Whats wrong in above code? and why it behave like this? Any suggestion will be appreciated thanks in advance.
In Jquery Mobile standard use you basically stay on the same page during your hole experience on the site. "Changing" page basically adds content dynamically to the current document, meaning it will not trigger your onbeforeunload event.
You can however use jquery mobile events, which one depends on exactly what kind of action you want to take. Most probably you would be looking at pagebeforehide or pagehide
What you can do is add an event to the back button.
If you have a button :
<button id="backButton"> Go Back </button>
you can add via jquery following event
$("#backButton).click(function(){
console.log ("*****************");
});
Keep in mind, if you click a button, a post will happen and the page will be refreshed. So you should add the log function inthe document ready of the other page.
So if the example.html page loads, you just fire this event
$(function(){
//All code that starts when the page is fully loaded.
console.log ("*****************");
});
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 have two simple html files which has a link in body and a log in JavaScript. In A.html, it is a link to jump to B.html and a console.log("a 123"); in JavaScript. However, the "a 123" message will only be showed when refresh the browser but not be executed from a link. For example, if i click the link Go to a in b.html, the message "a 123" will not be showed.
Any idea?
-----A.html-------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
</style>
</head>
<body>
<div data-role="page" id="a">
<div data-role="main" class="ui-content">
<a href='b.html'>Go to b</a>
</div>
</div>
<script>
console.log("a 123");
</script>
</body>
</html>
-----B.html-------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
</style>
</head>
<body>
<div data-role="page" id="b">
<div data-role="main" class="ui-content">
<a href='a.html'>Go to a</a>
</div>
</div>
<script>
console.log("b 123");
</script>
</body>
</html>
Bit of searching and I found the answer! Apparently it's a 'feature' of Jquery Mobile. It's using an Ajax navigation system. So it stays singlepage.
From the docs:
jQuery Mobile includes a navigation system to load pages into the DOM via Ajax, enhance the new content, then display pages with a rich set of animated transitions. The navigation system uses progressive enhancement to automatically 'hijack' standard links and form submissions and route them as an Ajax request.
Maybe it's a good idea to read the intro of jQuery mobile: http://demos.jquerymobile.com/1.4.5/intro/
That's because the code your code only executes on the page load. If you want it to execute on an event, you need to wrap it in a function and call the function in the onclick attribute on your link.
I have some troubles with JQuery and JQuery mobile.
When i click on the links in my page, i have this error :
Uncaught Error: cannot call methods on page prior to initialization; attempted to call method 'bindRemove'
I have tried to change the position of the link rel and scripts, but it breaks my design...
Someone have an idea ?
Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Accueil</title>
<!-- CSS -->
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- CSS splashscreen -->
<link rel="stylesheet" type="text/css" href="css/wemind/splashscreen.css" />
<link rel="stylesheet" type="text/css" href="css/wemind/styles_wemind.css" />
<!-- JS -->
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Scripts splashscreen -->
<script src="js/jquery.splashscreen.js"></script>
<script src="js/script_splashscreen.js"></script>
</head>
<body>
<div id="promoIMG" />
<div data-role="page" id="main-page">
<div id="actionbar-main"><img src="img/ic_launcher.png" /></div>
<p class="text-accueil">Qui êtes-vous ?</p>
<div id="student-link"><img src="img/ic_student.png" /></div>
<p class="wemind-font">Student</p>
<div id="horiz-sep-main"><img src="img/ic_sep.png" /></div>
<div id="parent-link"><img src="img/ic_teacher.png" /></div>
<p class="wemind-font">Teacher</p>
</div>
Thank you in advance
Something in your js/ scripts is trying to act on a Mobile widget before it's initialized. Find whatever function is using bindRemove as a parameter and call it without any arguments first to initialize its widget before you call bindRemove.
I tried this :
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
window.location = $(this).attr("href");
});
});
</script>
i put this in the
but when i logout, i'm redirected to this page and the problem appear again...
I should be able to click a link without problem, it's very odd with a code that simple !
I have an issue with cordova that i don't understand how to handle relatively to the opening of the same page more than once.
Suppose that i have two basic html files like this with cordova and jquery mobile support:
index.html
<!DOCTYPE html>
<html>
<head>
<title>
ciao
</title>
<meta charset="UTF-8">
<!-- cordova -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<!-- jquery mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.css" />
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/jquery-mobile/jquery.mobile.js"></script>
<!-- initialization files -->
<script src="js/mainjs.js"></script>
</head>
<body>
<section id="index" data-role="page" data-fullscreen="true">
<div data-role="content">
/*...*/
<a href="mappa.html">
<img src="img/map.png" />
</a>
/*...*/
</div>
</section>
</body>
</html>
mappa.html
<!DOCTYPE html>
<html>
<head>
<title>
mappa
</title>
<meta charset="UTF-8">
<!-- cordova -->
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<!-- jquery mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.css" />
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/libs/jquery-mobile/jquery.mobile.js"></script>
</head>
<body>
<section id="mappa" data-role="page" data-fullscreen="true">
<div data-role="content">
/* code*/
</div>
</section>
</body>
</html>
Now i need to load data in the mappa.html file so i use an handler that i choose to load in the mainjs.js file included in the index like this.
$(document).ready(function() {
console.log("deviceready");
$(document).on("pageshow","#mappa",function(){ //pageshow is thrown each time
/*code*/
});
});
If i use the code above each time i load the page all the handler start again and it's very user unfriendly in case of long operation like data downloading.
So i tried this handler
$(document).one("pageshow","#mappa",function(){ });
But the second time i enter in the mappa.html page simply is blank because the handler does't work 2 times.
So how can i maintain the page loaded?
EDIT: In this specific case i need to load a map and with this code
$(document).on("pageshow","#mappa",function(){ //pageshow is thrown each time
console.log("dentro script");
//setting div height
$("#map_canvas").height( $(window).height() - $("div[data-role='header']").height() - 32 );
//since page show is thrown each time i use a session storage variable
//so i make the init map only one time
if( !sessionStorage.mapinit ) {
console.log("----------mapinit is not set");
sessionStorage.mapinit=1;
console.log("----------mapinit=1");
// Initialize the map plugin
var mapDiv = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap(mapDiv);
map.setMyLocationEnabled(true);
var pisaCenter = new plugin.google.maps.LatLng(43.723072, 10.396585);
map.setCenter(pisaCenter);
map.setZoom(13);
map.one(plugin.google.maps.event.MAP_READY, onMapInit);
} else {
console.log("----------map already set");
var mapDiv = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap(mapDiv);
}
});
and it works fine thanks to
map.one(plugin.google.maps.event.MAP_READY, onMapInit);
that execute the onMapInit function only once.
But in a case like this one
<body>
<script>
$.support.cors=true;
$.mobile.allowCrossDomainPages = true;
$.getJSON('http://.../prestazioni.php?prestazioni=tutto&callback=?',function(data){
$.each(data, function(i, dat){
$("#listview").append('<li>'+dat.rep+'</li>');
});
$('#listview').listview('refresh');
});
</script>
</body>
it's absurd that i need to download data every time i open the page
The main issue is related to jquery mobile and how it load pages.
So in my case i use multiple html files and jquery does't cache the open pages; this behavoour can be overwritten adding data-dom-cache="true" at the page like this
<section id="prestazioni" data-role="page" data-fullscreen="true" data-dom-cache="true">
This works very well. The page remains loaded but it's also possible to modify it using the handler.
There is also an easy route that simply consist in the creation of a single html files with multiple pages. in this case the DOM is always the same and the pages are all cached.
I have an initial init page in my application that acts as an entry point and loads my login page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile- 1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<!-- initialse and load the application -->
<div data-role="page" id="init">
<script type="text/javascript">
$('#init').live( 'pageinit', function() {
window.location.href="views/login.html";
});
</script>
</div>
</body>
</html>
When my login page loads there is a button which loads a dialog. This button initially doesn't work and only loads the dialog when the page is manually refreshed. Why does this happen and what can I do to enable the button/dialog immediately upon page load.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<!-- login page -->
<div data-role="page" id="login">
<!-- css -->
<link rel="stylesheet" href="../css/global.css" />
<link rel="stylesheet" href="../css/login.css" />
<!-- page markup -->
<div data-role="header">
Settings
</div>
</div>
<!-- end of page -->
<!-- settings dialog page -->
<div data-role="dialog" id="settings_dialog">
<!-- page markup -->
<div data-role="header" style="text-align: left;">
</div>
<div data-role="content">
</div>
</div>
<!-- end of page -->
</body>
</html>
Not sure if you've fixed this but it seems to be something to do with the DOM cache & AJAX.
I'm not sure how you'd do it, but try setting the ajax: false when you do the window reload. Alternatively you could redirect via server side (I'd recommend this as it'll still work if the user has JS turned off.
Why I figured this out was because I had a page with a list on it, the list items sent me to a new page which has a jump link on it (#settings_dialog). Setting the data-ajax="false" on each list item somehow 'refreshed' the DOM and forced the second page to load 'fresh' and voila - my dialog works 100% now.
So, in short, turn off the AJAX feature or (better) redirect from serverside & be happy!