kendo ui - pourquoi un clic sur le bouton actualise-t-il la page ?
-
26-12-2019 - |
Question
Veuillez trouver ci-dessous mon code :
Modèle de formulaire de recherche de clients
<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 où chargement du modèle ci-dessus et création de l'objet 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);
});
Lorsque je clique sur le bouton de recherche, le texte est défini dans la zone de texte mais cela actualise également la page avec ?searchTxt=Search+clicked
dans la barre d'adresse.
Puis-je savoir pourquoi ce bouton clique sur actualiser la page et comment puis-je arrêter de rafraîchir la page en cliquant sur le bouton ???
La solution
J'essaierais de placer l'attribut 'type' pour chacun comme ceci :
<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 page pense que chacun effectue une action d'envoi de formulaire, mais en plaçant l'attribut type, vous pouvez accéder à l'événement que vous souhaitez rechercher.Vous n'aurez peut-être pas besoin de vos balises de formulaire si vous ne publiez aucune donnée, mais simplement un gestionnaire d'événements js.Bonne chance.