I'm trying to dynamically add a popup to my page, whith nice JQM content (buttons, etc). The popup is added, but no styles applied.
Here's the code (it's not so long, so I copied here):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head>
<body>
<div id='page' data-role='page'>
<div data-role='header'>
<h1> Header </h1>
</div>
<div data-role='content'>
<p>Code sample</p>
<a id='add' data-role='button'> Add popup </a>
<a href='#popup' data-role='button' data-rel='popup'> Show dynamic popup </a>
<a href='#popup2' data-role='button' data-rel='popup'> Show static popup </a>
</div>
<div id="popup2" data-role='popup'>
<div data-role="header">
<h1>Popup Header</h1>
</div>
<div data-role="content">
<p>Some content</p>
</div>
</div>
</div>
<script>
$(document).ready( function(){
$('#add').bind( 'click', function(ev){
var
page = $('#page');
var
popup = $('<div id="popup" data-role="popup"></div>').appendTo( page )
, header = $('<div data-role="header"> <h1>Popup Header</h1> </div>').appendTo( popup )
, content = $('<div data-role="content"> <p>Some content</p> </div>').appendTo( popup );
popup.popup();
});
});
</script>
</body>
</html>
there's a JsBin version, to play around with it.
So if I click to the Show static popup it displays the header nicely, but If I click Add popup, than show this newly added popup with Show dynamic popup the content of the popup looks differently.(using chrome)
So the question is: How can I enchanced the dynamically added popup content?
I found the solution, you can insert the popup in the same level as content, for ex.
<div data-role="page" >
<div data-role="content" ></div>
<div data-role="popup"></div>
</div>
Well with this way the popup function is good, but when you insert code for example from ajax request you have to insert the popup in the page and recall the method popup of the component.
ex .js file in the ajax call (the response is only the code of popup):
$('#page').append(response).trigger('create');
$("#popup").popup();
Remember that when you declare some popup in the principal page and it is not the same level as content. JQM automatically puts the popup in this place and it doesn't generate a problem.
You have to repaint the dynamically added content. To do this add page.page('destroy').page(); after popup.popup();.
working example: http://jsbin.com/orehuv/3/
Related
I'm facing an issue with the latest beta release of jQuery Mobile. I'm trying to implement a fixed persistent footer navbar, the persistent part is working but whenever I click a link and navigate to another page the ui-btn-active class is lost and no link appears selected.
Here's a demo fiddle that reproduces the issue: http://jsfiddle.net/koala_dev/DgdMg/2/
And here's the complete markup:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile.structure-1.4.0-beta.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.js"></script>
<script>
$(function() {
$("[data-role='header'],[data-role='footer']").toolbar();
$.mobile.window.triggerHandler("throttledresize");
});
</script>
</head>
<body>
<div data-role="header" data-position="fixed" data-id="header">
<h1>My fixed header</h1>
</div>
<div data-role="page" id="page-1">
<div data-role="content">
<p>Page 1 content goes here.</p>
</div>
</div>
<!-- /page -->
<div data-role="page" id="page-2">
<div data-role="content">
<p>Page 2 content goes here.</p>
</div>
</div>
<!-- /page -->
<div data-role="footer" data-position="fixed" data-id="footer">
<div data-role="navbar">
<ul>
<li>Page 1
</li>
<li>Page 2
</li>
</ul>
</div>
</div>
</body>
</html>
I followed the instruction from the demos in the docs (which don't seem to be complete) and placed the footer outside the page container. I tried adding .ui-state-persist to the first link and to both links but it didn't produce any effect and since even the demos are not working correctly I'm not sure how to proceed.
I would appreciate any insight on how to keep the ui-btn-active class for the clicked link.
Well, I found this on jQM updated demo page. Adding .ui-btn-active for external fixed toolbars depends on data-role=page's data-title attribute.
<div data-role="page" id="page-1" data-title="Page 1">
Navbar buttons text, should match data-title in order to determine which button should be updated with .ui-btn-active, as well as updating data-role=header title.
Demo
$(document).on("pageinit", function () {
$("[data-role='navbar']").navbar();
$("[data-role='header'], [data-role='footer']").toolbar();
});
// Update the contents of the toolbars
$(document).on("pageshow", "[data-role='page']", function () {
// Each of the four pages in this demo has a data-title attribute
// which value is equal to the text of the nav button
// For example, on first page: <div data-role="page" data-title="Info">
var current = $(this).jqmData("title");
// Change the heading
$("[data-role='header'] h1").text(current);
// Remove active class from nav buttons
$("[data-role='navbar'] a.ui-btn-active").removeClass("ui-btn-active");
// Add active class to current nav button
$("[data-role='navbar'] a").each(function () {
if ($(this).text() === current) {
$(this).addClass("ui-btn-active");
}
});
});
Source: http://view.jquerymobile.com/1.4.0-rc.1/dist/demos/toolbar-fixed-persistent/
I had this same issue for links in the navbar. It was very frustrating. I fired up firebug and debugged jqm. I ended up patching the jquery mobile code like so:
In jquery.mobile-1.4.0.js
From:
$navbtns.removeClass( $.mobile.activeBtnClass );
activeBtn.addClass( $.mobile.activeBtnClass );
To:
if ( !($navbtns.filter( ".ui-state-persist" ) ) ) {
$navbtns.removeClass( $.mobile.activeBtnClass );
activeBtn.addClass( $.mobile.activeBtnClass );
}
I minified jqm here: http://jscompress.com/
I want to open a new page as popup. I google it but not able to find answer.
Is Possible to do like that ??
Any Other Method to like that..I search all the Jquery mobile Doc. but not able to find any thing.
Here is my Code::
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jquery Popup</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page">
<h1> Jquery Open Page in PopUp Examples</h1>
Open Page in PopUp
</div>
<div data-role="page">
<div data-role="Header">
<p>
PopUp
</p>
</div>
<div data-role="content">
<h2>
Content Page ??
</h2>
<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 data-rel="dialog" attribute.
</p>
</div>
<div data-role="Footer">
Sounds Good
Cancel
</div>
</div>
</body>
</html>
Short answer is no, it cant be done, at least in jQuery Mobile versions < 1.4. Popup as it is MUST be part of the page DIV and as such it can't be accessed outside of a page.
There is another solution, you can replace your second page div with data-role="popup" and place it inside a first page DIV, it would look like this:
jsFiddle example: http://jsfiddle.net/Gajotres/PMrDn/103/
HTML :
<div data-role="page">
<h1> Jquery Open Page in PopUp Examples</h1>
Open Page in PopUp
<div data-role="popup" id="popupExample">
<div data-role="header"class="ui-content">
<p>
PopUp
</p>
</div>
<div data-role="content">
<h2>
Content Page ??
</h2>
<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 data-rel="dialog" attribute.
</p>
</div>
<div data-role="footer" class="ui-content">
Sounds Good
Cancel
</div>
</div>
</div>
You will need to play with a CSS to make it look nicer.
Other solution would be to wait for jQuery Mobile 1.4 which will allow for popup to be placed outside page DIV, so you can share it among several pages. Unfortunately jQuery Mobile is in alpha state and this feature is still not working correctly.
I have a site built on jQuery Mobile and am trying to get our Terms of Service to open in a dialog.
TOS page is a full page itself (separate URL) and when I link with the dialog reference it simply opens as a new page.
My footer is
<div data-role="footer" data-theme="<?php echo $dataTheme ?>">
<div data-role="navbar">
<ul>
<li>Home</li>
<li><a rel="external" href="http://www.trackmaster.com">Full Site</a></li>
<li>Terms</li>
<li>My Account</li>
</ul>
</div>
</div>
and my tos.php page is (content stripped for convenience)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="AXCIS Information Network">
<title>TrackMaster Terms of Service</title>
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/themes/TrackMasterMobile.min.css" />
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://mobiletest.trackmaster.com/javascript/frameworks/jquery-current.min.js"></script>
<link rel="stylesheet" href="http://mobiletest.trackmaster.com/styles/mobile/mobileStyle.css" />
<!-- Make sure there is a back button on each page -->
<script type="text/javascript">
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
$.mobile.page.prototype.options.addBackBtn= true;
});
</script>
<script src="http://mobiletest.trackmaster.com/javascript/frameworks/jquery.mobile-current.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="main">
<div data-role="header">
<h1 class="headerLink"><span class="tmFirst">Track</span><span class="tmSecond">Master</span> </h1>
Home
</div>
<div data-role="content" data-theme="a">
<div data-role="content" class="informationText">
Blah, Blah, Blah
</div>
</div> <!-- this one closes out the content div set in the section header template -->
<div data-role="footer" data-theme="a">
<div data-role="navbar">
<ul>
<li>Home</li>
<li><a rel="external" href="http://www.trackmaster.com">Full Site</a></li>
<li>Terms</li>
<li>My Account</li>
</ul>
</div>
<h5 class="copyrightText">© 2013 Axcis Information Network, Inc.</h5>
<div class="ads">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7303976721498796";
/* Mobile Bottom */
google_ad_slot = "5684536575";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div> <!-- this one closes out the page div set in the header template -->
</body>
</html>
I have tried changing the data role of the TOS page to a dialog but that made no difference.
Am I not understanding the way dialog links can be used (from the docs I thought I could open one from any URL simply by defining the link as a dialog)
Site itself is http://mobiletest.trackmaster.com and it is the Terms link in the footer I am trying to get as a dialog (I don't want to include the content on every page, only when the user asks for it)
Any help appreciated (even pointing out the dumb things I am missing)
You are either missing a <div> or they don't match up; you've got two "content" divs.
EDIT: It's probably OK to have one within another, just noting that the <div data-role="page"> is never closed. Don't know if that makes any difference.
Found the issue.
The line in the header
$.mobile.ajaxEnabled = false;
I commented it out and the dialog link works as expected.
was the problem, I am testing it to see what else gets broken when I pull it out :-).
Data role for the TOS page is NOT relevant as loading it as a dialog automatically assigns the dialog data role
I've developed an app for ios and android using phonegap. It's a dictionary app and it will display result in multiple tab (the tab is a div, every div will display different content). I use my own code so that only one div is shown at any time. Now I want to include jquerymobile so that I can apply a animation/transition when switching to other div.
So I add the data-role="page" to each div, which I assume will work immediately(like sample code below). But something is not right.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<table id="headergroup">
<tr><td>
<input>.........
<img>.......
</table>
<wrapper>
<div data-role="page" id="tab1">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page1 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
.........other div......
<div data-role="page" id="tabN">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>PageN content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</wrapper>
<div id="footer>
<img .......>
</div>
</body>
</html>
Supposely, my app should display the div(s) in the wrapper only. But the problem is, now my app will display the div with data-role=page in full screen and on top of other element (my app header and footer were not shown).
Is my implementation correct? How do I overcome this problem? Thanks.
You may get by with this on the first page, but on all other pages you are loading in via JQM-Ajax (default), you will only grab what's inside your first(!) div-data-role="page" from the page you are loading. Everything else (table, 2nd, 3rd page-div will not be loaded, because it's outside the page-div.
Have a look at the JQM docs on page anatomy and linking pages.
JQM is based on page-divs, so also in your code the page-div will get most "JQM attention" being set to fullscreen size and of cource hovering above everything else.
To use JQM you will either go with
Single page layout = page by page
Multi pape layout = multiple pages contained in one document.
Since you are using Phonegap, which I think bundles everything into a single file eventually, you may be better off with multipage. There is also a subpage widget or multiview, if you need to load documents with multiple "nested pages" from your initial page.
I have a dialog (not external html), which is displayed when I click on a button on the page, it works fine if the html containing the dialog is the first page to be accessed , but if that file is opened by clicking on an href from another page, the dialog doesn't show up when I click the button.
Here is the code for the page containing the dialog ... The alert in the click event of the button is showing up even when this is the not the first page to be accessed, but the dialog doesn't show up.
<!DOCTYPE html>
<html>
<head>
<title>Create Team</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<!-- Page starts here -->
<div data-role="page" data-theme="b" id="page1">
<div data-role="header" id="hdrMain" name="hdrMain"
data-nobackbtn="true">
<h1>Test screen</h1>
</div>
<div data-role="content" id="contentMain" name="contentMain">
<div id="fullnamediv" data-role="fieldcontain">
<label for="fullname" id="fullnameLabel" name="fullnameLabel">Team
Name*</label> <input id="fullname" name="fullname_r" type="text" />
</div>
<div id="submitDiv" data-role="fieldcontain">
<a id="buttonSave" name="buttonSave" href="#" data-role="button"
data-inline="true">Save</a>
</div>
</div>
<!-- contentMain -->
<div data-role="footer" id="ftrMain" name="ftrMain"></div>
<script>
$("#page1").bind("pagecreate", function() {
$('#buttonSave').click(function() {
alert("aaaa");
$.mobile.changePage('#successdiv', {
transition: 'pop',
reverse: false,
changeHash: true
});
alert("after change");
return true;
});
});
</script>
</div>
<!-- page1 -->
<div data-role="dialog" data-theme="a" id="successdiv">
<div data-role="header" data-theme="f">
<h1>Error</h1>
</div>
<div data-role="content">
<p>This is Page 2</p>
<button type="submit" data-theme="e" name="successok"
value="submit-value" id="successbutton">Close Dialog</button>
</div>
</div>
<!-- Page ends here -->
</body>
</html>
You use jQuery Mobile v1.0 but at the same time you pass incorrect arguments to $.mobile.changePage like if it were say v1.0 alpha. Not sure if it solves your problem but worth trying:
$.mobile.changePage('#successdiv', {
transition: 'pop',
reverse: false,
changeHash: true
});
When I jump from one jquery mobile page to another via a hrefs, I have to set the rel attribute to external, like this:
page2
dfsq is right, only the div[data-role="page"] is loaded when you link to this page from another page. I'd suggest moving the dialog into its own html file and opening it either via
open dialog
or
$.mobile.changePage('your_dialog.htm', {role: 'dialog', transition: 'pop'});