jsignature on jquery mobile multipage not initiating correctly

Question

I'm loading 3 jsignature divs into my jquery mobile app. They display and work correctly when I load them into the certain pages:

enter image description here

But when they're loaded into other pages the div shows up with a squished height and is not responsive to touch:

enter image description here

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')"/>
<a href="#" data-theme="a" data-rel="back" data-role="button" class="ui-btn-right" data-inline="true">Save</a>
<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')"/>
<a href="#" data-theme="a" data-rel="back" data-role="button" class="ui-btn-right" data-inline="true">Save</a>
<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')"/>
<a href="#" data-theme="a" data-rel="back" data-role="button" class="ui-btn-right" data-inline="true">Save</a>
<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')"/>
<a href="#" data-theme="a" data-rel="back" data-role="button" class="ui-btn-right" data-inline="true">Save</a>
<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.

score 3 · Accepted Answer · edited May 23 '17 at 11:43

3

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

edited May 23 '17 at 11:43

Community

1
1

answered Dec 27 '12 at 17:05

Gajotres

57,309
16
102
130

Thanks Gajotres. I tried 1) putting each snippet within the content of each signature page, 2) putting all three together in script at the bottom of the html doc, 3) putting all 3 together in the document ready function. None worked for me. Refreshing doesn't fix it either with these attempts. Thanks for the link. I've tried to be careful with $(document).ready( function(){ but the additional info helps. – user1911141 Dec 27 '12 at 17:18
Tell me do you have a single html page with multiple pages or 1 page per html file? What you could also try is to add an alert in every pagebeforeshow to see is it even triggering. – Gajotres Dec 27 '12 at 17:20
Its a single html page with multiple pages. I think its triggering something since the div shows the jsignature line, its just mis-sized and not functional. – user1911141 Dec 27 '12 at 17:24
can you change pagebeforeshow to pageshow or pagecreate. Maybe it is working like google maps mobile V3 api. It only works and shows in pagecreate event. – Gajotres Dec 27 '12 at 17:30
Sweet! Pageshow works, pagecreate doesn't. Only problem is every time that page is visited it creates another instance of the signature canvas. So if a user visits and closes that page, and then goes back to it, there will be 2 signature divs. How do I make the pageshow function happen only once? – user1911141 Dec 27 '12 at 17:41
give me a sec to find out what is jSignature doing to its div container. – Gajotres Dec 27 '12 at 17:47
Take a look now, I have changed my answer, now it has a check if jSignature styling has already been applied. – Gajotres Dec 27 '12 at 17:56

score 0 · Answer 2 · answered May 13 '13 at 11:16

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();
      }
    });

score 0 · Answer 3 · answered Jul 28 '15 at 14:33

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.

jsignature on jquery mobile multipage not initiating correctly

3 Answers3