i'm trying to figure out how i can append a page to the bottom of another page after clicking on a button.
Usually the page with the button disappears and the next page is loaded.
I don't want the first page to disappear, instead just add the content of the second page at the bottom.
For example i have this structure of a page:
<div data-role="page" id="p1">
<div data-role="header"><h1>Header Page 1</h1></div>
<div data-role="content">
If you click this button, this page will be hidden and the next page will slide up.
Go To Page 2
</div>
</div>
<div data-role="page" id="p2">
<div data-role="header" data-rel="back"><h1>Header Page 2</h1></div>
<div data-role="content">
<p>This is page2</p>
Go To Page 3
</div>
</div>
<div data-role="page" id="p3">
<div data-role="header" data-rel="back"><h1>Header Page 3</h1></div>
<div data-role="content">
<p>This is page3</p>
</div>
</div>
I created this jsfiddle for illustration.
Related
I have a form with three different data-role="page" with three different data-url="abc".
Based on some condition I am rendering/displaying some fields on the second page after clicking the button on the first page.
Now I am getting the second page
<a id="123" class="xxx" href="#secondPageId" data-role="button">GoToNextScreen</a>
Now in the second page URL i can able to see http://www.test.com/index.html#secondPageId
when i am in the second page If i refresh the browser,
Its showing all available controls in the second page.
But i need to display only few fields based on the button click.
How can i do that ?
If that is not possible, then:
While refreshing the browser by clicking "Browser Refresh button" or Pressing F5 I need to remove the #secondPageId from the URL.
So that i can able to go back to first page.
I have made a jsfiddle that illustrates a possible solution.
Basically, you can do this in two ways:
Initially hide all elements and use jQuery to show the required ones at pagechange.
Initially hide nothing at all, and use jQuery to hide the required elements at pagechange.
The fiddle uses the latter one.
HTML:
<div data-role="page" id="first">
<div data-role="header">
<h3>
First Page
<a id='Goto_page2' class='ui-btn-right ui-btn ui-corner-all ui-shadow'>NEXT</a>
</h3>
</div>
<div data-role="content">
<p>
Please go to next page.
</p>
</div>
</div>
<div data-role="page" id="second">
<div data-role="header">
<h3>
Second Page
<a href='#first' class='ui-btn-left ui-btn ui-corner-all ui-shadow'>HOME</a>
</h3>
</div>
<div data-role="content">
<div>
<p class="tobehidden">
This text was visible, but has been made hidden.
</p>
</div>
<div>
<p>
This text only is visible.
</p>
</div>
<div class="tobehidden">
<h4>
This text was also visible, but has now been made hidden.
</h4>
</div>
</div>
</div>
jQuery:
$(document).ready(function(e) {
//Change to first page at load
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#first");
/*
* Read more about page handling here:
* http://api.jquerymobile.com/pagecontainer/#method-change
*/
//Click event for the "NEXT" button
$( document ).on("click", "#Goto_page2", function(){
//Hide elements that has the class "tobehidden"
$(".tobehidden").hide();
//Switch to page 2
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#second");
});
});
using SwipeJS how can I call a different html? For example using the following code to swipe pages I use it as index.html and I want to call other three inside like page1.html page2.html and page3.html Is that possible?
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div class="page">
Page 1
</div>
<div class="page">
Page 2
</div>
<div class="page">
Page 3
</div>
</div>
</div>
I am building a JQuery Mobile web-app, and am running into an interesting problem. I have a listview, and when I click on one of the menu rows, page 2 loads as expected. However, when I click the back button, the page 1 page loads for a half a second, then page 2 comes back (without a transition).
Here is the code for the 2 pages:
<section id="more" data-role="page">
<header data-role="header" data-position="fixed" class="AppHeader">
<h1>More</h1>
</header>
<div data-role="content">
<ul data-role="listview" data-filter="false" id="moreList">
<li><h1>History of Boston Landmarks</h1></li>
</ul>
</div>
</section>
<section id="historyOfLandmarks" data-role="page">
<header data-role="header" data-position="fixed" class="AppHeader">
Back
<h1>History of Boston Landmarks</h1>
</header>
<div data-role="content">
<p>This is a list of National Historic Landmarks in Boston, Massachusetts.</p>
</div>
</section>
JS Fiddle Does Not Illustrate the Problem: http://jsfiddle.net/jakechasan/66vbS/
Everywhere else, the problem appears: http://jakeserver.com/Apps/BostonLandmarks/B5/landmarks.html
I don't understand why JSFiddle does not illustrate the problem, however, the same file on my computer/server has this problem?
Any ideas?
Thanks.
Your own CSS is responsible for this problem.
Edit this file: http://jakeserver.com/Apps/BostonLandmarks/B5/css/styles.css
And remove from the bottom:
.ui-page{
display: block !important;
}
I have tested it successfully.
I am trying to open a modal popup dialog after loading ajax content in jQuery Mobile.
It works fine for the first time, it does not show any modal once it has shown for the first time.
following is the code :
<div data-role="dialog" id="myDialog">
<div data-role="header">
<h1>My dialog heading</h1>
</div>
<div data-role="content" id="m_content">
<p>Content goes here.</p>
</div>
<div data-role="footer">
<h3>And my footer...</h3>
</div>
</div>
javascript function
function cp() {
$.get('#Url.Content("~/Mobile/StockReport/ItemWise")', function (data) {
$("#m_content").html("").html(data);
$.mobile.changePage('#myDialog');
})
}
I have one main page and other sources on other pages. Since I can't use ajax loading because of the server limitation, I have to use target="_webapp" attribute to load on new page
<div id="home">
Link to external page
... content ...
</div>
Since normal back button ( a href="#") doesn't work with external page, I'm using javascript:history.go(-1)
<div id="the-external-page">
<div class="toolbar">
<h1>The External Page</h1>
<a class="back" href="javascript:history.go(-1)">Back</a>
</div>
<ul>
<li>Internal page</li>
<li>Internal page</li>
</ul>
... content ...
</div>
<div id="page1">
<div class="toolbar">
<h1>Page 1</h1>
<a class="back" href="#">Back</a>
</div>
.. content...
</div>
<div id="page2">
<div class="toolbar">
<h1>Page 2</h1>
<a class="back" href="#">Back</a>
</div>
.. content...
</div>
It works if user navigate #home -> #the-external-page -> #home
but since the other pages have multiple link within it when user visit #page1, #page2 all the history stack and the back button doesn't work until pressed multiple time.
I can't put absolute link in the back button either because the list of original pages are dynamically generated.
Is there way to go back to resolve this ?
Did not test with your code, but I suspect .goBack() in the jQtouch object may be what you're looking for: https://code.google.com/p/jqtouch/wiki/PublicObject
Relevant section:
goBack( to:object )
Forces jQTouch to go back to a certain page in the history. You can pass a specific page ID, a number of pages to go back, or nothing to go back one page. If the specified page can not be found, jQTouch will go back one page by default.