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
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();
Below is my psuedo-code for a Single page website I am doing. I need to be able to make a single page website that is not scroll-based (which is the typical). The idea here is that my site have a nav where user selects a menu and depending on the selected menu the correct page div is rendered on the content div.
The page divs are also in the HTML and should not be displayed unless the correct menu is selected (or if a better approach is to place the pages in Javascript file):
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
</nav>
<div id="content">
<!-- content will be from page divs below -->
</content>
<div id="page1"> <!-- for menu1 -->
<div>the content</div>
</div>
<div id="page2"> <!-- for menu2 -->
<div>the content</div>
</div>
How can achieve this with jQuery?
Here is what you looking for
Html :-
<nav>
<ul>
<li class="nav active" data-id="1">menu1</li>
<li class="nav" data-id="2">menu2</li>
</ul>
</nav>
<div id="content">
<!-- content will be from page divs below -->
<div id="page1" class="page">
<!-- for menu1 -->
<div>the content from page 1</div>
</div>
<div id="page2" class="hide page">
<!-- for menu2 -->
<div>the content from page2</div>
</div>
</div>
Jquery :-
$(document).ready(function () {
$('.nav').click(function () {
$(this).addClass('active').siblings().removeClass('active');
$('.page').hide();
var clickedId = $(this).data('id');
$('#page' + clickedId).show();
});
});
Working Demo
To display preloaded contents in different containers you can use anchor tag with some CSS
HTML
a
b
c
<div id="page1" class="page"> this is page1 id</div>
<div id="page2" class="page"> this is page2 id</div>
<div id="page3" class="page"> this is page3 id</div>
CSS
#page1, #page2, #page3{
display:none;
}
#page1:target{
display:block;
}
#page2:target{
display:block;
}
#page3:target{
display:block;
}
As another answer stated, you may want to take a look at AngularJS. Here is an excellent tutorial to get you started if you choose: http://www.youtube.com/watch?v=i9MHigUZKEM
However, since your question stated jQuery, the best way will probably be to have all the pages separate html pages that are loaded in via AJAX and replace your current html.
The other approach is to have everything on the page at once and hide and show the content based on the menu item the user clicked. However, this may make the page REALLY sluggish if you have a lot of content all on the page at once.
If you want the content to be embedded in the page but hidden, use jQuery's .hide() and .show()
If you want to keep the content in separate pages, use jQuery's .load()
use this code , make sure your #page1 and #page2 divs hidden initially
jQuery(document).ready(function(){
jQuery('li').click(function(){
var new_index = parseInt(jQuery(this).index())+1;
jQuery("div[id*='page']").hide();
jQuery('#page'+new_index).show();
});
});
<nav>
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
</nav>
<div id="content">
<!-- content will be from page divs below -->
</content>
<div id="page1" style="display:none";> <!-- for menu1 -->
<div>the content 1</div>
</div>
<div id="page2" style="display:none";> <!-- for menu2 -->
<div>the content 2</div>
</div>
Try this link, it will help you. you are having navigation bar on your right hand site from where you can navigate through out your website.
Single page website
so I am making a page with three nav tabs on the left and a map on the right. I have my code here for the nav tabs. On the first tab I want a field where the user can enter some info and the map will adjust accordingly. It works fine once the page loads, but if I visit another tab and come back then the input field will be gone. Any ideas?
<div class="tabbable" class='span4'> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li id='tab1' class="active">Browse</li>
<li>History</li>
<li>Wishlist</li>
</ul>
<div class="tab-content">
<!-- Browse tab -->
<div class="tab-pane active" id="tab1">
<form class="form-search">
<input type="text" class="input-medium search-query" id='location'>
<button type="submit" class="btn">Search</button>
<p><b>Find brewery by name..</b></p>
</form>
</div><!-- end Browse Tab -->
<!-- History tab -->
<div class="tab-pane" id="tab2">
<p>I've been here!</p>
</div><!-- end History tab -->
<!-- Wishlist tab -->
<div class="tab-pane" id="tab3">
<p>We still have to check these places out!</p>
</div><!-- end Wishlist tab -->
</div>
</div>
Since your nav links are a tags using anchors in their href, the page is reloaded on click. A page reload will reset any entered form information.
Is there a way to do it where I do not have to refresh? Should I change the a tags to something else?
Yes like this (looks ugly, works great IMO):
alternatively, with HTML5 you can leave out the href altogether
<a></a>
but...I wouldn't recommend that, probably some backwards compatibility issues.
After re-reading your original question though I don't think this is the root of the problem, hard to tell without a live example though.
I am using jQuery Mobile 1.3.1 and finding my dialog which is opened from a panel item is not enabling any button click or listview click and hover functionality. The working panel html code which is opening my dialog is: -
<li data-icon="grid">Change Name</li>
The dialog html which I've simplified as much as possible is: -
<div id="changeNameDialog" data-role="page" data-theme="b" data-content-theme="d">
<div data-role="header" data-theme="b">
<h1>Change Name</h1>
</div>
<div data-role="content">
<div>
<ul id="nameList" data-role="listview">
<li>j1</li>
<li>j2</li>
<li>j3</li>
<li>j4</li>
</ul>
</div>
<div>
<button type="button" data-inline="true" data-theme="b" onclick="putNameChange();">Change</button>
</div>
</div>
</div>
If I change my panel list item data-rel attribute to be data-rel="page", the button and list click and hover functionality works fine i.e.
<li data-icon="grid">Change Name</li>
The only thing that works on the Dialog is the dialogs (x) icon close button. What is the Panel doing to the Dialog events?
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"