kendo ui - 为什么点击按钮会刷新页面? [英] kendo ui - why do button click refresh the page?

问题描述

请在下面找到我的代码:

客户搜索表单模板

customer-search.js 加载上面的模板并创建视图模型对象

$(function(){var 视图 = {};templateLoader.loadExtTemplate("customer-search-view-template", "../views/customer-search-template.html");var layout = new kendo.Layout($('#customer-search-view-template').html());layout.render($("#main"));//创建一个可观察的视图模型对象.var 客户 = kendo.observable({客户姓名:约翰"，搜索点击:函数(){this.set("customerName", "点击搜索");},新点击:函数(){this.set("customerName", "新点击");}});//将视图模型绑定到 personFields 元素.kendo.bind($('#searchCustomer'), customer);});

当我点击搜索按钮时，文本设置在文本框中，但这也会在地址栏中使用 ?searchTxt=Search+clicked 刷新页面.

我可以知道为什么单击此按钮会刷新页面以及如何在单击按钮时停止刷新页面吗???

解决方案

我会尝试像这样为每个属性放置type"属性:

搜索<button type="button" class="k-button" data-bind="click: newClicked">新建</button>

页面认为每个人都在执行表单提交操作，但是通过放置 type 属性，您可以访问您打算搜索的事件.如果您不打算发布任何数据，而只是一个 js 事件处理程序，则您可能不需要表单标签.祝你好运.

Please find below my code:

Template of customer search form

<script type="text/x-kendoui-template" id="customer-search-view-template">
    <div class="searchform" id="searchCustomer">
        <form class="frmSearch">
            <input name="searchTxt" data-bind="value: customerName" class="k-textbox" />
            <button class="k-button" data-bind="click: searchClicked">Search</button>
            <button class="k-button" data-bind="click: newClicked">New</button>
        </form>             
    </div>
</script>

customer-search.js where loading above template and creating viewmodel object

$(function(){

    var views = {};
    templateLoader.loadExtTemplate("customer-search-view-template", "../views/customer-search-template.html");

    var layout = new kendo.Layout($('#customer-search-view-template').html());
    layout.render($("#main"));

    // Create an observable view model object.
    var customer = kendo.observable({
        customerName: "John",

        searchClicked: function() {
            this.set("customerName", "Search clicked");         
        },

        newClicked: function() {
            this.set("customerName", "New clicked");            
        }

    });

    // Bind the view model to the personFields element.
    kendo.bind($('#searchCustomer'), customer);

});

When I click the search button, the text is set in the textbox but this also refresh the page with ?searchTxt=Search+clicked in the address bar.

May I know why this button click refresh the page and how do I stop refreshing the page on button click ???

解决方案

I would try and place the attribute 'type' for each like so:

<button type="button" class="k-button" data-bind="click: searchClicked">Search</button>
<button type="button" class="k-button" data-bind="click: newClicked">New</button>

The page thinks that each are performing a form submit action, but by placing the type attribute, you can access the event you intended for search. You may not need your form tags if you are not going to post any data, but rather just a js event handler. Good luck.

这篇关于kendo ui - 为什么点击按钮会刷新页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！