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");
});
Related
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
I added a popup to a div-container. Opening the popup doesn't work.
This is my container-structure:
<div data-role="page" id="mainPage">
<div id="myContent"> <!--div id="myContent" data-role="content/main"> dosn't work either -->
<div id="template" style="display:none;">
<a class="select-Button">
...
</a>
</div>
<ul data-role="list-view"></ul>
<div data-role="popup" id="myPopup">
<p>My Popup</p>
</div>
</div>
</div>
I'd like to open the popup by javascript:
...clone the template and add clones to the list-view before.
$('#mainPage').find('.select-Button').on('click', function(){
$('#myPopup').popup("open");
});
But it's not working
This works:
Java-Script:
var $popUp = $('#myPopup').popup({
dismissible: false,
theme: "c",
overlyaTheme: "d",
transition: "pop"
});
$popUp.popup('open').trigger("create");
HTML:
<div id="myPopup"> <!-- removed data-role="popup" here-->
<p>My Popup</p>
</div>
page div should be direct parent of popup div. If you place it inside any other div, it won't open, or malfunction.
<div data-role="page">
<div data-role="popup" id="myPopup">
<p>My Popup</p>
</div>
<div id="myContent">
<div id="template" style="display:none;">
</div>
<ul data-role="list-view"></ul>
</div>
To open it using HTML
Popup
To open programatically
$("#popupID").popup("open");
You need to delegate click event to dynamically added elements.
$(document).on("click", ".select-button", function () {
$('#myPopup').popup("open");
});
Demo
Try this out:- http://jsfiddle.net/adiioo7/rF873/
JS:-
$('#myPopup').popup();
$('#myPopup').popup("open");
HTML:-
<div data-role="page">
<div id="myContent"> <!--div id="myContent" data-role="content/main"> dosn't work either -->
<div id="template" style="display:none;">
</div>
<ul data-role="list-view"></ul>
<div dara-role="popup" id="myPopup">
<p>My Popup</p>
</div>
</div>
</div>
Issue with your approach is that you cannot call methods on popup prior to initialization.
So I am creating a survey app and depending on one survey page's selected options, one of two pages will be loaded once a user clicks 'Go'. In determining which link to load into the go button's href property, I also assign the link to a future survey page's 'back' button... I am confused about why this is returning undefined as I am doing the exact same thing earlier in the application and the back button's link is returning the correct link...
So after calling setSurveyFromSurvey5a(), once a user taps 'go' from survey5a, console.log($("#survey5bback").attr("href")) returns 'undefined', even after it should have been assigned within setSurveyFromSurvey5a()... it will pass the conditional to set the href value, but it just isn't changing it and I'm not sure why...
Here is my code:
relevant javascript:
function setSurveyFromSurvey5a(){
if(goto5a){
survey5adata.alo_wthfam = translateCheckBox($("#checkbox-alo_wthfam").prop("checked"));
survey5adata.alo_wthpart = translateCheckBox($("#checkbox-alo_wthpart").prop("checked"));
survey5adata.alo_wthwork = translateCheckBox($("#checkbox-alo_wthwork").prop("checked"));
survey5adata.alo_wthfr = translateCheckBox($("#checkbox-alo_wthfr").prop("checked"));
survey5adata.alo_wthoth = translateCheckBox($("#checkbox-alo_wthoth").prop("checked"));
}
//set go and back buttons:
if(survey5adata.alo_wthfam == 2){
goto5a1 = true;
console.log("within survey5adata.alo_wthfam == 2");
$("#survey5ago").attr("href", "#survey5a1");
$("#survey5bback").attr("href", "#survey5a1");
}
else if(survey5adata.alo_wthfam == 1){
console.log("within survey5adata.alo_wthfam == 1");
goto5a1 = false;
$("#survey5ago").attr("href", "#survey5b");
$("#survey5bback").attr("href", "#survey5a");
}
console.log("#survey5ago:" + $("#survey5ago").attr("href"));
console.log("#survey5bback:" + $("#survey5bback").attr("href"));
}
The html from survey5a, survey5a1, and survey 5b:
<div data-role="page" id="survey5a">
<header data-role="header" data-theme="c">
<img src="img/evl_logo2.png" class="evllogo" width="100"/>
<img src="img/uic_logo2.png" class="ui-btn-right" width="100"/>
</header>
<div data-role="header" data-theme="e">
<p>Tobacco Use Interview</p>
</div>
<div data-role="content">
<div id="survey5acontent">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Back</li>
<li>Home</li>
<li>Go</li>
</ul>
</div>
</div>
</div>
<!-- LINKED SURVEY5a1 -->
<div data-role="page" id="survey5a1">
<header data-role="header" data-theme="c">
<img src="img/evl_logo2.png" class="evllogo" width="100"/>
<img src="img/uic_logo2.png" class="ui-btn-right" width="100"/>
</header>
<div data-role="header" data-theme="e">
<p>Tobacco Use Interview</p>
</div>
<div data-role="content">
<div id="survey5a1content">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Back</li>
<li>Home</li>
<li>Go</li>
</ul>
</div>
</div>
</div>
<!-- LINKED SURVEY5b -->
<div data-role="page" id="survey5b">
<header data-role="header" data-theme="c">
<img src="img/evl_logo2.png" class="evllogo" width="100"/>
<img src="img/uic_logo2.png" class="ui-btn-right" width="100"/>
</header>
<div data-role="header" data-theme="e">
<p>Tobacco Use Interview</p>
</div>
<div data-role="content">
<div id="survey5bcontent">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<!-- Need to determine how to go back correctly -->
<li>Back</li>
<li>Home</li>
<li>Go</li>
</ul>
</div>
</div>
</div>
You just have a typo in your HTML markup:
<li>Back</li>
Should be
<li>Back</li>
Remove the '#' from the id.
When I open the file in chrome, It works how it should but refreshing the page gives me an error. I have already checked that I am not listing the same sources twice. Very weird if you ask me!
this is the error I am getting:
Uncaught Error: cannot call methods on popup prior to initialization; attempted to call method 'open'
<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile Example</h1>
</div>
<div data-role="content">
<div data-role="popup" id="intro_view" data-overlay-theme="a" data-theme="a" style="max-width:100%;">
<div data-role="header" data-theme="a" class="ui-corner-top ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">Welcome!</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content ui-body-d" role="main">
<h1 class="ui-title">Navigate through time and space to see what's happening around you!</h1>
<p> Here's a few quick tips to get you started:</p>
<ol>
<span class="ui-btn-inner"><span class="ui-btn-text">Cancel</span></span>
<span class="ui-btn-inner"><span class="ui-btn-text">Delete</span></span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$( "#intro_view" ).popup( "open",{positionTo:"window"} );
});
</script>
Instead of $(document).ready .. use this
$(document).bind('pageinit', function() {
$("#intro_view").popup('open');
});
Please refer jquery docs http://jquerymobile.com/demos/1.2.1/docs/api/events.html
Hi all I have html file in that there are various different pages in div. Now I want to navigate from one page to another I am using $.mobile.changePage("#test") for this but navigation to test.html is not take place. If I use different html file for test.html and call it as $.mobile.changePage(("test.html")); then navigation takes place.
I also tried with loadPage, but it also does not solve my issue. Any suggestion will be appreciated, Thanks in advance.
Here is my code:
<body>
<div data-role="page" id="firstPage" onclick=callSecondPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="firstPage" id="firstPage">
</div>
<script type="text/javascript">
function callSecondPage()
{
alert ("Inside callPage");
$.mobile.changePage('#secondPage');
}
</script>
</div>
<div data-role="page" id="secondPage" onclick=callThirdPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="secondPage" id="secondPage">
</div>
<script type="text/javascript">
function callThirdPage()
{
alert ("Inside callPage");
$.mobile.changePage('#thirdPage');
}
</script>
</div>
<div data-role="page" id="thirdPage" onclick=callFourthPage() class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="thirdPage" id="thirdPage">
</div>
<script type="text/javascript">
function callFourthPage()
{
alert ("Inside callPage");
$.mobile.changePage('#fourthPage');
}
</script>
</div>
<div data-role="page" id="fourthPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fourthPage" id="fourthPage">
</div>
</div>
<div data-role="page" id="fifthPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="fifthPage" id="fifthPage">
</div>
</div>
<div data-role="page" id="sixthPage" class="type-home">
<div data-role="button">
<input type="submit" data-role="button" value="sixthPage" id="sixthPage">
</div>
</div>
before comes to above html file navigate to other pages, And now $.mobile.changePage('#secondPage'); secondPage is not navigated from firstPage. But if same code I placed in index.html (i.e entry point of application then proper navigation takes place.
You should write
$.mobile.changePage($("#test"))
Is the call to $.mobile.changePage waiting for page load? You need to let us see some code here...