I have a couple of Kendo templates in my .aspx page. The entire page is created with just templates, with some of those templates being nested. The first template creates the <ul> and <li> tags for a Kendo tabstrip. The following template creates the content of the first tab. This template has a nested template that in turn that template has two other templates nested. The problem I am having is with refreshing the content of the first tab every 30 seconds. I tried using setInterval but I doesn't pull up any more information. The first tab only displays a few tables that should be refreshed with the given interval. I need to get this done since the content of the other tabs will sort of depend on getting this one done. Here are the templates I am using.
<script id="divTabTemplate" type="text/x-kendo-template">
<div id="firstTab">
<%--Call the template that will render the info for the first tab--%>
#= kendo.render(kendo.template($("\\#firstTabTemplate").html()), [(firstTableHeaders, secondTableHeaders)]) #
</div>
# for (var j = 2; j <= 8; ++j) { #
<div id="#= j #Tab">
<p>This is the information for tab\# #= j #.</p>
</div>
# } #
</script>
<script id="firstTabTemplate" type="text/x-kendo-template">
# for (var x = 1; x <= 7; ++x) { #
<div class="boxes">
<h4>Box #= x #</h4>
<div id="box#= x #Section" class="boxSection">
<%--Call a function here--%>
# makeTables(x) #
#= kendo.render(kendo.template($("\\#firstTableTemplate").html()), [(firstTableHeaders, firstTableData)]) #
#= kendo.render(kendo.template($("\\#secondTableTemplate").html()), [(secondTableHeaders, secondTableData)]) #
</div>
</div>
# } #
</script>
<script id="firstTableTemplate" type="text/x-kendo-template">
<div class="tableWrappers firstTableWrappers">
# if(firstTableData[0] != "false") { #
<b>First Table:</b> #= firstTableData[0] #
<table class="firstTables">
# for(var i = 0; i < (firstTableData.length / 4); ++i) { #
<tr>
# for(var j = 0; j < firstTableHeaders.length; ++j) { #
# if(i === 0) { #
<th>#= firstTableHeaders[j] #</th>
# }else if(i !== 0) { #
<td>#= firstTableData[(i * 4) + j - 3] #</td>
# } #
# } #
</tr>
# } #
</table>
# }else if(firstTableData[0] == "false") { #
<b>First Table:</b> No information to display
# } #
</div>
</script>
The template for the second table is similar to the template of the first table. The information for the tables gets pulled from a database. The function makeTables uses the current index to pull up information. This function calls a WebMethod on codebehind to pull up the necessary information. The makeTables function uses ajax to call those codebehind methods.
Just to reiterate my problem, I need to refresh the content of the first tab every 30 seconds. I could use a <meta> tag but that will refresh the entire page and go back to the default tab, which is not an ideal solution. Any ideas?