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
Related
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 created this snippet in a simple Phonegap 3.1 app, based on the JQuery Mobile popup documentation:
<div data-role="popup" id="popupMenu" data-theme="e">
<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="e">
<li>Help</li>
<li>About</li>
</ul>
</div>
<a href="#popupMenu" data-rel="popup" data-role="button">
Click for menu
</a>
Clicking the button brings up the menu.
I also have this snippet in an external .js file:
$(document).ready( function() {
document.addEventListener("menubutton", onMenuKeyDown, false);
})
function onMenuKeyDown() {
alert("Menu key pressed!");
// what goes here?
}
Pressing the menu button brings up the alert, so I know the listener is working. Now, I want to add some code to the onMenuKeyDown() function so it will bring up the menu loaded by the button in the first snippet. The code needs to be equivalent to clicking
Click here
How would I do that?
Thanks.
Well, I found a way to do this. It works, but it seems kind of hacky. Suggestions for other ways to do this are welcome.
First, make the original link invisible and give it an ID:
<a href="#popupMenu" style="display: none;" id="hammerTime" data-rel="popup" data-role="button" >
Can't touch this!
</a>
Then have the menu button click the invisible link:
function onMenuKeyDown() {
// alert("Menu key pressed!");
$("#hammerTime").click()
}
Hopefully someone else will find this useful along the way.
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>
On my jQuery mobile app;
On menu.html and inside body I do something like this to go help.html;
....
$(document).off('pageinit', '#menupage').on('pageinit', '#menupage', function() {
$(document).off('click', '#help').on('click', '#help', function(){
$.mobile.changePage("help.html", {
reloadPage: true,
transition: "flip",
reverse: false
});
});
}
....
<li><a id="help" href="#" role="link" data-role="none">
<div class="img help"></div>
<div class="menuTitle langMenuItem3">Help</div>
<div class="arrow"></div>
</a></li>
Then on the help.html page I have a back button like this to go back to menu.html:
<header data-role="header">
<a href="#" data-rel="back" class="button" data-role="none">
<div class="arrow_reverse"></div><span class="langBack">Terug</span>
</a>
<div class="pageTitle">Over deze app</div>
</header>
My problem is this works under normal conditions, BUT if I make a refresh on menu.html, then go to help.html and then go back to menu again, menu.html does not load properly, I can see the page visually loaded ok but on firebug I see that some necessary javascripts inside tags does not hit anymore, It never hits any javascripts anywhere on menu.html anymore, just loads the previous html from cache thats all. Also the page title of menu.html does not change correctly and stays as "Help" after that point.
my full menu.html looks like this;
http://jsfiddle.net/M5CYZ/
Any ideas?
Do it this way.
Give back button an ID
<a href="#" id="backbtn" class="button">
<div class="arrow_reverse"></div><span class="langBack">Terug</span>
</a>
and then add the below code in help.html
$('#backbutton').off('click').on('click', function () {
$.mobile.changePage("menu.html", {
reloadPage: true,
transition: "flip",
reverse: true
});
});
This is a wild guess but according to your code this is a normal behaviour.
jQuery Moible event pageinit will trigger only once during the initial page load and unless page is refreshed (manually, with rel="external" or in your case reloadPage="true") it will never trigger again.
If you want javascript to execute again each time page is visited then use pagebeforeshow event instead. As seen in your example, removing pageinit and adding it back will not help you.
If you want to find more, read my other answer/article about page events: jQuery Mobile: document ready vs page events
And here's an example to prove my point: http://jsfiddle.net/Gajotres/Q3Usv/
$(document).on('pageinit', '#index', function(){
alert('Pageinit');
});
$(document).on('pagebeforeshow', '#index', function(){
alert('Pagebeforeshow');
});
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);