I can not see why it is not working this dialog. I am using jqm 1.3
Open dialog
<div id="foo" data-role="dialog">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
I have added on the "head"
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js>
and others jqm events are working.
You need to wrap your anchor tag which invokes the dialog inside a page div as given below.
<div data-role="page">
<div data-role="content">
Open dialog
</div>
</div>
<div id="foo" data-role="dialog">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
You can check out an example at Live fiddle
Related
I am trying to open dialog box using jquery. I have followed instruction using link: http://demos.jquerymobile.com/1.2.0/docs/pages/popup/index.html
code looks like:
Dialog
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
Cancel
Delete
</div>
</div>
on jquery ready function, trying to open it through code:
$("#popupDialog").popup();
$("#popupDialog").popup("open");
getting error
Not sure what is wrong and can not find any help on this!!!
Open the popup on the jQM pageshow event not the jQuery ready event:
API: http://api.jquerymobile.com/1.3/pageshow/
$(document).on("pageshow","#page1", function(){
$("#popupDialog").popup("open");
});
DEMO
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();
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
I'm currently developing a website that uses jQuery and jQuery Mobile. It has a Login Dialog which contains a Login button and a Register button.
Register
This is the code for the Register button. I'm closing the LoginDialog and opening the RegisterDialog right after inside the "onClick", but what it actually does is close the LoginDialog, then show the RegisterDialog for a quick moment and send me back to the LoginDialog. It does work if I add:
setTimeout(function() {$.mobile.changePage('#RegisterDialog', {role:'dialog', transition:'pop'});}, 100)
Is there any way to fix this problem without this short delay?
I would appreciate any useful answers very much, since I have been trying to find a solution for this problem for quite some time and I can't think of a way to fix it apart from putting a delay between the close and open functions...
EDIT:
The reason why I want to close the Login Dialog before opening the Register Dialog is simply because I want the user to end up on the main page when he or she closes the Register Dialog. So opening a second dialog within the Login Dialog (which I have also tried to do) doesn't solve my problem...
EDIT:
I found a solution to my problem. I just removed the close button from the dialog and added a cancel button at the bottom which just simply does
$.mobile.changePage('#')
That was really all I needed... Sorry for my noobish question :)
You can chain dialogs in jQM. And since you do nothing more in your onClick handlers than just changePage why not just do it all declaratively.
<div data-role="page" data-theme="a" id="home">
<div data-role="header" data-theme="a" align="center">
<h1>Home</h1>
</div>
<div data-role="content">
<p>You need to log in first</p>
<a href="#LoginDialog" data-rel="dialog" data-transition="pop"
data-role="button" data-icon="check" data-inline="true">Login in</a>
</div>
</div>
<div data-role="page" data-theme="d" id="LoginDialog">
<div data-role="header" data-theme="a" align="center">
<h1>Login</h1>
</div>
<div data-role="content">
<p>Provide your login information</p>
<a href="#RegisterDialog" data-rel="dialog" data-transition="pop"
data-role="button" data-icon="check" data-inline="true">Register</a>
</div>
</div>
<div data-role="page" data-theme="e" id="RegisterDialog">
<div data-role="header" data-theme="e" align="center">
<h1>Register</h1>
</div>
<div data-role="content">
<p>Provide your registration information</p>
<a href="#LoginDialog" data-rel="dialog" data-transition="pop"
data-role="button" data-icon="check" data-inline="true">Create an account and retutn to Login</a>
</div>
</div>
Here is jsFiddle
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"