I am creating a JQuery Mobile WebApp, using JQuery Mobile 1.4.2. When a new page loads, a visual error happens briefly during the page transition:
I believe this is a problem with the theme not being applied during the transition, and when the next page is fully loaded, the theme shows correctly again.
The following is an attribute of both pages: data-theme="a"
Page Declaration:
<section id="landmarks" data-role="page" data-theme="a">
Back Button Declaration:
Back
JSFiddle (click on the "page 2" button, and please notice the change of the nav bar color during the transition): http://jsfiddle.net/jakechasan/stNpV/
Is there a function that should be called before rendering the page to correctly render the back button and the header-bar text?
The data-id="appHeader" in your header is causing the issue. Remove that attribute and your fiddle works fine:
FIDDLE
<header data-role="header" data-position="fixed" >
<h1>Page 1</h1>
</header>
If you need the data attribute, rename it to something other than id, e.g.
data-appid="appHeader"
If you look at the jQM reference (http://api.jquerymobile.com/data-attribute/), you will see that the framework uses data-id.
Your example is using the old pre jQuery Mobile way of achieving permanent footer/header.
jQuery Mobile uses completely different approach.
Working example: http://jsfiddle.net/Gajotres/stNpV/3/
HTML:
<header data-role="header" data-position="fixed" data-id="appHeader" id="appHeader">
<h1>Page 1</h1>
</header>
<section data-role="page" data-theme="b" id="page1">
<div data-role="content">
Page 2
</div>
</section>
<section data-role="page" data-theme="b" id="page2">
<div data-role="content">
Page 21
</div>
</section>
JavaScript:
$( document ).ready(function() {
$('#appHeader').enhanceWithin().toolbar();
});
$(document).on('pagecontainershow', function () {
activePage = $('body').pagecontainer('getActivePage');
pageId = activePage.prop('id');
if (pageId === 'page1') {
activePage.parent().find('.ui-header h1').html('Page 1');
}
if (pageId === 'page2') {
activePage.parent().find('.ui-header h1').html('Page 2');
}
});
Related
I have an index.html containing the following:
index.html
<html>
<head>...</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>Page two
</li>
<li>Page three
</li>
</ul>
</div>
</div>
<div data-role="page" id="pagetwo">
</div>
<div data-role="page" id="pagethree">
<div id="headerPageThree" data-role="header">
<div data-role="main">
<div id="anyDiv"></div>
</div>
</div>
</div>
<body>
<html>
As you see, the navbar in index.html links between pagetwo and pagethree.
Furthermore I have an main.js
main.js
$(document).ready(function () {
$('<select>').attr({'name': 'fuu','id': 'load-fuu',
'data-native-menu': 'false'}).appendTo('#headerPageThree');
$('<option>').html('Load').appendTo('#load-fuu');
$('select').selectmenu();
});
Let's say I open index.html with Chrome. URL is
file:///C:/Users/index.html
Then I click on "Page three" in the navbar. URL is then
file:///C:/Users/index.html#pagethree
The problem is, that the styling of items like the selectmenu looks absolutely strange. It's transparent for example. I add more things than shown in the main.js example and some of them aren't even displayed. Meaning there is nothing where they should be.
But the most curious thing is, that if I press F5 on the page where URL is
file:///C:/Users/index.html#pagethree
, then everything is perfect. I don't get this.
What is the difference between pressing F5 on index.html and pressing F5 on index.html#pagethree?
Can anybody help?
Thanks a lot.
The theme must be set on the element, as it isn't being applied from the parent page. I am not completely sure why though...
This can be done by adding the data-theme attribute when you create the select element:
$(document).ready(function () {
$('<select>').attr(
{'name': 'fuu','id': 'load-fuu',
'data-native-menu':'false',
'data-theme': 'a'
}).appendTo('#headerPageThree');
$('<option>').attr({'value': '1'}).html('Load').appendTo('#load-fuu');
$('#load-fuu').selectmenu();
});
Lastly, if you would like, a codepen example.
Edit: the point made about the option needing a value for selection is valid (though it will still theme properly after we add data-theme)
Instead of the regular jQuery document.ready, use the jQuery Mobile events like pagecreate;
$(document).on("pagecreate","#pagethree", function(){
$('<select>').attr({'name': 'fuu','id': 'load-fuu',
'data-native-menu': 'false'}).appendTo('#headerPageThree');
$('<option>').attr({'value': '1'}).html('Load').appendTo('#load-fuu');
$('select').selectmenu();
});
If you want your option to be selectable, give it a value attribute.
DEMO
I am currently developing a jQuery mobile app. On one page there is a chart created (highcharts) which then can be exported (canvg and canvas2ImagePlugin). However, I noticed that the chart object stays in memory. This has the effect that if the page is opened multiple times and the export button is then pressed, all the previously generated graphs will be exported.
Having a look at Chrome Dev Tool's heap snapshot, I noticed that all the objects stay in memory. To demonstrate this, I made a very basic app on jsfiddle, leaving all the highchart and canvg code out: http://jsfiddle.net/dreischer/Lt4Xw/ --> just click on the button to go to the second page. If you click the export button a pop-up will open. However, if you go back to page one and then page two and click the button again, two pop-ups will open (you might need to allow pop-ups).
I also tried setting analyseGraph null or undefined or using .remove() on pagebeforehide but it didn't help.
Thank you for your help!
Here is the code, for this example:
HTML:
<div data-role="page" id="p1">
<div data-role="header"><h1>Header Page 1</h1></div>
<div data-role="content">
<p>Page 1</p>
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>Page 2</p>
Go To Page 1
<a id="export_graph" data-role="button" style="max-width: 300px;" data-mini="true">Export</a>
</div>
</div>
Javascript:
$(document).on('pagebeforeshow', '#p2', function (){
var Graph = function (){
this.drawGraph = function(){};
this.exportCanvas = function(){
window.open();
};
}
var analyseGraph = new Graph();
analyseGraph.drawGraph();
$(document).on('click', '#export_graph', function(){
analyseGraph.exportCanvas();
});
});
Every time you show page 2 you bind a click event to document. So I think you must use 'off' once in a while, like this
$(document).on('click', '#export_graph', function(){
analyseGraph.exportCanvas();
$(document).off('click');
});
I know that this topic is well known, but all solutions I found don't solve my case. I tried to create a fiddle for this, but it seems that I don't have the know-how to setup it correctly: http://jsfiddle.net/tMKD3/6/. I simplified the code to demonstrate the problem more simplified.
So I describe it here and I hope it is understandable. I have a jQuery Mobile page and a dialog. With onMouseUp event a javascript function should be called, which does something and opens the dialog. The dialog should stay open until the close button is clicked and then the start page is showed again. In my case the dialog closes immediately.
Here the HTML code:
<body>
<div data-role="page" id="start" data-theme="e">
<div data-role="header" data-position="fixed" data-theme="e">
<h1 id="startHeader"></h1>
</div>
<div data-role="content">
</div>
</div>
<!-- Dialog -->
<div data-role="dialog" id="dialog" data-theme="e">
<div data-role="header" data-theme="e" data-position="fixed" data-close-btn="none">
<h3 id="dialogHeader"></h3>
</div>
<div data-role="content" data-theme="e">
</div>
</div>
Here the javascript code:
$(document).ready(function(){
// set button text
$("buttonP1").text("Test");
$("buttonP2").text("Test");
$("buttonP3").text("Test");
});
function setup() {
// set dialog header text
$("dialogHeader").text("Dialog");
$("dialogButton").text("Close");
// call dialog and the dialog should stay opened until the close button is pressed
$.mobile.changePage('#dialog', {
transition: 'pop',
role: 'dialog'
});
return false;
// after calling the dialog I do some additional stuff like reset some counters and so on
}
In similar articles I found the problem was the forgotten return false;, but here it doesn't helps. Has somebody an idea what I did wrong and where the mistake is?
Thank you very much in advance for your help.
Greetings,
Thomas
you can give a timeout for this:
<script>
$(document).ready(function(){
// set button text
$("#buttonP1").text("Test");
$("#buttonP2").text("Test");
$("#buttonP3").text("Test");
});
function setup() {
// set dialog header text
$("#dialogHeader").html("Dialog");
$('#dialogButton').html('Close');
// call dialog and the dialog should stay opened until the close button is pressed
setTimeout(function () {
$.mobile.changePage('#dialog', {
transition: 'pop',
role: 'dialog'
});
}, 100);
return false;
// after calling the dialog I do some additional stuff like reset some counters and so on
}
</script>
How can i close a kendo ui mobile view and also unload all its content. This view contains a youtube video that needs to be stopped / unload once a user click on the back button at the top of the view or on android using the physical back button on the device?
Here is the code to my view, but i can't seems to get the view to close. When i use the back button the view goes away but it content does not unload.
<div data-role="view" id="showpostlayout" data-layout="defaultlayout" data-reload="true">
<div data-role="header">
<div data-role="navbar"><a data-click="closePost" data-role="button" data-align="right">Close</a> </div>
</div>
<div id="mypost">
</div>
</div>
<script>
function closePost() {
$("#showpostlayout").kendoMobileModalView("close");
}
</script>
Its stated in the documentation
<script>
function closePost() {
$("#showpostlayout").data("kendoMobileModalView").close();
}
</script>
give it a whirl.
I've built an app with multiple internal pages such as this:
<div id="states" data-role="page">
<div data-role="header"> Back
<h1>My List</h1>
</div>
<!-- /header -->
<div data-role="content"></div>
<!-- /content -->
<div data-role="footer" data-position="fixed" data-id="myfooter">
<div data-role="navbar">
<ul>
<li>Option</li>
<li>Home</li>
<li>Search</li>
</ul>
</div>
<!-- /navbar -->
</div>
<!-- /footer -->
</div>
<!-- /page -->
When the page is initialized, I load an XML file and populate the pages dynamically. This works fine. If I refresh the screen on the default internal page, it reloads without an issue. I can go 1 or two pages deep, hit the back button... and that works as well. I am using this code to maintain my hash history (I'm a noob).
$(document).bind( "pagebeforechange", function( e, info ) {
if ( typeof info.toPage === "string" ) {
var u = $.mobile.path.parseUrl( info.toPage ),
re = /^#.../;
if ( u.hash.search(re) !== -1 ) {
buildLists( u, info.options );
e.preventDefault();
}
}
});
The problem appears when I go to another page and hit refresh, my data comes back as undefined and all of my data.find(...) calls are void, throwing errors.
Has anyone had this problem? How can I make sure my data is either a) retained or b)reloaded. Is there something I am missing?
I've looked into this code but this isn't as dynamic as I require. All of my listviews are populated via the XML.
You're listening to the wrong event. pagebeforechange is triggered when you change the hash. You want to change it when the hash has changed, as in, when the browser sets it. Listen for 'hashchange.' I'd suggest learning how to do these things without jQuery because libraries just HIDE the actual technology.
If that doesn't work, abandon jQuery (I hate it an never use it and all my sites work on all devices). There's plenty of other ways of doing this. Here's one: http://www.davidpirek.com/blog/on-hash-change-javascript-listener