CODEWITHSUNDEEP
kendo-uikendo-mvvm
Valay
Valay

Reputation: 1999

kendo ui - why do button click refresh the page?

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

Upvotes: 5

Views: 4338

Answers (2)

Juan Lucas
Juan Lucas

Reputation: 11

The reason is that you are inside a <form>, which has no settings (URL, method, etc), so the browser's default behavior is probably to perform a GET to the current URL (which is a refresh). You could just use <div> instead of <form> if you just want to execute that method.

Upvotes: 0

kryptonkal
kryptonkal

Reputation: 894

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.

Upvotes: 6

Related Questions