Menu
I have 2 pages that I linked using swipeleft and swiperight event(back and forth) but when I swipe to the other page, jquery doesn't fire the pageinit event and I am left with just the header and footer. Should I be using the changePage event or should I be using the loadPage event? I know that there is a bug in the other version of jquerymobile where pageinit event does not fire but I am already using the RC1 which has already solved it but the event is still not firing. what is stopping it from firing? Thanks in advance.
Code is as follow:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>esports</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<link rel="stylesheet" href="jquery.zrssfeed.css" />
</script>
<style>
</style>
</head>
<body>
<!-- index -->
<div data-role="page" id="index">
<div data-role="header">
<h1>esports times</h1>
</div>
<!--/header-->
<div data-role="content" id="content">
<div id="currentFeed">teamliquid. skgamin</div>
<ul id="rssFeed" data-role="listview">
</ul>
</div>
</div>
</body>
</html>
<!-- load javscripts here-->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"> </script>
<script src="jquery.zrssfeed.js"></script>
<script>
$('#index').bind("pageinit", (function () {
$('#rssFeed').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
limit: 10,
date: false,
});
}));
$('#index').bind("swipeleft", function () {
$.mobile.changePage("teamliquid.html", "slide", true, false);
});
</script>
<!-- /javascript-->
631
Change page is what your looking for. Load page just loads it into dom so you can manipulate before you actually show the page.
When binding to page init make sure your binding your pageinit event using a unique id. They cannot both have id="#index". Also make sure you bind page init to each page. Your code would only have the pageinit firing for just the #index page and not the teamliquid.html.
Use the following in the <head></head> of your documents:
$(document).on('pageinit','#index', function(){
$('#rssFeed').rssfeed('http://feeds.reuters.com/reuters/oddlyEnoughNews', {
limit: 10,
date: false,
});
});
$(document).on('pageinit','#otherpage', function(){
... This would be for the other page you are referring to....
});
$(document).on('swipeleft','#index', function(){
$.mobile.changePage("teamliquid.html", { transition: "slide" });
});
$(document).on('swiperight','#otherpage', function(){
$.mobile.changePage("index.html", { transition: "slide" });
});
or to get pageinit for fire for every page
$(document).on('pageinit','[data-role=page]', function(){
....ground breaking code...
});
As of jquery 1.7 bind, live, and delegate all use the .on() method. It is the recommended way of binding your pageinit for JQM. You can also do cool things like replacing '#index' with '[data-role=page]' to make your code fire on every page. Here is a JSfiddle demonstrating that this indeed did work. http://jsfiddle.net/codaniel/cEWpy/2/
75
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
