Expected Scenario: I have two div in one page one is popup and other is the main page. When I click on popup popup should open and when i click close on pop up it should show the other div
Actual Scenario: WHen I close it doesnot show the other div instead it goes to the previous page
Using Jquery Mobile 1.3.0
$.mobile.changePage("#publishlogonmanage", { role: "dialog", transition:"slideup",reload:false,reverse: false,changeHash: false });
PopUP COde
<div data-role="page" id="publishlogonmanage" data-history="false" data-overlay-theme="b" data-theme="b">
<div data-role="header" data-theme="a">
<a data-icon="delete" id="logonClose" data-mini="true" data-theme="a" data-rel="back" data-role="button" class="ui-btn-left"></a>
<a data-icon="delete" data-theme="a" data-transition="flip" data-rel="back" data-mini="true" data-role="button" class="ui-btn-left" style="width:80px;" >Close</a>
</div>
<div data-role="content" style="padding: 0; margin: 0; background: #FFFFFF;">
This is Body
</div>
</div>
Main Page:
<div data-role="page" data-theme="b" id="MobilePage" data-overlay-theme="b">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="a">
<div style="float: left; margin-left: 5px;"> Back</div>
<h1 id="title"> 10 </h1>
</div>
<div data-role="content" class="master-wrapper-page">
This is body
<div style="margin-top:7px;display:none;float: right !important; margin-left: 0px !important;overflow:ellipsis;white-space: nowrap;" data-close-btn="right" id="ManageLogon" data-mini="true" onclick="LoadDialog();" data-rel="popup"></div><img src="../../../images/logon-E.png" style="1px solid #666666;margin-top:3px;margin-right:-5px float: right;height:30px;width:30px;" id="logonexp" /></div>
</div>
</div>
Related
I have tried the following:
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My Page</h1>
<label for="nfcSwitch" class="ui-hidden-accessible">NFC:</label>
<input data-role="flipswitch" name="nfcSwitch" id="nfcSwitch" data-on-text="NFC on" data-off-text="NFC off" type="checkbox" />
</div>
but it shows the flipswitch on the left, under the h1
HTML
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>My Page</h1>
<div class="switch">
<label for="nfcSwitch" class="ui-hidden-accessible">NFC:</label>
<input data-role="flipswitch" name="nfcSwitch" id="nfcSwitch" data-on-text="NFC on" data-off-text="NFC off" type="checkbox"/>
</div>
</div>
CSS
.switch
{
position: absolute;
top: 0px;
right: 0px;
}
JSFiddle
I am having an issue with the jQuery mobile's loadPage() method. I am using the method to load a popup container. When the page gets loaded, the #popup DIV is empty (no .header, .content, or .footer DIVs) when I inspect it. Am I doing something wrong?
HTML (popup.php)
<div id="popup" data-role="popup" data-overlay-theme="a">
<div class="header" data-role="header">
<h1>Title</h1>
</div>
<div class="content" data-role="content" data-iscroll>
Something.
</div>
<div class="footer" data-role="footer">
<a class="close" href="#" data-rel="back" data-role="button" data-inline="true" data-mini="true">Close</a>
</div>
</div>
JavaScript
$(document).on('pagecreate', '.find-page', function() {
// load popup once
if (!$('#popup').length) {
$.mobile.loadPage('popup.php', { changeHash: false });
}
});
I've created a button
<a data-role="button">
inside a Popup. Here is Popup:
<div data-role="popup" id="popupRegister" data-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" class="ui-header ui-bar-b"
role="banner">
<h1 class="ui-title" role="heading" aria-level="1">Success!!</h1>
</div>
<div data-role="" data-theme="a" class="ui-body-a"
role="main" style="padding:15px;">
<h1>Thank you for regestering with us.</h1>
<p>You may now continue to the app.</p>
<!-- this is the button -->
<a href="#" id="takeMeHome" data-role="button" data-rel="back"
data-theme="a" data-inline="true"
data-corners="true" data-shadow="true"
data-iconshadow="true" data-wrapperels="span"
class="ui-btn ui-shadow ui-btn-corner-all ui-btn-inline ui-btn-up-a">
<span class="ui-btn-inner"><span class="ui-btn-text">GO</span></span>
</a>
</div>
</div>
When I click the button, console.log is responding but page does not redirect. Why?
Here is how I redirect:
$("#takeMeHome").click( function(){
console.log("lets go home");
//window.location.href = "home.html";
//localStorage.registered=true;
//window.location.replace("home.html");
window.location.href = ("home.html");
});
Replace
window.location.href = ("home.html");
with
$.mobile.changePage('home.html');
And add data-history="false" to popup div.
I am able to implement panel .But i need my pages should display with panel.Actually when i click panel button's then it hide panel .show page on whole screen .But i need to show page with panel.
Here is my code.
http://jsfiddle.net/ravi1989/TXRjk/2/
Jump to second page
Jump to third page
First Page
Next
Open Pannel
<div data-role="page" id="second">
<div data-role="panel" id="mypanel">
Jump to first page
Jump to third page
</div>
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="third">
<div data-role="panel" id="mypanel">
Jump to first page
Jump to second page
</div>
<div data-theme="a" data-role="header">
<h3>
Third Page
</h3>
Back
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
I think it should be what you're wanting:
<div data-role="page" id="index">
<div data-role="panel" id="mypanel">
Jump to index page
Jump to second page
Jump to third page
</div>
<div data-theme="a" data-role="header">
<h3 id="header-page">
First Page
</h3>
</div>
<div data-role="content" id="content-page">
<a data-role="button" href="#mypanel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-page">
.
</div>
</div>
<div class="soHide" id="index">
<div data-theme="a" data-role="header">
<h3 id="header-index">
First Page
</h3>
</div>
<div data-role="content" id="content-index">
<a data-role="button" href="#mypanel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-index">
.
</div>
</div>
<div class="soHide" id="second">
<div data-theme="a" data-role="header">
<h3 id="header-second">
Second Page
</h3>
</div>
<div data-role="content" id="content-second">
<p>this is a second page</p>
<a data-role="button" href="#mypanel">Open Pannel again</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-second">
footer second page
</div>
</div>
<div class="soHide" id="third">
<div data-theme="a" data-role="header">
<h3 id="header-third">Third Page</h3>
</div>
<div data-role="content" id="content-third">
<a data-role="button" id="open-panel">Open Pannel one more time</a>
<p>it's third!</p>
</div>
<div data-theme="a" data-role="footer" data-position="fixed" id="footer-third">
it's some third footer page
</div>
</div>
and this javascript:
$(document).on('click', '.btnPages', function(){
var page = $(this).attr('data-idpage');
var header = $("#header-"+page).html();
var content = $("#content-"+page).html();
var footer = $("#footer-"+page).html();
// apply
$("#header-page").html(header).trigger('create');
$("#content-page").html(content).trigger('create');
$("#footer-page").html(footer).trigger('create');
});
and this css:
.ui-panel-animate {
transition: transform 1350ms ease 0s !important;
}
.soHide { display: none; }
and this functional example http://jsfiddle.net/wgbn/Hxy37/
Below is a test page. If I go through all the JQM 'pages' and then go back to the first page, and then click submit, the 'SUBMITTING' alert dialog will pop up 4 times. What am I doing wrong? What should I do to make the submit event fire only once?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile.css"/>
<link rel="stylesheet" href="css/custom-icons.css"/>
<link href="css/jquery.mobile-swatch-f.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js"></script>
<script src="jquery-mobile/jquery.mobile.js"></script>
<script>
$('div:jqmData(role="page")').live('pageinit', function() {
$('form').submit(function(e) {
alert("SUBMITTING");
});
});
</script>
</head>
<body>
<form id="frm_testform_happy_party">
<div data-role="page" id="testform_menu" data-theme="f" class="dummyclass">
<div data-role="header">
<h1>Testing testing</h1>
</div>
<div data-role="content">
<ul data-role="controlgroup">
<li><a target_id="testform_happy" href="#testform_happy" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right" class=".ui-icon-manditory">happy party</a></li>
<li><a target_id="testform_description" href="#testform_description" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right">Description</a></li>
<li><a target_id="testform_vehicle" href="#testform_vehicle" data-role="button"
style="text-align:left" data-icon="arrow-r" data-iconpos="right">Vehicle</a>
</li>
</ul>
<input id="submit_claim" type="submit" name="send" value="Submit" id="submit"/>
<div id="debug">
</div>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="index.html#claim_menu" rel="external" data-icon="arrow-l" data-direction="reverse"
data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
<div data-role="page" id="testform_happy" data-theme="f">
<div data-role="header">
<h1>Happy Party</h1>
</div>
<div data-role="content">
<label for="happy_initials">Initials:</label>
<input type="text" name="happy_initials" id="happy_initials" value="" class="required"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
<div data-role="page" id="testform_description" data-theme="f">
<div data-role="header">
<h1>Description</h1>
</div>
<div data-role="content">
<label for="incident_date">Date of Incident:</label>
<input type="date" name="incident_date" id="incident_date" value="" class="required"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
<div data-role="page" id="testform_vehicle" data-theme="f">
<div data-role="header">
<h1>Vehicle</h1>
</div>
<div data-role="content">
<label for="vehicle_registration_number">Registration Number:</label>
<input type="text" name="vehicle_registration_number" id="vehicle_registration_number" value=""
class="required"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#testform_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
</form>
</body>
</html>
You're doing this:
<script>
$('div:jqmData(role="page")').live('pageinit', function() {
$('form').submit(function(e) {
alert("SUBMITTING");
});
});
</script>
I think this is firing for every page loaded, correct?
Maybe try something like this:
<script>
$(function() {
$('#submit_claim').click(function() {
$('form').submit(function(e) {
alert("SUBMITTING");
});
});
});
</script>