kendo ui - por que clicar no botão atualiza a página?
-
26-12-2019 - |
Pergunta
Por favor, encontre abaixo meu código:
Modelo de formulário de pesquisa de cliente
<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 onde carrega o modelo acima e cria o objeto viewmodel
$(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);
});
Quando clico no botão de pesquisa, o texto é definido na caixa de texto, mas isso também atualiza a página com ?searchTxt=Search+clicked
na barra de endereço.
Posso saber por que esse clique no botão atualiza a página e como faço para parar de atualizar a página ao clicar no botão ???
Solução
Eu tentaria colocar o atributo 'type' para cada um assim:
<button type="button" class="k-button" data-bind="click: searchClicked">Search</button>
<button type="button" class="k-button" data-bind="click: newClicked">New</button>
A página pensa que cada um está realizando uma ação de envio de formulário, mas ao colocar o atributo type, você pode acessar o evento que pretendia pesquisar.Você pode não precisar de suas tags de formulário se não for postar nenhum dado, mas apenas de um manipulador de eventos js.Boa sorte.