Question

我有一个奇怪的错误。

我在我的Kendo Mobile应用程序中使用Thomas j Bradley的梦幻签名垫。

我对KendoUI和HTML5一般都很陌生，所以也许我忽视了一些东西但是这个问题......

我有以下链接：

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

当我点击链接时，它会给我“未捕获的TypeError：对象[对象对象]没有方法'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”文件中。

任何帮助都将非常感谢!!!

Answer 1

您不必在signaturepad.html中再次添加Kendo参考文件，因为此html文件将使用ajax加载到父视图中。还有$（'。sigPad'）。signaturePad（）;需要在视图的data-init方法中调用，而不是在document.ready事件中调用。永远记住，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>

KendoUI Mobile链接在单击时给出“Object has no method”错误

1 个答案: