I'm tasked to execute specific page javascript on pagechange in Jquery Mobile (Such as geolocate the user on one page or show a Google map on another page)
Its really not clear how to execute javascript after a pagechange but i'm almost there, i was able to use
$(document).bind('pageinit', function(event){
loadGmaps();
geolocate();
});
But the problem is that this code executes on each page change/page init and if i'm not on a page that has a #map tag, it just executes code for nothing. Worst? Jquery keeps pages loaded in memory but hides them. So if i change page, it can reload the map 16 times in a row for nothing.
I'm really confused as to how you are supposed to bind specific page javascript in a jquery mobile loaded page. I'm lurked all around the web and i'm sure i'm not the only one looking for that specific trick...
Thanks
EDIT
I changed my code to reflect Jasper's solution, and it works fine except for the geolocation:
$(document).on('pageinit', '#wp-post-id-70', function(event){
geolocate();
});
$(document).on('pageinit', '.wp-post-type-spa', function(event){
loadGmaps();
});
The maps load fine on each page i visit that is a spa, but when i load a spa page from a fresh load, if i click on the logo to go back to the home page, it loads the home page and then fires the "geolocate" function but nothing happens in terms of geolocation:
function geolocate()
{
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position){
$('#near_spa').load('?latitude='+position.coords.latitude.toString()+'& longitude='+position.coords.longitude.toString()+' #near_spa > *');
}
);
}else{
alert('Votre navigateur ne supporte pas la géolocalisation ou refuse l\'accès aux données de localisation');
}
}
The code really goes up to the navigator.geolocation.getCurrentPosition, it gets called but then pffff, nothing. If i reload the home page manually with F5, i now get the geolocation request...
EDIT
Never mind that "map" loads fine on each page, it doesn't anymore, probably me and my brain being too tired...
Therefore, the
$(document).on('pageinit', '.wp-post-type-spa', function(event){
loadGmaps();
});
Doesn't load the maps anymore at all and yes, i verified, the pages do feature a wp-post-type-spa class...
If you have code that only runs once per pseudo-page, then use the pageinit event, which only runs once every time a pseudo-page is added to the DOM.
You can also target specific pseudo-pages in your bind call:
$(document).on('pageinit', '#some-map-page', function(event){
loadGmaps();
geolocate();
});
This will only run when the pageinit event fires on an element with the ID of some-map-page. You could for example add a class to each pseudo-page element where you want to run the map code:
<div data-role="page" id="some-map-page" class="map-page">...</div>
Which would work with the following event binding:
$(document).on('pageinit', '.map-page', function(event){
loadGmaps();
geolocate();
});
Notice that I'm using .on() as a delegated event handler, which is very useful when using jQuery Mobile as you can't ever be sure when a pseudo-page exists in the DOM.
Related
In my multipage jqm document there is a page with the id #internal. At some point I do
$('#internal').remove();
The page is removed but
$('body').on('pagecontainerremove',function(e,ui){console.log(ui.toPage);console.log('page removed');})
does not fire. Googling for pagecontainerremove and experimenting with various ways of removing the page has not yielded anything useful.
The remove events pageremove and its' "successor" pagecontainerremove are fired on external pages in Single Page Model. jQuery Mobile removes external pages from DOM upon navigating away off them. By default, jQuery Mobile doesn't cache external pages and binds bindRemove to remove them. However, if an external page is cached data-dom-cache="true", the remove event won't be attached to it to remove it from DOM.
Although pageremove is replaced by pagecontainerremove, the latter doesn't fire and it is definitely a bug in jQuery Mobile 1.4.
/* doesn't fire */
$(document).on("pagecontainerremove", function (e) {
console.log("pagecontainer event: " + e.type);
});
/* does fire */
$(document).on("pageremove", function (e) {
console.log("page event: " + e.type);
});
Demo
Nevertheless, it is possible to use bindRemove in Multi-Page Model to let jQuery Mobile removes it once hidden. First, add data-external-page="true" to page div that you want to be removed by jQuery Mobile, and then flag it for removal $("#pageID").page("bindRemove").
<div data-role="page" id="pageID" data-external-page="true">
$(document).on("pagecreate", "#pageID", function (e) {
$(e.target).page("bindRemove");
});
Demo
Adding my bindings to the pageinit event like so:
$('#mypage').on("pageinit", function () {
$('#login-sumbit').on('click', function () {
console.log('button clicked');
});
});
I would expect pageinit to bind the click event once only. But what happens in my single page app is that the button is binding every time the page is loaded even when clicking back.
This results in undesirable multiple duplicate binds. Any ideas on what event to use to bind only once in my single page app, so that loading the page again (back button, loading inline page) in the same session doesn't re-bind?
Looks like I found the answer myself, turns out quite rightly pageinit fires every time the page is loaded even though it's not reloading from the server, otherwise what would fire when a new page is shown.
pageinit is the right event but I need to use .one not .on, .one will bind one time only.
$('#mypage').on("pageinit", function () {
$('#login-sumbit').one('click', function () {
console.log('button clicked');
});
});
Now everything works as expected. Better still I've found you can use .one with the pageinit event for even more control over your bindings and data loads perfect for my requirements.
http://api.jquery.com/one/
You could use:
$('#login-sumbit').off('click').on('click', function(e) {
console.log('button clicked');
});
(I have already asked this question; here I am adding more details)
I have return a jQuery which returns the text entered in input element on change event. This jQuery works fine in FireFox but fails in Internet Explorer (IE9).
<script>
$(document).ready(function () {
$("#UserName").change(function () {
alert("Text Entered Is :"+$("#UserName").val());
});
});
</script>
1) I am using ASP.NET MVC; to reach the page having above jquery I am using Html.ActionLink
2) On IE when I reach on the page of above jQuery it does not work; but when I press F5 and refresh the page it works.
3) On Firefox I do not need to refresh the page; it works on very first attempt.
Please help...
The $(document).ready() event depends on an event called DOMContentLoaded (in Chrome, not really sure about firefox, but it is there by some name).
This event is fired as soon as the HTML has been loaded and all the relevant files have been brought in (the CSS and the JS files).. Chrome, Safari (WebKit) and Firefox(Gecko) are pretty predictable at firing this particular event. It bubbles up the stack like clockwork and once caught, you can play fiddle with it, for all anyone cares.
However, as far as IE is concerned, up till version 7 (I think) they never implemented this event. Given that, the implementation in the recent versions is not so efficient as well.
I have faced this problem time and again.
One workaround for this that has worked everytime is to fire the event manually at the end of the HTML:
<script type="text/javascript">
try{jQuery.ready();}catch(e){}
</script>
Hope this helps
Edit
A great way of seeing whether the event gets fired is to add somekind of action in the code. SOmething like:
<script>
$(document).ready(function () {
alert("Loaded");
$("#UserName").change(function () {
alert("Text Entered Is :"+$("#UserName").val());
});
});
</script>
alert blocks the execution of the code, due the single threaded nature of Javascript. Therefore, you can use this to get a pseudo-stacktrace of your code.
In my jquery-mobile (1.0RC2) application, I have two pages: test1.html, test2.html
The first page, test1.html, includes an collabsible-set, where I expand one collabsible item via script in the pageinit event listener (tried both pageshow and pageinit):
$('#page1').live( 'pageinit', initPage);
function initPage() {
alert('initPage!'); // this line seems to be always getting executed
$('#my_expandable').trigger('expand'); // ... but this line doesn't when coming back via a back link!
}
This works fine on the first call of the page.
Then I have a link that leads me to the second page test2.html, as follows:
<script>
function goPage2(criteria) {
$('#page1').die( 'pageinit', initPage);
$.mobile.changePage( "test2.html", {reverse: false, reloadPage: true} );
}
</script>
page 2
When I then go back to the first page via
<script>
function goPage1() {
$.mobile.changePage( "test1.html", { reverse: true, reloadPage: true} );
}
</script>
test
only the alert message in the pageinit event listener of test1.html is executed, but the collapsible is not being expanded through the
You can see the sample in action here: http://bit.ly/rr0dq3
How to reproduce the problem:
load test1.html at http://bit.ly/rr0dq3
you will get an alert message, and the collapsible will be expanded
click on the button 'GoTo page2' and you will come to the second page test2.html
on this second page, click on the gray button 'test', and you will come back to the first page test1.html
the problem now: as you can see, the alert command of the pageinit event of test1.html is being executed, but expanding the collapsible isn't - why not? Obviously the pageinit event listener method is being entered properly, but only the collapsible seems to have a problem here.
I think it might be a bug (filed a report here https://github.com/jquery/jquery-mobile/issues/2791), but maybe somebody else has an idea for that.
Workaround:
Both the alert and the collapsible expanding is being executed when I use a different way to to open the second page test2.html, using
window.location.href = "test2.html";
instead of
changePage(...);
But it's not very satisfying. Why does it not work properly if I use the the page injection way? I already call the die() method when I open the different pages in order not to have multiple pageinit event listeners keeping hanging around.
Have you tried using the data-attribute for collapsible content areas that makes them load expanded:
data-collapsed="false"
Here is a link to the docs for this behavior: http://jquerymobile.com/demos/1.0rc2/docs/content/content-collapsible.html
I am trying to understand the following jQuery Mobile example.
$( '#aboutPage' ).live( 'pageinit',function(event){
alert( 'This page was just enhanced by jQuery Mobile!' );
});
What is #aboutPage in this context? What is the object pageinit is binding to?
aboutPage should be the id of the page.(i.e.div with data-role="page").live() attaches the funcion you have defined which contains thealert to the pageinit event of aboutPage.pageinit is triggered on a page when the page is initialized.
So in short What your code does is
it will execute the alert statement when aboutPage is initialized
The page might be initialized even if it is not in view.So even before you go to that page,the pageinit of the div will be triggered.If you are loading another html file as the new page pageinit for that page will be triggered only when you load that page into view.So,in your case if you want to do something when your div comes into view,you can try the pagebeforeshow and pageshow.pagebeforeshow will be triggered on the new page before animation starts and pageshow after animation is over.