2014-06-05 4 views
1

내 코드를 검색 :검도 - 왜 페이지를 새로 고침 하시겠습니까?

고객의 검색 형태의 템플릿

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

고객 search.js 경우 위의 템플릿을로드 및 만들기 뷰 모델 객체

$(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); 

}); 

내가 검색 버튼을 클릭하면 텍스트가 텍스트 상자에 설정되지만 주소 표시 줄에 ?searchTxt=Search+clicked으로 페이지가 새로 고쳐집니다.

왜이 버튼을 클릭하여 페이지 새로 고침을 알 수 있습니까? 버튼 클릭시 페이지 새로 고침을 중지하는 방법 ???

답변

2

나는 시도하고 그래서 같이 각각의 속성 '유형'을 배치 할 :

<button type="button" class="k-button" data-bind="click: searchClicked">Search</button> 
<button type="button" class="k-button" data-bind="click: newClicked">New</button> 
페이지는하지만, type 속성을 배치하여 각 양식 조치를 제출 수행하고 있다고 생각

, 당신은에 액세스 할 수 있습니다 이벤트를 검색 할 수 있습니다. 데이터를 게시하지 않을 경우 양식 태그가 필요하지 않지만 js 이벤트 핸들러 만 사용할 수 있습니다. 행운을 빕니다.

+0

'type = button'을 시도했지만 여전히 페이지를 새로 고칩니다 .- @ kryptonkal – Valay

+1

나는 여전히 페이지에서 게시물을 수행하고 있다고 생각합니다. 시도하고 단추 이벤트를 재정의하고이를 포함하십시오 : e.preventDefault(); e.stopImmediatePropagation(); console.log ('여기') 또는 경고 ('여기')를 선택하십시오. – kryptonkal

+0

'e.preventDefault(); e.stopImmediatePropagation();'이 작동합니다. 고마워 .- @kryptonkal – Valay

관련 문제