We Keep Coding

How to link to internal pages using changePage?

I currently have one index.html file with 3 pages in (with separate IDs). I also have 3 buttons which are displayed on all 3 pages, which I would like to link to each page when clicked. However, the link only works from the index.html page and once on another page, the events are no longer handled.
Basically when I'm on page 2 or 3, the click events aren't handled. (Tested with console.log)
html:
<div data-role="page" id="article1">
<div data-role="header" data-theme="a" data-position="fixed">
<h1>Notes</h1>
</div>
<div id="global-footer" data-role="footer" data-position="fixed" data-theme="a" data-id="main-footer" class="ui-bar">
<div id="footer-container">
<button id="notespagebtn" class="notespagebtn" data-role="none">Notes</button>
<button id="reminderspagebtn" class="reminderspagebtn" data-role="none">Reminders</button>
<button id="listspagebtn" class="listspagebtn" data-role="none">Lists</button>
</div>
</div>
</div>
<div data-role="page" id="article2">
<div data-role="header" data-theme="a" data-position="fixed">
<h1>Reminders</h1>
</div>
<div id="global-footer" data-role="footer" data-position="fixed" data-theme="a" data-id="main-footer" class="ui-bar">
<div id="footer-container">
<button id="notespagebtn" class="notespagebtn" data-role="none">Notes</button>
<button id="reminderspagebtn" class="reminderspagebtn" data-role="none">Reminders</button>
<button id="listspagebtn" class="listspagebtn" data-role="none">Lists</button>
</div>
</div>
</div>
<div data-role="page" id="article3">
<div data-role="header" data-theme="a" data-position="fixed">
<h1>Lists</h1>
</div>
<div id="global-footer" data-role="footer" data-position="fixed" data-theme="a" data-id="main-footer" class="ui-bar">
<div id="footer-container">
<button id="notespagebtn" class="notespagebtn" data-role="none">Notes</button>
<button id="reminderspagebtn" class="reminderspagebtn" data-role="none">Reminders</button>
<button id="listspagebtn" class="listspagebtn" data-role="none">Lists</button>
</div>
</div>
JS:
$("#notespagebtn").click(function() {
$.mobile.changePage("#article1");
});
$("#reminderspagebtn").click(function() {
console.log("test");
$.mobile.changePage("#article2");
});
$("#listspagebtn").click(function() {
console.log("test");
$.mobile.changePage("#article3");
});

Buttons have same ID for all 3 pages. give them different Ids or use class to bind the event.
Jsfiddle
$(".notespagebtn").click(function() {
$.mobile.changePage("#article1");
});
$(".reminderspagebtn").click(function() {
console.log("test");
$.mobile.changePage("#article2");
});
$(".listspagebtn").click(function() {
console.log("test");
$.mobile.changePage("#article3");
});

Multiple layers of tabination within a webpage

I have a question about how to add layers of tabination inside one webpage.
Currently, the pages which I would like to edit have a jQuery tab function to swap between tabs with different content. I would like to go one step further and have an encompassing tabination system with a page entry tab containing initial content and a button to the next tab; and inside the next tab have the current active tab function. Check out the picture if this is confusing:
Image for Visualization Edit: In the image the 'layers' should be 'sections'.
My current code: One layer of tabination
jQuery in header.php
<script>
$(function() {
$('.tab-panels .tabs li').on('click', function(){
var $panel = $(this).closest('.tab-panels');
$panel.find('.tabs li.active').removeClass('active');
$(this).addClass('active');
// Figure out which panel to show
var panelToShow = $(this).attr('data-panelid');
// Hide current panel
$panel.find('.tab.active').hide(0, showNextPanel);
// Show next panel
function showNextPanel() {
$(this).removeClass('active');
$('#'+panelToShow).show(0, function() {
$(this).addClass('active');
});
}
});
});
</script>
Tabs include file
Styled as a horizontal bar.
<div class="tabs-container">
<ul class="tabs">
<li data-panelid="panel1" class="active">Tab 1</li>
<li data-panelid="panel2">Tab 2</li>
<li data-panelid="panel3">Tab 3</li>
<li data-panelid="panel4">Tab 4</li>
</ul>
</div>
HTML of the webpage
I have wrapped each of the encompassing tabs as 'SECTIONS', and the inside tabs as 'TABS'. The header (containing the jQuery), and this page are called in another php file.
<div class="section-wrap">
<div class="container section active" id="section1">
<div class="row">
<div class="col-md-12">
<div>CONTENT</div>
<div class="button-container">
<span>BUTTON TO NEXT SECTION</span>
</div>
</div>
</div>
</div>
<div class="container section" id="section2">
<div class="container tab-container">
<!-- Incluce Tabs -->
<?php include(ROOT_PATH . "/inc/tabs.php") ?>
<div class="row tab active" id="panel1">
<div class="col-md-12">
<h2>SUBTITLE</h2>
<p>CONTENT</p>
</div>
</div>
<div class="row tab" id="panel2">
<div class="col-md-12">
<h2>SUBTITLE</h2>
<ul>
<li>CONTENT</li>
<li>CONTENT</li>
<li>CONTENT</li>
<li>CONTENT</li>
</ul>
</div>
</div>
<div class="row tab" id="panel3">
<div class="col-md-12">
<h2>SUBTITLE</h2>
<h3>SUB SUBTITLE</h3>
<p>CONTENT</p>
<h3>SUB SUBTITLE</h3>
<p>CONTENT</p>
</div>
</div>
</div>
</div>
</div>
<div class="mobile-breadcrumb">
<!-- Include Breadcrumb -->
<?php include(ROOT_PATH . "/inc/breadcrumb.php") ?>
</div>
</div>
<!-- END PAGE CONTENTS -->
<!-- Include Footer -->
<?php include(ROOT_PATH . "/inc/footer.php") ?>
I imagine the same jQuery script could be used to switch between sections, however I'm not sure how to implement this and would love some help. The user would not need to go back to the initial page entry 'section'. Also, the reason why I do not wish to use a different web page entirely is that the pages that this system will be implemented on are already 4 layers deep in the website.
I hope this isn't too confusing, thanks in advance! :)

Definitely not the best way to do this but here is my current solution:
jQuery in header
$(function() {
$('#section1').show().siblings().hide();
$('.section-button').find('a').on('click', function(e){
e.preventDefault();
$(this.hash).show().siblings().hide();
})
});
</script>
HTML of page
<div class="section-wrap">
<div class="container section" id="section1">
<div class="row">
<div class="col-md-12">
<p>CONTENT</p>
<p>CONTENT</p>
<span class="section-button">GO TO SECTION 2</span>
</div>
</div>
</div>
<div class="container section" id="section2">
<p>CONTENT</p>
<p>CONTENT</p>
</div>
</div>

Jquery Mobile Alert HTML5

I'm trying to open an alert type prompt when a link is clicked.
I have the following. Relevant code is near the bottom of the html.
$(document).ready function jqmAlert(title, message) {
// set up the 'alert' page..
$("#alert-title").html(title); // Insert the title
$("#alert-content").html(message); // Insert the dialog message
$(".ui-dialog").dialog("close"); // Ensure dialog behaviour
// Now open the page..
$.mobile.changePage("#alert", "pop", false, false);
function testAlert() {
jqmAlert("Hello", "A Hello Message");
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="lab2.js"></script>
<style type="text/css">.img {
display: block; margin-left: auto; margin-right: auto;
}
</style>
</head>
<body>
<div data-role="page" id="home" data-theme="a">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<img src="img/logo.png" alt="Logo"
width="150" height="120"/>
<ul data-role="listview" data-inset="true">
<li>Link to Module Overview</li>
<li><a href="#lectures" data-transition=slidedown>Link to list of lectures</a></li>
<li><a href="#labs" data-transition=slideup>Link to list of labs</a></li>
<li><a href="#functions" data-transition=fade>Link to a list of functions</a></li>
</ul>
</div>
</div>
<div data-role="page" id="overview">
<div data-role="header">
<h1>Link to Module Overview</h1>
Back
</div>
<div data-role="content">
<h2>Welcome to Module Overview</h2>
<p id="">Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
</p>
<p>Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.
Random paragraph of text. Look at the random paragraph of text. Wow.</p>
</div>
</div>
<div data-role="page" id="lectures">
<div data-role="header">
<h1>Link to list of lectures</h1>
Back
</div>
<div data-role="content">
<ol>
<li>Introduction</li>
<li>Web-App Development</li>
<li>Using RSS data feeds</li>
</ol>
</div>
</div>
<div data-role="page" id="labs">
<div data-role="header">
<h1>Link to list of labs</h1>
Back
</div>
<div data-role="content">
<ol>
<li>HTML 5</li>
<li>Web-App Development</li>
<li>Using jGFeed</li>
</ol>
</div>
</div>
<div data-role="page" id="functions">
<div data-role="header">
<h1>Link to a list of functions</h1>
Back
</div>
<div data-role="content">
<ul>
<li>Test Alert</li>
<li>Web-App Development</li>
<li>Using jGFeed</li>
</ul>
<button onclick="testAlert()">Try it</button>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Two Footer</h4>
</div>
<div data-role="dialog" id="alert">
<div data-role="header" data-position="fixed">
<h3><div id="alert-title"></div></h3>
</div>
<div data-role="content">
<div id="alert-content"></div>
</div>
</div>
</body>
</html>

Try removing the inline script and use the jQM pageinit method to bind the click events that launch the dialog:
<ul>
<li>Test Alert
</li>
<li>Web-App Development</li>
<li>Using jGFeed</li>
</ul>
<button id="btnDialog">Try it</button>
$('#functions').on('pageinit', function (event) {
$("#btnDialog, #testAlert").on("click", function (e) {
testAlert();
});
});
Here is a working DEMO

page navigation not working

I'm very new to phonegap and have had to pick up someone else's code. I am having an issue with page navigation. I have an onClick event on a list item and depending on a boolean, I want to navigate to a specific page.
The two possible pages the user will move to are almost identical. There is only one div which is different containing a list view. Originally I had only one page and I loaded the html of the div dynamically with javascript but the css was not being applied to so I decided to create an additional page which was almost identical apart from the one div mentioned above.
My issue now is that whichever div(page) I create first in my index.html will work for navigation but the second one will not i.e.
if I define the divs in the following order:
<div id="page1" data-role="page"></div>
<div id="page2" data-role="page"></div>
then navigating to page1 will work and navigating to page 2 will not. But if I switch the order in which I place the divs in the index.html page i.e.
<div id="page2" data-role="page"></div>
<div id="page1" data-role="page"></div>
then navigating to page 2 will work and navigating to page 1 will not.
Hope this made sense. Here is my code:
In the head tag I have the following function:
function SetMyAccountsBool(bool){
MyAccountsBool=bool;
if (CheckBool){
alert('here');
$.mobile.changePage("file:///Users/roseannecarroll/Documents/workspace2/GirtBank/assets/www/index.html#MyAccTrans4");
//window.location = "file:///Users/roseannecarroll/Documents/workspace2/GirtBank/assets/www/index.html#MyAccTrans3";
//$("#MyAccTrans3").trigger("pagecreate");
}
else{
alert('here2');
//$.mobile.changePage('#MyAccTrans');
$.mobile.changePage("file:///Users/roseannecarroll/Documents/workspace2/GirtBank/assets/www/index.html#MyAccTrans");
}
};
Then on a listview, I am calling the above function as an onClick event. It is entering the function, as I am getting the alert either 'here' or 'here2' depending on a boolean.
And finally here are the two almost identical divs I have:
<div id="MyAccTrans" div class="page" data-role="page" data-theme="a" style="text-align: center;">
<div data-role="header">
<div class="centered">
<img src="../images/log_out.png" alt="Log_Out" onclick='javascript:location.href="#loginScreen";' class="c1">
<h3><div id="MyAccTrans_NAME"></div>Choose</h3>
</div>
</div>
<div data-role="content" style="padding: 10px;text-align:center">
<div class="centered">
<div class="centered" id="MyAccTrans_NUMBER"></div>
</div>
</p>
<div class="bookbal"><b><div id="MyAccTrans_BOOK_BAL"></div></b>
</div>
</p>
<div class="accountnum">
</div>
<div style="padding:10px">
<ul data-role="listview" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" role="heading">
Choose Existing Account To Transfer:
</li>
<div id="MyAccTrans_target_div" style="padding:10px">
<ul id="MyAccTrans_ul" data-inset="true" data-role="listview" data-divider-theme="a">
<li id="0" data-theme="c"><a href="#makeTransfer" data-transition="slide" >
Savings - 173</a><div ><a href="#MyAccTrans" data-transition="slide">
</a></div></li></ul>
</div>
</ul>
</div>
<div data-role="footer" class="centered3" data-theme="a" >
<img src="../images/homeGrey50.png">
<img src="../images/EuroGrey50.png">
<img src="../images/CalculatorGrey50.png">
</div>
</div>
AND
<div id="MyAccTrans4" div class="page" data-role="page" data-theme="a" style="text-align: center;">
<div data-role="header">
<div class="centered">
<img src="../images/log_out.png" alt="Log_Out" onclick='javascript:location.href="#loginScreen";' class="c1">
<h3><div id="MyAccTrans_NAME"></div>Choose</h3>
</div>
</div>
<div data-role="content" style="padding: 10px;text-align:center">
<div class="centered">
<div class="centered" id="MyAccTrans_NUMBER4"></div>
</div>
</p>
<div class="bookbal"><b><div id="MyAccTrans_BOOK_BAL4"></div></b>
</div>
</p>
<div class="accountnum">
</div>
<div style="padding:10px">
<ul data-role="listview" data-divider-theme="a" data-inset="true">
<li data-role="list-divider" role="heading">
Choose Existing Account To Transfer:
</li>
<div id="MyAccTrans_target_div4" style="padding:10px">
<ul id="MyAccTrans_ul4" data-inset="true" data-role="listview" data-divider-theme="a">
<li id="0" data-theme="c"><a href="#makeTransfer" data-transition="slide" >
Current - 004</a><div ><a href="#MyAccTrans" data-transition="slide">
</a></div></li></ul>
</div>
</ul>
</div>
<div data-role="footer" class="centered3" data-theme="a" >
<img src="../images/homeGrey50.png">
<img src="../images/EuroGrey50.png">
<img src="../images/CalculatorGrey50.png">
</div>
</div>
Any help appreciated

how to move across tabs programmatically

I have this code for my tabs...
<!-- Start first page -->
<div data-role="page" id="homePage" data-dom-cache="true" data-rel="dialog">
<div data-role="header" data-position="fixed" data-id="header">
</div>
<div data-role="navbar">
<ul>
<li><a href="#homePage" class="ui-btn-active ui-state-persist" >Enter data</a></li>
<li><a href="#syncData" >Sync data</a></li>
<li>Manage data</li>
</ul>
</div><!-- /navbar -->
</div> <!-- /header -->
</div><!-- /page -->
<!-- Start second page -->
<div data-role="page" id="syncData" data-rel="dialog" data-dom-cache="true">
<div data-role="header" data-id="header1" data-position="fixed">
</div>
<div data-role="navbar">
<ul>
<li>Enter data</li>
<li><a href="#syncData" class="ui-btn-active ui-state-persist" >Sync data</a></li>
<li>Manage data</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
</div><!-- /page -->
<!-- Start third page -->
<div data-role="page" id="manageData" data-rel="dialog" data-dom-cache="true">
<div data-role="header" data-id="header2" data-position="fixed">
</div>
<div data-role="navbar">
<ul>
<li>Enter data</li>
<li><a href="#syncData" >Sync data</a></li>
<li><a href="#manageData" class="ui-btn-active ui-state-persist" >Manage data</a></li>
</ul>
</div><!-- /navbar -->
</div> <!-- /header -->
<div data-role="popup" id="dialog-confirm" style="display: none" data-overlay-theme="b" data-theme="b">
<div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Low storage space!!</h3>
<p>You must perform one of the actions below before you proceed!.</p>
Sync data
Backup data
Increase storage space
Cancel
</div>
</div>
</div><!-- /page -->
I want to change to sync data wen i click on the sync data button on the popup dialog which is on manage data tab.
it should happen on a click button event
e.g
$('#syncDataId').click(function () {
//change to the sync data tab page
}
am new to jquery.any help willl be appreciated.thanks

jQuery('.next-product').click(function() {
var selected = $tabs.tabs('option', 'selected');
$tabs.tabs('select', selected + 1 === amount ? 0 : selected + 1);
});
jQuery('.previous-product').click(function() {
debugger;
var selected = $tabs.tabs('option', 'selected');
$tabs.tabs('select', selected === 0 ? amount - 1 : selected - 1);
});
live demo, this may be what you are looking for

Use $.mobile.changePage(hashedPage) where hashedPage is '#' + 'id of the div that has data-role page'.