0

奇妙なエラーが発生しています。

私は Kendo Mobile アプリケーションで Thomas j Bradley の素晴らしい署名パッドを使用しています。

私は一般的にKendoUIとHTML5にかなり慣れていないので、おそらく何かを見落としているかもしれませんが、問題はここにあります...

次のリンクがあります。

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

ただし、リンクをクリックすると、「Uncaught TypeError: Object [object Object] has no method 'signaturePad'」というエラーが表示されます。

ここに私の signaturepad.html ページがあります。signaturepad.html ページで見落としているものがあるかどうか、誰でも確認できますか??

<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>

signaturepad.html に手動で移動すると表示されますが、KendoUI スタイルは表示されません。

「kendo.mobile.all.min.css」ファイルにクラスを追加しました。

どんな助けでも大歓迎です!!!

4

1 に答える 1

1

この html ファイルは ajax を使用して親ビューに読み込まれるため、 signaturepad.html に剣道参照ファイルを再度追加する必要はありません。また、$('.sigPad').signaturePad(); document.ready イベントではなく、ビューの data-init メソッドで呼び出す必要があります。Kendo Mobile アプリケーションは単一ページのアプリケーションであり、アプリ内でポストバックが発生しないことを常に覚えておいてください。したがって、モバイルアプリではフォームポストを使用しないでください... ajaxを使用してサービスメソッドを呼び出して、サーバーにデータを送信する必要があります。この場合、署名の画像をデータとして ajax 経由でサーバーに送信できます。

コードを次のように変更します。

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>
于 2013-05-07T19:41:20.980 に答える