KendoUI Mobile link giving "Object has no method" error when clicked

I'm having an odd error.

I'm using the fantastic Signature Pad from Thomas j Bradley in my Kendo Mobile application.

I'm fairly new to KendoUI and HTML5 in general so perhaps I've overlooked something but heres the issue...

I have the following link:

<a href="signaturepad.html" data-role="button" class="details-link">Parcel Delivered</a>

When I click the link, however, it gives me the "Uncaught TypeError: Object [object Object] has no method 'signaturePad' " error.

Here's my signaturepad.html page, can anyone see if there's something that I've overlooked in the signaturepad.html page??

<body>
<div id="signaturePad" data-role="view" data-layout="default" align="center">
    <form method="post" action="" class="sigPad">
        <label for="name">Print your name</label>
        <input type="text" name="name" id="name"/>
        <p class="typeItDesc">Review your signature</p>
        <p class="drawItDesc">Draw your signature</p>
        <ul class="sigNav">
            <li class="typeIt"><a href="#type-it" class="current">Type It</a></li>
            <li class="drawIt"><a href="#draw-it">Draw It</a></li>
            <li class="clearButton"><a href="#clear">Clear</a></li>
        </ul>
        <div class="sig sigWrapper">
            <div class="typed"></div>
            <canvas class="pad" width="198" height="55"></canvas>
            <input type="hidden" name="output" class="output" />
        </div>
        <button type="submit">I accept delivery of this parcel.</button>
    </form>
</div>
<script src="js/kendo.all.min.js"></script>
<script>
    $(document).ready(function () {
        $('.sigPad').signaturePad();
    });
</script>

If I manually navigate to signaturepad.html it displays but does not display the KendoUI styling.

I have added the classes to the "kendo.mobile.all.min.css" file.

Any help would be greatly appreciated!!!

Solution

You don't have to add Kendo reference files again in signaturepad.html as this html file will be loaded in to the parent view using ajax. Also $('.sigPad').signaturePad(); needs to be called in the data-init method of the view and not in document.ready event. Always remember that Kendo Mobile application is a single page application and no postback should occur inside the app. So u should not use form post in the mobile app... you should use call your service methods using ajax to send data to the server. In this case, you can send the image of the signature as data thru ajax to the server.

Change your code like this:

div id="signaturePad" data-init="initView" data-role="view" data-layout="default" align="center">
    <form method="post" action="" class="sigPad">
        <label for="name">Print your name</label>
        <input type="text" name="name" id="name"/>
        <p class="typeItDesc">Review your signature</p>
        <p class="drawItDesc">Draw your signature</p>
        <ul class="sigNav">
            <li class="typeIt"><a href="#type-it" class="current">Type It</a></li>
            <li class="drawIt"><a href="#draw-it">Draw It</a></li>
            <li class="clearButton"><a href="#clear">Clear</a></li>
        </ul>
        <div class="sig sigWrapper">
            <div class="typed"></div>
            <canvas class="pad" width="198" height="55"></canvas>
            <input type="hidden" name="output" class="output" />
        </div>
        <button type="submit">I accept delivery of this parcel.</button>
    </form>
</div>

<script>
function initView(e){
        $('.sigPad').signaturePad();
}

</script>