Kendo UI: ¿por qué hacer clic en el botón Actualizar la página?
-
26-12-2019 - |
Pregunta
Descuento por debajo de mi código:
plantilla del formulario de búsqueda de clientes
<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 donde se cargan la plantilla de arriba y creando un 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);
});
Cuando hago clic en el botón de búsqueda, el texto se establece en el cuadro de texto, pero esto también actualiza la página con ?searchTxt=Search+clicked
en la barra de direcciones.
¿Puedo saber por qué este botón hace clic en Actualizar la página y cómo dejo de actualizar la página en el botón Click ???
Solución
Intentaría colocar el 'Tipo' del atributo 'para cada uno así:
<button type="button" class="k-button" data-bind="click: searchClicked">Search</button>
<button type="button" class="k-button" data-bind="click: newClicked">New</button>
La página piensa que cada uno está realizando una acción de envío, pero al colocar el atributo de tipo, puede acceder al evento que destinó a la búsqueda.Es posible que no necesite sus etiquetas de formulario si no va a publicar ningún dato, sino solo un controlador de eventos JS.Buena suerte.