I'm trying to make the header button of an app launch an embedded form on a page. Any ideas if this is possible or if not what the manual JS would look like to achieve it?
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Devices</h1>
<a class="ui-btn-right ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-down-a ui-btn-up-a" data-icon="gear" data-rel="dialog" data-transition="flip" href="#filter_form" data-theme="a"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Options</span><span class="ui-icon ui-icon-gear ui-icon-shadow"></span></span></a>
</div>
<!-- other page stuff -->
<div id='filter_form' style='display: none'>
<h3>Device Criteria</h3>
<form accept-charset="UTF-8" action="/devices" method="get">
<div data-role='fieldcontain'>
...
</div>
<div>
<button data-theme='a'>Submit</button>
</div>
</form>
</div>
<script>
//<![CDATA[
$(function(){
$('.show_filter_form').click(function(){
console.log("in click handler")
$.mobile.changePage($('#filter_form form'), {transition: 'pop', changeHash: false, role: 'dialog'});
return false;
})
})
//]]>
</script>
The click is getting triggered but nothing happens on the page except an unstyled back button showing up in the header.
I've setup a js fiddle for it if you have any ideas: http://jsfiddle.net/BHMmP/
Regarding your JS coding, dialog will be pop-up once click on ".show_filter_form". But, Where is this element ".show_filter_form"?
Related
I am trying to get a jquery mobile panel working. Currently, when the panel opens it slides all the way covering my page instead of just part way. I'm thinking it has to be something to do with initialization of the panel.
Any ideas?
Here is the jsfiddle
HTML
<div id="panel_home" data-role="panel" data-position="right" data-display="slide" data-theme="a">
<ul data-role="listview">
<li>Panel Button 1</li>
<li>Panel Button 2</li>
<li>Panel Button 3</li>
</ul>
</div>
<div data-role="page" id="page_home">
<div data-role="header" data-position="fixed" >
<a href="#panel_home" > <img border="0"
src="http://cdn-img.easyicon.net/png/11464/1146409.gif"
width="30" height="30">
</a>
</div>
<div data-role="content" >
<h2>Page Content</h2>
</div>
<div data-role="footer" data-position="fixed">
<h2>Footer Content</h2>
</div>
</div>
JS
$(document).one('mobileinit', function () {
$("[data-role=panel]").panel().enhanceWithin();
});
External panels should be initialized on Jquery's document.ready:
$( document ).ready(function() {
$("[data-role=panel]").panel().enhanceWithin();
});
Updated FIDDLE
I am having a problem with nested popups with v1.4.0.RC.1. It works in v1.3.2. I have a footer, which has a button, which opens a popup, which contains a listview, and one of the listitems opens a popup. Again, in v1.3.2, this works as expected... but not with v1.4.0.RC.1. I understand that v1.4 isn't out yet, but I pose this issue anyway as someone may have some insight that I haven't come up with yet. I have a fiddle for both versions. The code for each is exactly the same. The only difference is that the first fiddle uses the 1.3.2 libraries and the second fiddle uses the v1.4.0 libraries.
Also, I have seen answers linking to a jQM popup page, showing that the page itself indicates that chaining popups isn't allowed. However, that's typically a v1.2.0 of jQM. The popup demo in v1.3.2 doesn't indicate that restriction, and is supported by the fact that it does in fact work (see fiddle below).
That being said, if anybody has any guidance or information, I'd really appreciate it. I've poured through the limited 1.4.0 documentation and the interwebs and the only thing I can come up with is doing a setTimeout within the popupafterclose event to open another popup. That seems like a sloppy hack to me, and I'd like to avoid doing that if at all possible.
Anyway, below is code and fiddles for 1.3.2 and 1.4.0.RC.1.
Thanks!
<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
<h1>Popups from popups using jQM-1.3.2</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
With jQM-1.3.2, the menu button down there opens a popup window as a menu. In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
Menu <--- Click this...
</div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
<ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
<li>Edit</li>
<li>Delete <--- ...then this</li>
<li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
<li>Select All</li>
</ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
<div class="ui-corner-top" data-role="header">
<h1>Delete Transaction</h1>
</div>
<div class="ui-corner-bottom ui-content" data-role="content" >
<h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
<p>This action cannot be undone!</p>
<div class="ui-grid-a point6em" style="margin-top:10px;">
<div class="ui-block-a">
<a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
</div>
<div class="ui-block-b point6em">
<a data-role="button" data-rel="back" data-mini="true">Cancel</a>
</div>
</div>
</div>
</div>
fiddle for v1.3.2 above
<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
<h1>Popups from popups using jQM-1.4.0.RC.1</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
With jQM-1.3.2, the menu button down there opens a popup window as a menu. In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
Menu <--- Click this...
</div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
<ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
<li>Edit</li>
<li>Delete <--- ...then this</li>
<li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
<li>Select All</li>
</ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
<div class="ui-corner-top" data-role="header">
<h1>Delete Transaction</h1>
</div>
<div class="ui-corner-bottom ui-content" data-role="content" >
<h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
<p>This action cannot be undone!</p>
<div class="ui-grid-a point6em" style="margin-top:10px;">
<div class="ui-block-a">
<a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
</div>
<div class="ui-block-b point6em">
<a data-role="button" data-rel="back" data-mini="true">Cancel</a>
</div>
</div>
</div>
</div>
fiddle for v1.4.0.RC.1 above
I Did do my home work but i cannot get it to work.The Button Styles Are Not Refreshing Please Help.
<div id="qpage" data-role="page">
<div data-role="header">
<a id="exit-quiz" data-role="button" data-icon="arrow-l" >Exit</a>
<h1 id="ques-title">#ques-title</h1></div>
<div data-role="content">
<div class="ui-bar-a" id="ques-timer">
#ques-timer
</div>
<div id="question"><h3>#Question</h3></div>
<div class=".button-set" data-role="controlgroup" id="answerbox">
<a data-role="button" id="answer_1">#answer_1</a>
<a data-role="button" id="answer_2">#answer_2</a>
<a data-role="button" id="answer_3">#answer_3</a>
<a data-role="button" id="answer_4">#answer_4</a>
</div>
<div id="explanation">
</div>
</div>
<div data-role="footer"><h2>Copyright Kaveen</h2></div>
</div>
This is Th Javascript I wrote
$("#subject1").bind('click',function(){
var json = $.get("test.json",function(data){
$("#question").html(data.question);
$("#answer_1").html(data.mcq_1);
$("#answer_2").html(data.mcq_2);
$("#answer_3").html(data.mcq_3);
$("#answer_4").html(data.mcq_4);
});
i did try $( "div[data-role=page]" ).page( "destroy" ).page(); But it wont work Plese Help Me Thank you. JSFIDDLE http://jsfiddle.net/xRTCu/
Try this, it should work:
$("#answer_1").button("refresh");
If that is also not working, try this
$("#answer_1").buttonMarkup();
EDIT: jsfiddle updated http://jsfiddle.net/androdify/xRTCu/4/
Use this:
$("#answer_1 .ui-btn-text").text(data.mcq_1);
Why? Because jquery mobile adds a span around the button which has class="ui-btn-text"
Try $( "div[data-role=page]" ).trigger ("create") if you're using the latest version of jQuery mobile. page was deprecated some versions ago.
If you're using an older version of jQM, then you could use $("[data-role=button]").button().button ("refresh") after you're done appending your JSON data into those buttons.
EDIT
From your fiddle I can see that you're using html() and that's erasing jQM's markup. This is what data-role=button converts your markup:
<a data-role="button" id="answer_1">#answer_1</a>
//becomes
<a data-role="button" id="answer_1" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-first-child ui-btn-up-c">
<span class="ui-btn-inner">
<span class="ui-btn-text">mcq wrong</span>
</span>
</a>
So by using html() youre effectively erasing everything inside a. Try searching for ui-btn-text class inside a like this and then run html with your text in it:
$(".ui-btn-text", "#answer_1").html(data.mcq_1);
//OR
$("#answer_1").find(".ui-btn-text").html(data.mcq_1);
Here's your updated demo : http://jsfiddle.net/hungerpain/xRTCu/3/
I have a popup set up on the index.html as follows:
<!-- Choice Popup -->
<div class="ui-popup-screen ui-overlay-a ui-screen-hidden" id="popupDialog-screen"></div>
<div data-role="popup" class="ui-popup-container ui-overlay-a" data-transition="pop" id="choicePopup">
<div data-role="popup" id="choicePopup" data-overlay-theme="b" data-theme="c" data-dismissible="false" class="ui-corner-all ui-popup ui-body-c ui-overlay-shadow" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="slidedown" data-position-to="window" data-arrow="true" data-arrow-sides="t,b,l,r">
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content ui-body-d" role="main">
<h1 class="ui-title" role="heading" aria-level="1">Your decision has been made:</h1>
<h2 align="center" id="choice-p"></h2>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-inline">
<span class="ui-btn-inner">
<span class="ui-btn-text">Thanks</span>
</span>
</a>
<a href="#" onclick="eatsome('Food'); return false;" data-role="button" data-inline="true" data-transition="flow" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-inline">
<span class="ui-btn-inner">
<span class="ui-btn-text">Again!</span>
</span>
</a>
</div>
</div>
The problem is, I don't know why its booting on loading, some attribute is triggering it, can anyone find the issue? Thank you
There are several issues with your markup and code:
First of all your markup for the popup looks already jQM-enhanced like being copied from the browser's developer view. Therefore make it normal first. It might look like
<div data-role="popup" id="choicePopup" data-overlay-theme="b" data-theme="c" data-dismissible="false" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1></h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Your decision has been made:</h3>
<a id="btnThanks" href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Thanks</a>
<a id="btnAgain" href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Again!</a>
</div>
</div>
Second a popup markup should reside inside the same page as the link that opens it.
<div data-role="page" id="main">
...
<div data-role="popup" id="choicePopup">
...
</div>
</div>
Third use proper jQM events to place your code that manipulates the content.
Forth Stop using onclick and other on* event attributes with jQM. Once again use proper jQM or jQuery events.
So instead of
<a href="#" onclick="eatsome('Food'); return false;" ... >Again!</a>
use
<a id="#btnAgain" href="#" ... >Again!</a>
$("#btnAgain").click(function(){
eatsome('Food');
return false;
});
Fifth After injecting html you need to call trigger('create') on a parent element to let jQM enhance and style the markup that you injected.
var content = '<form>;
...
content += '</form>;
$("div.settings-content").html(content).trigger("create");
And here is working jsFiddle based on your markup. As you can see the popup doesn't pop up on its own. There are two buttons that show how to open the popup declaratively and programmatically. And content for settings page is injected and styled properly.
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'});