Kendo Tabstrip에서 첫 번째 탭을 올바르게로드하지 않음

Question

현재 Kendo의 새로운 Q3 버전을 사용 중이며 Kendo 탭 스트립 컨트롤에 문제가 있습니다. 11 개의 탭이있는 탭 스트립이 있고 세 번째 탭이 페이지에서 다른보기로 이동합니다. 이보기에서 이동 경로 (탐색 경로 또는 브라우저의 뒤로 단추)로 돌아갈 때 세 번째 탭을 선택하고 내용을 새로 고칩니다. 그러나이 역 페이지 탐색 후에 첫 번째 탭의 내용은 클릭 할 때 표시되지 않습니다. 탭에 회색 배경이 나타납니다. 컨트롤을 검사 할 때 올바르게 컨트롤 된 정보와 함께 모든 컨트롤을 볼 수 있습니다. 페이지로 돌아갈 때 첫 번째 탭을 선택하면 모든 것이 올바르게로드됩니다.

무엇이 잘못되었거나이 문제를 해결하는 방법에 대해 알지 못합니다. 어떤 도움을 주셔서 감사합니다!

--EDIT-- 다음은 탭 스트립의 설정 방법입니다.

하고 스크립트에서

<div class="" id="tabstrip"> 
<ul> 
    <li class="k-state-active"> 
      <i class="green icon-info-sign bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_juryMaster_lbl_CandidateInfo    
    </li> 
    <li>    
      <i class="green icon-info-sign bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_juryMaster    
    </li> 
    <li>    
      <i class="green icon-question-sign bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_eQuestion    
    </li> 
    <li> 
      <i class="green icon-bell bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_Events    
    </li> 
    <li>    
      <i class="green icon-flag bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_Flags    
    </li> 
    <li>    
      <i class="green icon-file bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_DM    
    </li> 
    <li> 
      <i class="green icon-calendar bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_Scheduling 
    </li> 
    <li>    
      <i class="green icon-money bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_Financials    
    </li> 
    <li>    
      <i class="green icon-exchange bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_Merge    
    </li> 
    <li>    
      <i class="green icon-suitcase bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_NameHistory    
    </li> 
    <li>    
      <i class="green icon-list-ul bigger-110"></i> 
      @ResxStrings.PersonStrings.tab_heading_JudgesNotes    
    </li> 

</ul> 
<div><div id="candidateInfo"></div></div> 
<!--BEGIN juryMaster CONTENT--> 
<div id="juryMaster"> 
    @Html.Partial("~/Views/Person/Partial_JuryMaster.cshtml")   
</div> 
<!-- /juryMaster --> 

<!--BEGIN eQuestion CONTENT--> 
<div id="eQuestion"> 
    @Html.Partial("~/Views/Person/Partial_eQuestion.cshtml") 

</div> 
<!-- /eQuestion --> 

<!-- BEGIN Events CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_Events.cshtml") 
</div> 
<!--/Events--> 

<!-- BEGIN Flags CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_Flags.cshtml") 
</div> 
<!--/Flags--> 

<!-- BEGIN DM CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_DM.cshtml") 
</div> 
<!--/DM--> 

<!-- BEGIN Scheduling CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_Scheduling.cshtml") 
</div> 
<!--/Scheduling--> 

<!-- BEGIN Financials CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_Financials.cshtml") 
</div> 
<!--/Financials--> 

<!-- BEGIN MergeUnMerge CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_MergeUnMerge.cshtml") 
</div> 
<!--/MergeUnMerge--> 

<!-- BEGIN NameHistory CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_NameHistory.cshtml") 
</div> 
<!--/NameHistory--> 

<!-- BEGIN JudgesNotes CONTENT--> 
<div> 
    @Html.Partial("~/Views/Person/Partial_JudgesNotes.cshtml") 
</div> 
<!--/JudgesNotes--> 

:

 $("#tabstrip").kendoTabStrip({ 
     select: onSelect, 
     effects: "expand:vertical", 
     activate: onActivate, 
     animation: false 
    }); 

Select 메서드는 첫 번째 탭을 얻고 선택/그것을 갱신 및 활성화 방법은 별도의 탭에 서식 그리드를 포함한다. 다음은 첫 번째 탭을 선택할 때 호출되는 메서드입니다.

function loadJurorSummary(jurorID) { 
    $.ajax({ 
     url: '@Url.Content("~/Person/getPersonSummary")', 
     type: "GET", 
     data: { id: jurorID }, 
     success: function (data) { 
      $("#candidateInfo").html(data); 
     } 
    }); 
} 

모든 내용이 동일한 페이지의 첫 번째로드 및 탐색에서 제대로 작동합니다. 당신이 탭 스트립 선언에서 배열로 콘텐츠 URL을 전달해야한다는 것을 표시 demo for ajax loaded content에서

Answer 1

: 당신이 도구를 dev에 갈 때

$(document).ready(function() { 
    $("#tabstrip").kendoTabStrip({ 
     animation: { open: { effects: "fadeIn"} }, 
     contentUrls: [ 
        '../../content/web/tabstrip/ajax/ajaxContent1.html', 
        '../../content/web/tabstrip/ajax/ajaxContent2.html', 
        '../../content/web/tabstrip/ajax/ajaxContent3.html' 
       ] 
    }); 
}); 

(당신이 크롬을 사용하는 가정 또는 IE) 콘솔에 스크립트 오류가 있습니까?