I'm loading 3 jsignature divs into my jquery mobile app. They display and work correctly when I load them into the certain pages:
But when they're loaded into other pages the div shows up with a squished height and is not responsive to touch:
I'm loading them with a document ready function at the bottom of the page, which seems fine:
<div id="info" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>NewF</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<input type="text" placeholder="Your Name" name="_fid_14" id="_fid_14" />
</form>
</div></div>
<div id="sigemail" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>Signatures & Email</h1>
</div>
<div data-role="content">
<div id="fcmsig" style="width:600px; height:150px;"></div>
<div id="gcsig" style="width:600px; height:150px;"></div>
<div id="inspsig" style="width:600px; height:150px;"></div>
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<br>
<p>What email address would you like the QAF pdf sent to?</p><input type="text" name="_fid_210" id="_fid_210" />
</form>
</div></div>
<script>
$(document).ready( function(){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});
</script>
But when I change to this, so each signature loads in its own page, they loose size and functionality:
div id="info" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>NewF</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<input type="text" placeholder="Your Name" name="_fid_14" id="_fid_14" />
</form>
</div></div>
<div id="sigemail" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>Signatures & Email</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<br>
<p>What email address would you like the QAF pdf sent to?</p><input type="text" name="_fid_210" id="_fid_210" />
<a data-theme="a" href="#fcmsignature" data-role="button" data-transition="slidefade" data-inline="true">Field CM Signature</a><br>
<a data-theme="a" href="#gcsignature" data-role="button" data-transition="slidefade" data-inline="true">Contractor Signature</a><br>
<a data-theme="a" href="#inspsignature" data-role="button" data-transition="slidefade" data-inline="true">Inspector Signature</a>
</form>
</div></div>
<div id="fcmsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#fcmsig').jSignature('clear')"/>
Save
<h1>FCM Signature</h1>
</div>
<div data-role="content">
<div id="fcmsig" style="width:600px; height:150px;"></div>
</div></div>
<div id="gcsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#gcsig').jSignature('clear')"/>
Save
<h1>Contractor Signature</h1>
</div>
<div data-role="content">
<div id="gcsig" style="width:600px; height:150px;"></div>
</div></div>
<div id="inspsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#inspsig').jSignature('clear')"/>
Save
<h1>Inspector Signature</h1>
</div>
<div data-role="content">
<div id="inspsig" style="width:600px; height:150px;"></div>
</div></div>
<script>
$(document).ready( function(){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});
</script>
I've tried using pageinit on the signature pages, but I get the same result:
<div id="fcmsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#fcmsig').jSignature('clear')"/>
Save
<h1>FCM Signature</h1>
</div>
<div data-role="content">
<script>
$('#fcmsignature').live('pageinit',function(event){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});
</script>
<div id="fcmsig" style="width:600px; height:150px;"></div>
</div></div>
I'm not sure why they would work in one sub-page, but not another. Any thoughts?
Update: A direct refresh of /index.html#fcmsignature shows the signature correctly. So the issue is somehow connected to the initiation of the signatures - which is why I tried pageinit (without success). I also tried data-transition="none" on the buttons, but no change.
Try this syntax:
$('#fcmsignature, #gcsignature, #inspsignature').live('pageshow',function(e,data){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
$('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});
This syntax will take care that jQuery and jQuery mobile is loaded, and it will work only when pages fcmsignature, #gcsignature, #inspsignature are about to be show. And because you are using one signature per page use it like this:
$('#fcmsignature').live('pageshow',function(e,data){
if($('#fcmsig').find('.jSignature').length == 0){
$('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
}
});
$('#gcsignature').live('pageshow',function(e,data){
if($('#gcsig').find('.jSignature').length == 0){
$('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
}
});
$('#inspsignature').live('pageshow',function(e,data){
if($('#inspsig').find('.jSignature').length == 0){
$('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
}
});
jQM was not built to work with $(document).ready( function(){. Read my other artice to find out why: https://stackoverflow.com/a/14010308/1848600
Just to clarify for anyone else experiencing this issue, attaching jSignature to the "pageshow" event is what worked for me.
$("#signpage").live("pageshow",function(e,data){
if($("#signature").find(".jSignature").length == 0){
$("#signature").jSignature();
}
});
To update the other answers, the jQuery live() function has been deprecated since jQuery 1.7 and removed since jQuery 1.9. Now you will want to use the jQuery Mobile "pagecontainershow" event handler and check to see which page you are currently on, then perform the if block suggested in the other answers, as such:
$(document).on("pagecontainershow", function(evt, ui){
var pageID = $('body').pagecontainer('getActivePage').prop('id');
if(pageID == 'signaturePage'){
if($("#signatureDiv").find(".jSignature").length == 0){
$("#signatureDiv").jSignature();
}
}
}
This method works as of jQuery 1.11.3 and jQuery Mobile 1.4.5.
Related
I'm trying to learn jQuery mobile. I tried to use data-transition used for page transition, but it's showing the default fade transition only for other transistion, even if i using other transitions like pop, flip etc
I'm able to view all transitions displayed on jQuery docs
Here's my html body :
<div data-role="page" id="page1" data-title="Page 1">
<div data-role="header">
<h1>Heading 1</h1>
</div>
<div data-role="content">
<p>Hi! I'm the content in the page</p>
<!-- Have used `data-transistion` below -->
Page 2
<br/>
Pop Up
</div>
<div data-role="footer">
<h1>Footer 1</h1>
</div>
</div>
<div data-role="page" id="page2" data-theme="b" data-title="Page 2">
<div data-role="header">
<h1>Heading 2</h1>
</div>
<div data-role="content">
<p>Hi! I'm the content in the page 2</p>
Page 1
<a data-role="button" data-rel="back">Back</a>
</div>
<div data-role="footer">
<h1>Footer 2</h1>
</div>
</div>
<div id="popup" data-theme="b" data-title="Pop Up">
<div data-role="header">
<h1>Pop Up</h1>
</div>
<div data-role="content">
<p>Hi! I'm the content in the Pop Up</p>
Page 1
</div>
<div data-role="footer">
<h1>Pop Up</h1>
</div>
</div>
What am i doing wrong?
Try to review most posts but not yet solve my case.
Below HTML and Javascript works if all content are static code on page. Sample can be viewed http://jsfiddle.net/adrBJ/
The problem is if content in <div id="coupon-summary" style="">...</div> are dynamically built from programme such as calling ajax, then the click event does not be triggered.
How can I code and make the click event be triggered?
HTML code
<body class="ui-mobile-viewport ui-overlay-a">
<section id="home" data-role="page" data-title="Coupon Statistic Summary" class="footer_default header_home ui-page ui-page-theme-a ui-page-active" data-url="home" tabindex="0" style="min-height: 408px;">
<header data-theme="b" data-role="header" role="banner" class="ui-header ui-bar-b"><h1 class="ui-title" role="heading" aria-level="1">Summary</h1></header>
<article data-role="content" class="ui-content" role="main">
<div id="home-content">
<div id="signin" style="display: none;">
<div class="heading"><img class="signin_logo" src="images/jetso360.png"><br></div>
<div class="frm">
<form action="checklogin.php" name="form" id="form" method="post">
<input type="hidden" name="xcaller" id="xcaller" value="ajax">
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="text" name="ad_login" id="ad_login" placeholder="Advertiser Login" spellcheck="false" autocomplete="false" value=""></div>
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input type="password" name="password" id="password" placeholder="Password" spellcheck="false" autocomplete="false" value=""></div>
<p id="msgBox" style="" class="plain">Redirecting ...</p>
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">Sign In<input type="submit" name="submit" id="submit_btn" value="Sign In"></div>
</form>
</div>
</div>
<div id="coupon-summary" style="">
<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow"><li class="ui-li-has-count ui-li-has-thumb ui-first-child"><img src="/dev/data/coupons/1.png" style="max-width: 100px;" class="imageview"><span class="ui-li-count ui-body-inherit">11</span></li><li class="ui-li-has-count ui-li-has-thumb ui-last-child"><img src="/dev/data/coupons/10.png" style="max-width: 100px;" class="imageview"><span class="ui-li-count ui-body-inherit">2</span></li></ul>
</div>
</div> <!-- home-content -->
</article> <!-- article content -->
</section> <!-- section home -->
<section id="detail" data-role="page" data-title="Coupon Statistic Summary" class="footer_default header_home ui-page ui-page-theme-a" data-url="detail" tabindex="0" style="min-height: 408px;">
<header data-theme="b" data-role="header" role="banner" class="ui-header ui-bar-b"><h1 class="ui-title" role="heading" aria-level="1">禮券登記統計</h1></header>
<article data-role="content" class="ui-content" role="main">
<div id="reg-detail">Loading ....</div>
</article> <!-- article content -->
</section> <!-- section detail -->
Javascript
$(document).ready(function () {
$('#coupon-summary').on('click', 'a[href="#detail"]', function (e) {
e.preventDefault();
alert("coupon-summary click");
console.log("coupon-summary click");
}); // coupon-summary a href click
});
I would suggest, bind to click event after your ajax calls instead of doing it on document ready. i.e. place the below code after your ajax calls.
$('#coupon-summary').on('click', 'a[href="#detail"]', function (e) {
e.preventDefault();
alert("coupon-summary click");
console.log("coupon-summary click");
}); // coupon-summary a href click
on JQueryMobile Datebox setting hideInput: "true" causes the Header to disappear?
<div data-role="page" data-theme="c" id="roster" data-add-back-btn="true">
<div data-role="header" class="tb">
<h1>Roster</h1>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "cal box", "hideInput": "true"}'>
</div>
<div data-role="content" data-theme="b" id="callback">
<!-- CONTENT LOADED VIA AJAX -->
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
Header is visible when I remove "hideInput": "true" but gone if I just change to "false"
I've been searching for a solution on the internet but I didn't find any.
In my jQuery Mobile application, I have multiple HTML files each one representing a page to keep the workflow clean, therefore I use AJAX for navigation.
I have a button on a map in my page fleet.html (3rd in navigation) that opens a dialog, the opening process is done with javascript, only when I click on the button it shows me a blank dialog with no text and no buttons in it.
Here's fleet.html :
<div data-role="page" id="fleetPage" class="no-bg">
<div data-role="header" data-theme="b">
<h1>Flotte</h1>
</div>
<div data-role="content" data-theme="a">
<div class="map-container">
<div id="fleet-map"></div>
</div><!-- END map-container -->
</div><!-- END content -->
<div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
<div data-role="header" data-theme="b">
<h3>Informations</h3>
</div>
<div data-role="content">
<p>POI Infos</p>
</div>
</div>
</div><!-- END page -->
And here's how I open the dialog :
function onSelectFeature() {
$("#fleetPage #deviceInfoDialog").dialog();
$.mobile.changePage($("#fleetPage #deviceInfoDialog"), {
transition: "slidedown"
});
}
Move your dialog div outside of the page div. Add a hidden link that when clicked would open the dialog. Rework your script function to emulate that link getting clicked.
I tested this and it works fine:
<div data-role="page" id="fleetPage" class="no-bg">
<div data-role="header" data-theme="b">
<h1>Flotte</h1>
</div>
<div data-role="content" data-theme="a">
<div class="map-container">
<div id="fleet-map"> onSelectFeature</div>
</div><!-- END map-container -->
</div><!-- END content -->
<script>
function onSelectFeature() {
$("#lnkDeviceInfoDialog").click();
}
</script>
<a id='lnkDeviceInfoDialog' href="#deviceInfoDialog" data-rel="dialog" data-transition="slidedown" style='display:none;'></a>
</div><!-- END page -->
<div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
<div data-role="header" data-theme="b">
<h3>Informations</h3>
</div>
<div data-role="content">
<p>POI Infos</p>
</div>
</div>
Try this
function onSelectFeature() {
$.mobile.changePage( "#deviceInfoDialog", { role: "dialog", transition: "slidedown" } );
}
And your html should be like this
<div data-role="page" id="fleetPage" class="no-bg">
<div data-role="header" data-theme="b">
<h1>Flotte</h1>
</div>
<div data-role="content" data-theme="a">
<div class="map-container">
<div id="fleet-map"></div>
</div><!-- END map-container -->
</div><!-- END content -->
</div><!-- END page -->
<div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
<div data-role="header" data-theme="b">
<h3>Informations</h3>
</div>
<div data-role="content">
<p>POI Infos</p>
</div>
</div>
I have various pages in html like this
<body onload="init()">
<div data-role="page" id="home">
<div data-role="header">
<h1>Here is the index page.</h1>
</div>
<div data-role="content">
<p><center>Below you may transition to our other pages.</center></p>
About Me
</div>
</div>
<div data-role="page" id="about">
<div data-role="header">
<h1>About Us</h1>
</div>
<div data-role="content">
Back Home
</div>
</div>
</body>
Now i need to grab the id of the page which is shown currently... How to do that?
Have you tried: $.mobile.activePage.attr('id')
Any of these:
$('div:jqmData(role="page").ui-page-active').attr('id');
$('.ui-page-active').attr('id');
should also do.