Refresh template with setInterval

[David]

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?

[Petyo]

Hello David,

From what I see, most likely the problem is related to the makeTables call - it is most probably an asynchronous one, so the rest of the template can't rely on the data being already present. In general, fetching data from the template itself is not a standard practice. You may try removing the makeTables from there and render the template once the data from it has been received.

Regards,
Petyo
Telerik