I have a simple one page architecture. In the first page I loaded some list items. Next I scrolled the list and say I reached item 60. Then I clicked the item and it took me to second page.
<div data-role="page" id="home">
<div data-role="header" data-position="fixed" data-tap-toggle="false"> 0
<h1>Header</h1>
0
</div>
<div role="main" class="ui-content">
<ul data-role="listview" id="list"></ul>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>Footer</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
Back
<h1>Header</h1>
</div>
<div role="main" class="ui-content">
Some page
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<h1>Footer</h1>
</div>
</div>
Now when I pressed back button in second page it brings the first page with the list, but scroll position is 0. I wanted it to be position of the 60th item. What I'm missing? How to get back in previous page where I left scrolling?
JsFiddle
Watch the situation by scrolling, then press any button and then press the back button.
When navigating from one page1 to page2 get the scroll position of page1 and when come back form page2 to page1 set the scroll position.
From page 1 to page 2
var scrollPosition= $("div").scrollTop();
and when coming back to page1. Then in page 1 ready function
$(document).ready(function(){
$("div").scrollTop(scrollPosition);
});
I don't know about jquery mobile well but As you said you have two pages and after navigating back to the first page you want previous and as we all know that we can't store any data page wise. once if you refresh or reload the page, everything will be reinitialized again. so you have only one way to achieve your goal is that, when you click on list item, get its current scroll position and send that position as query string parameter to another page and store it in one variable there. soon after when user clicks on "back" button you have to again send that variable to first page as query string and on document ready event you will have previous scroll position and you can set that.
Thanks
Related
The multipage is working, but I want to inject the footer code in every page container.
Page Code:
<div data-role="content">
<div class="upage" id="mainpage" data-role="page">
<div class="upage-outer">
<!-- some content -->
</div>
</div>
<div class="upage" id="uberpage" data-role="page">
<div class="upage-outer">
<!-- some content -->
</div>
</div>
</div>
And the I just inject the footer code with some buttons (When device is ready):
$(".upage-outer").append('<div data-role="footer">Copyright + Buttons</div>');
This is the full footer code:
<div data-role="footer" data-position="fixed" class="container-group inner-element uib_w_4" data-uib="jquery_mobile/footer" data-ver="0">
<div data-role="controlgroup" data-type="horizontal" class="brideButtonGroup">
<a class="widget uib_w_6" data-role="button" href="#mainpage" rel="external">Wetter</a>
<a class="widget uib_w_7" data-role="button" onclick="intel.xdk.device.launchExternal('http://wetter2.mt-labor.it.hs-worms.de/plot');">Mehr</a>
<a class="widget uib_w_8" data-role="button" href="#uberpage" rel="external">Über</a>
</div>
</div>
The code gets injected, but on the mainpage, the Buttons are not displayed; instead, there are plain text links. On the second page, everything is displayed very well. I can switch between the pages.
What did I do wrong?
edit: I used enhanceWhithin(), and its working. But when I click somewhere on the document, strange colors appear, which are caused by the class ".ui-fixed-hidden". Where does this come from?
edit2: https://jsfiddle.net/564f1fkf/ It's not exactly the same, but if you go to site 2 and then back to site 1 and click somewhere on the page, you should see the problem.
PS: See pictures
You have to call the enhanceWithin() method on data-role="content" element. This will enhance the newly added HTML into jQuery mobile format.
$("[data-role='content']").enhanceWithin();
I have two html pages: mainpage.html and secondPage.html
The first page works like the layout:
<div id="header"></div>
<div id="home"></div>
<div id="footer"></div>
the second:
<div id="content"></div>
So when i click on a button in the home div i have a function that charge the #content inside the #home, until here everything works good. In few words i refresh only #home.
Now I want that when I click the back button of the browser I come back to the old home because now if i do this it goes to the previous page.
Is there a way to do this?
I have a PhoneGap application wich uses a jQuery Mobile multipage layout. On every page (page A and page B) I have a navbar for switching between pages. No custom code involved. I also have a panel on every page which opens by clicking the 'new' button in the header.
Sometimes it happens that I hit the button (maybe to soft? or to fast?) to open to panel but the buttons just changes it state to "active" and the panel does not open. I cannot click the button anymore. When I change the page and go back (all by using the navbar) page A appears again and now the panel is opened. This is a strange behaviour but could be plausible. But trying to close it now is just impossible. Clicking one of the buttons in the panel is as inactive as clicking on the page itself. The whole thing seems to be froozen.
<div data-role="page" id="one">
<div data-role="header" data-transition="fixed">
New
<h1 class="header">myApp</h1>
Options
</div>
<!-- Header -->
<div data-role="panel" id="panel_one">
<div data-role="collapsible-set" class="menu"></div>
</div>
<!-- Panel -->
<div data-role="content">
<div data-role="navbar">
<ul>
<li><a href="#one" data-transition="none" class="ui-btn-active" >A</a></li>
<li><a href="#two" data-transition="none" >B</a></li>
</ul>
</div>
</div>
<!-- Content -->
</div>
<!-- Page One-->
<div data-role="page" id="two">
<div data-role="header" data-transition="fixed">
New
<h1 class="header">myApp</h1>
Options
</div>
<!-- Header -->
<div data-role="panel" id="panel_two">
<div data-role="collapsible-set" class="menu"></div>
</div>
<!-- Panel -->
<div data-role="content">
<div data-role="navbar">
<ul>
<li>A</li>
<li><a href="#two" data-transition="none" class="ui-btn-active" >B</a></li>
</ul>
</div>
</div>
<!-- Content -->
</div>
<!-- Page Two-->
menu() creates the content of the Menu which is not shown in the example. Another method (loadPanel()) is boud to the pageshow-event and will populate the sidebar with the buttons. every button will execute
var pageId = $.mobile.activePage.attr("id");
$("#panel_" + pageId).panel('close');
before anything else is executed. However, all of this works most of the time and I would just like to know if some observed a similar behaviour.
As per jQuery mobile documentation
A panel must be a sibling to the header, content and footer elements inside a jQuery Mobile page. You can add the panel markup either before or after these elements, but not in between.
Maybe you should move up your panel because it may be the cause of the strange behaviour
Hi and happy new year,
There is this JQM dialog, which opens likes this via an AJAX call
$('#calendar-event-form-container').html(HTML).toggle();
$("#calendar-event-form-container").dialog({theme:'a'});
and closes by
$("#calendar-event-form-container").dialog('close');
$("#calendar-event-form-container").toggle();
Next time the dialog is opened it loses its JQM theme and position .
Can anybody see where the code has gone wrong?
Thanks in advance
Sincerely,
Babak
andleer is correct, don't use toggle() with jQM, it is not needed. jQM dialog is created to be used as a separated page. Take a look at this example:
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
Open dialo
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<!-- DIALOG BOX -->
<div data-role="page" id="dialog-box" data-theme="b">
<div data-role="header">
<h1>Warning</h1>
</div>
<div data-role="content">
<h3 id="dialog-msg">
Dialog test
</h3>
<a href="#" data-role="button" id="close-button">
Close dialog
</a>
</div>
</div>
Also if possible you should open dialog box like this:
$.mobile.changePage('#dialog-box', {transition: 'pop', role: 'dialog'});
In case you are dynamically changing dialogbox content you must trigger pagecreate on it to restyle it correctly:
$('#dialog-box').trigger("pagecreate");
And here's a full jsFiddle example: http://jsfiddle.net/Gajotres/fXzWj/
Showing and Hiding a form as a dialog with toggle() is non-standard. The jQuery Mobile dialog is designed to show or hide a page <div data-role="page"> container. As such, it is assumed to be outside of the current page and won't be visible until displayed as a dialog.
http://jquerymobile.com/demos/1.2.0/docs/pages/dialog/index.html
"Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link"
On a blackberry browser the history.back(); function redirects the browser back two steps instead (on blackberry browser running OS5.0) of the previous page, in this case #firstpage. So I just remove the call to history.back(); and it works. By works I mean the browser goes to previous page - #firstpage. I'm wondering though if this is correct and im not inadvertently causing unexpected behaviour on a browser I havent tested on. , is it safe to do this across all browsers ?
<div data-role="page" id="firstpage">
<div id="headerItem" data-role="header" data-theme="b">
<h4>Header</h4>
<a data-rel='external' data-ajax="false" href='' class='ui-btn-right' data-icon='home'>Home</a>
</div>
<div data-role="content" data-theme="b" id="links"></div>
<div class="footerDate" data-role="footer" data-theme="b"></div>
</div>
<div id="secondpage" data-role="page" >
<div id="headerDiv" data-role="header" data-theme="b">
Back
<a data-rel='external' data-ajax="false" href='' class='ui-btn-right' data-icon='home'>Home</a>
<h1></h1>
</div>
<div data-role="content" id="pagecontent" ></div>
<div class="footerDate" data-role="footer" data-theme="b"></div>
</div>
I fixed this issue by instead of redirecting when the user clicks the back button, update the page itself using jQuery - set each individual div items data. This is fine for me since there is not much being displayed on the page, but for pages with a large amount of divs and different content it may not be usable.