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>
Related
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');
}
});
I'm trying to close a popup / dialog when a user presses a button inside the popup, and navigate to another page (single page application, multiple "pages").
jQM 1.4.0
If I tap the YES-button inside the popup, it will navigate to #page3 wich I want but then jump back to the startpage.
If I comment out the .popup("close"); it works, but I need to close the popup before I do stuff. What is wrong here?
js
$("#popupyes").on("tap", function(e)
{
$("#popupDialog").popup("close"); // <---- doesn't work
//call some js-function before navigate to #page3
});
html
Button
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="a" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Head</h1>
</div>
<div data-role="main" class="ui-content">
<h3 class="ui-title">Text.</h3>
<p>Text?</p>
No
Abort
<a id="popupyes" href="#page3" class="ui-btn ui-shadow ui-corner-all ui-btn-inline">Yes</a>
</div>
</div>
Update
I can use $("#popupDialog").hide();
But then it's still in memory, only hidden... or wait, will it terminate by itself after a while?
You can simply listen to popupafterclose to call any function after popup is completely closed.
$(document).on("pagecreate", function () {
$("#popupID a").on("tap", function () {
/* do something */
$("#popupID").popup({
afterclose: function () {
/* do something */
}
}, "close");
});
});
Demo
I am using JqueryMobile 1.3.2. I would like to add some event when user clicking the header. For example, popup an alert "Hello". What can I do?
<div data-role="collapsible">
<h3>I'm a header</h3>
<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
Listen to two events instead of binding a click event. Collapsibles have two special events you can listen to and run code when they trigger, expand and collapse.
For jQuery Mobile 1.4 collapsibleexpand and collapsiblecollapse.
$(".selector").on("collapse", function () {
alert("Collapsed");
});
$(".selector").on("expand", function () {
alert("Expanded");
});
Demo
$('#Selector').bind('expand', function () {
alert('Expand')
}).bind('collapse', function () {
alert('collapse')
});
<div data-role="collapsible" id="Selector">
<h4>Heading</h4>
<p>How can I popup an alert of “Hello” after clicking collapsible under JqueryMobile</p>
</div>
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');
});
Is it possible to open a dialog in Jquery Mobile from javascript?
I tried doing something like this but it didnt work:
<a id='lnkDialog' href="goals.html" data-rel="dialog" data-transition="pop" style='display:none;'></a>
and then in js
document.getElementById('lnkDialog').click();
Any help would be appreciated
We'll need a lot more information, but unless #lnkDialog already has a function binded to a click event, that's not going to work. I'm assuming the data-rel contains the ID of the modal that will pop up.
It'd be more like
$('#lnkDialog').on({
click:
function() {
var selector = '#' + $(this).attr('data-rel');
$(selector).show();
}
});
but again, a LOT more information needed.
Here's what i do.
In my markup i have a dialog defined inside body, towards the end of it as follows:
<div data-role="dialog" id="messagebox">
<div data-role="header">
<h1>Message</h1>
</div><!-- /header -->
<div data-role="content">
<span id="phMessage"></span>
</div>
</div>
Then in javascript I have:
function showMessage(message) {
$("#phMessage").html(message);
$.mobile.changePage('#messagebox', 'pop', false, true);
}
The only thing you really need is $.mobile.changePage('#messagebox', 'pop', false, true);