page1 header:
<div data-role="header" data-theme="a" role="banner" class="ui-header ui-bar-a">
<h1 class="ui-title" role="heading" aria-level="1">Foo</h1>
</div>
after changing to page2,
$(":mobile-pagecontainer").pagecontainer("change", "#page2", { } );
page1 header becomes: (class removed)
<div data-role="header" data-theme="a">
<h1 class="ui-title" role="heading" aria-level="1">Foo</h1>
</div>
After going back to page1,
$.mobile.back();
the page1 header is not enhanced.
Thanks for help.
Related
Expected Scenario: I have two div in one page one is popup and other is the main page. When I click on popup popup should open and when i click close on pop up it should show the other div
Actual Scenario: WHen I close it doesnot show the other div instead it goes to the previous page
Using Jquery Mobile 1.3.0
$.mobile.changePage("#publishlogonmanage", { role: "dialog", transition:"slideup",reload:false,reverse: false,changeHash: false });
PopUP COde
<div data-role="page" id="publishlogonmanage" data-history="false" data-overlay-theme="b" data-theme="b">
<div data-role="header" data-theme="a">
<a data-icon="delete" id="logonClose" data-mini="true" data-theme="a" data-rel="back" data-role="button" class="ui-btn-left"></a>
<a data-icon="delete" data-theme="a" data-transition="flip" data-rel="back" data-mini="true" data-role="button" class="ui-btn-left" style="width:80px;" >Close</a>
</div>
<div data-role="content" style="padding: 0; margin: 0; background: #FFFFFF;">
This is Body
</div>
</div>
Main Page:
<div data-role="page" data-theme="b" id="MobilePage" data-overlay-theme="b">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="a">
<div style="float: left; margin-left: 5px;"> Back</div>
<h1 id="title"> 10 </h1>
</div>
<div data-role="content" class="master-wrapper-page">
This is body
<div style="margin-top:7px;display:none;float: right !important; margin-left: 0px !important;overflow:ellipsis;white-space: nowrap;" data-close-btn="right" id="ManageLogon" data-mini="true" onclick="LoadDialog();" data-rel="popup"></div><img src="../../../images/logon-E.png" style="1px solid #666666;margin-top:3px;margin-right:-5px float: right;height:30px;width:30px;" id="logonexp" /></div>
</div>
</div>
i am newly working for jquery mobile panels, i have tried the reference of this jsfiddle link here http://jsfiddle.net/Gajotres/vds2U/47/ , i just added jquery ajax call to parse xml data. My problem is after searching city and keyword in page1, ajax call shows success alert but not trigger to page2. I want to display data in page2. If i click on page2 in jquery panel it appends the searched data. What wrongs here If any changes need to do please help me. My code is like below:
html code:
<div data-role="panel" data-display="push" data-theme="b" id="nav-panel" data-position="left">
<h2> All Pages </h2>
<ul data-role="listview" data-icon="false">
<li data-icon="delete">Close menu</li>
<li>Main panel page</li>
<li>page 1 page</li>
<li>page 2 Page</li>
</ul>
</div>
<div data-role="page" id="panel-main" data-title="Panel main" data-theme="a" >
<div data-role="header" data-position="fixed">
<h1 id="header1">main panel</h1>
Menu
</div>
<div role="main" class="ui-content"">
<p id="para1">main panel</p>
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>page 1</h1>
Menu
</div>
<div data-role="main" class="ui-content">
<div class="text"><input type="text" id="p1" name="p1" placeholder="Location...." class="user-text1 textboxes" data-clear-btn="true" data-mini="true" />
</div>
<div class="height"></div>
<div class="text"><input type="text" id="p2" name="p2" placeholder="Term...." class="user-text2 textboxes" data-clear-btn="true" /></div>
<div class="height"></div>
<button type="submit" id="searchBtn" data-theme="f" data-corners="false"/>Search Events</button>
</div>
</div>
<div data-role="page" id="page2" data-theme="a" >
<div data-role="header" data-position="fixed">
<h1>page 2</h1>
Menu
</div>
<div data-role="main" class="ui-content">
<ul id="list" data-role="listview" data-icon="false" data-autodividers="true" data-theme="c"></ul>
</div>
</div>
<script>
$(function () {
$("[data-role=panel]").enhanceWithin().panel();
});
javascript code:
$(document).ready(function(){
$("#searchBtn").bind("click",function(){
// alert('success');
$.mobile.loading('show');
var p1=$("#p1").val();
var p2=$("#p2").val();
$.ajax({
type: 'GET',
url:"http://api2.yp.com/listings/v1/search?searchloc="+p1+"&term="+p2+&format=xml&key=5cbqjx3cdl",
dataType: "xml",
success: function(data){
//alert('success');
$(data).find("searchListing").each(function(){
var name=$(this).find("businessName").text();
var id=$(this).find("listingId").text();
window.location.href="#page2";
//$.mobile.changePage("#page2");
$.mobile.loading('hide');
$("#list").append('<li>name:'+ name +'</li>');
$("#list:visible").listview("refresh");
});//ajax ends
});
});
Use the jQM pagecreate instead of $(document).ready, then in the success function, append the new items to the list, navigate to page2 using pagecontainer("change"), then refresh the list:
$(document).on("pagecreate", "#page1", function(){
$("#searchBtn").on("click" ,function(){
// your AJAX code
success: function(data){
//alert('success');
$(data).find("searchListing").each(function(){
var name=$(this).find("businessName").text();
var id=$(this).find("listingId").text();
$.mobile.loading('hide');
$("#list").append('<li>name:'+ name +'</li>');
$("body").pagecontainer( "change", "#page2", {} );
$("#list").listview("refresh");
});
});
});
Simplified DEMO
I have left the AJAX out of the demo. I am just appending 3 items and then changing page.
In my jQuery mobile app , I have used data-prefetch in order to prefetch Page1 , to increase the performance since each page take time to open and be shown to the user after clicking the link , the problem is that when I click on Page1 link once the app is lunched the pageinit/ pagecreate events for Page1 didn't executed , in this event I return data from the database to be displayed in a popup listview , but when I back to the home Page then click Page1 link a gain the Pageinit event executed and the data returned .
Why the Pageinit/ pagecreate events didn't work when prefetching a page ? How can I solve this problem ? since its very important to return the data in the Pagecreate or Pageinit event
another problem I have faced is that when I back from Page1 to the home Page the Home Page links become not working I click the Page1 link but Page1 didn't open, even if i click on the link many times it didn't open Page1 .. How can i solve this problem also ?? Please help me
Home Page
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>Header - Home</h1>
</div>
<div data-role="content"></div>
<a href="Page1.html" data-transition="none" class="ui-btn" data-role="button" data-prefetch="true" >Page1</a>
<a href="Page2.html" data-transition="none" class="ui-btn" data-role="button" data-prefetch="true" >Page2</a>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
Page 1
<div data-role="page" id="Page1">
<div data-role="header" data-position="fixed">
<h1>Header - Page 1</h1>
</div>
<div data-role="content">
Show Popup
</div>
<div data-role="popup" id="MyPOPUP" data-position-to="window" data- corners="false" data- overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="a">
<div style="text-align:center;float:center;padding-top:11px;">
<font size="6px" color="white">Employees</font>
</div>
</div>
<div id="scrollContent" data-role="content">
<ul data-role="listview" id="EmpList" style="margin: 0 !important;">
</ul>
</div>
</div>
</div>
Page1.js
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady()
{
$('#Page1').on('pageinit',function(event){
db.transaction(getAllEmployees, transactionError);
});
}
function getAllEmployees(tx)
{
tx.executeSql('SELECT EmpName,Salary,Gender,Country FROM Employee', [],getEmpSuccess,transactionError);
}
function getEmpSuccess(tx,result)
{
if (result.rows.length)
{
for(var i=0;i< result.rows.length; i++)
{
var row = result.rows.item(i);
$('#EmpList').append('<li>' +'<font class="line1">' + ' '+row['EmpName']+ '</font>' +'<font size="6px" class="line2" > '+ row['Gender'] +'</font>'+'<font size="6px" class="line3"> ' +row['Country']+' </font>'+'<font size="6px" class="line4"> '+ row['Salary']+'</font><BR> '+'<a href="#" >Delete</a></li>' );
}
}
$('#EmpList').listview('refresh');
}
I am able to implement panel .But i need my pages should display with panel.Actually when i click panel button's then it hide panel .show page on whole screen .But i need to show page with panel.
Here is my code.
http://jsfiddle.net/ravi1989/TXRjk/2/
Jump to second page
Jump to third page
First Page
Next
Open Pannel
<div data-role="page" id="second">
<div data-role="panel" id="mypanel">
Jump to first page
Jump to third page
</div>
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="third">
<div data-role="panel" id="mypanel">
Jump to first page
Jump to second page
</div>
<div data-theme="a" data-role="header">
<h3>
Third Page
</h3>
Back
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
I think it should be what you're wanting:
<div data-role="page" id="index">
<div data-role="panel" id="mypanel">
Jump to index page
Jump to second page
Jump to third page
</div>
<div data-theme="a" data-role="header">
<h3 id="header-page">
First Page
</h3>
</div>
<div data-role="content" id="content-page">
<a data-role="button" href="#mypanel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-page">
.
</div>
</div>
<div class="soHide" id="index">
<div data-theme="a" data-role="header">
<h3 id="header-index">
First Page
</h3>
</div>
<div data-role="content" id="content-index">
<a data-role="button" href="#mypanel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-index">
.
</div>
</div>
<div class="soHide" id="second">
<div data-theme="a" data-role="header">
<h3 id="header-second">
Second Page
</h3>
</div>
<div data-role="content" id="content-second">
<p>this is a second page</p>
<a data-role="button" href="#mypanel">Open Pannel again</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-second">
footer second page
</div>
</div>
<div class="soHide" id="third">
<div data-theme="a" data-role="header">
<h3 id="header-third">Third Page</h3>
</div>
<div data-role="content" id="content-third">
<a data-role="button" id="open-panel">Open Pannel one more time</a>
<p>it's third!</p>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-third">
it's some third footer page
</div>
</div>
and this javascript:
$(document).on('click', '.btnPages', function(){
var page = $(this).attr('data-idpage');
var header = $("#header-"+page).html();
var content = $("#content-"+page).html();
var footer = $("#footer-"+page).html();
// apply
$("#header-page").html(header).trigger('create');
$("#content-page").html(content).trigger('create');
$("#footer-page").html(footer).trigger('create');
});
and this css:
.ui-panel-animate {
transition: transform 1350ms ease 0s !important;
}
.soHide { display: none; }
and this functional example http://jsfiddle.net/wgbn/Hxy37/
I am trying to add a home button to the right of my header. I am also hiding a toolbar behind the header. Now when adding a home button to the header, its wont stay fixed on the header when toggling.
<div data-role="header">
<div data-role="navbar">
<ul>
<li>Settings
</li>
<li>Whatever
</li>
</ul>
</div>
<!-- /navbar -->
<h1>Hide the Toolbar</h1>
<a href="#Home" data-role="button" data-icon="home" data-iconshadow="false"
data-direction="reverse" onclick="empty()" data-transition="slide"
data-iconpos="notext" class="ui-btn-right">home</a>
</div>
<!-- /header -->
$(document).bind('pageinit', function (event) {
loadHomePage();
$("#HomeHeader").on("click", function () {
$("#navMainToolbar").slideToggle(200);
});
$("#navMainToolbar").on("click", function (e) {
e.stopPropagation();
});
});
Here is a demo of the issue.
You need to move the navbar outside of the header:
<div data-role="page">
<div data-role="navbar">
<ul>
<li>Settings
</li>
<li>Whatever
</li>
</ul>
</div>
<!-- /navbar -->
<div data-role="header">
<h1>Hide the Toolbar</h1>
<a href="#Home" data-role="button" data-icon="home" data-iconshadow="false"
data-direction="reverse" onclick="empty()" data-transition="slide" data-iconpos="notext"
class="ui-btn-right">home</a>
</div>
<!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page -->
Example:
http://jsfiddle.net/DMUwp/11/