Refresh template with setInterval

2 posts, 0 answers
  1. David
    David avatar
    2 posts
    Member since:
    Jun 2014

    Posted 07 Jul 2014 Link to this post

    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)]) #

            # for (var j = 2; j <= 8; ++j) { #
                <div id="#= j #Tab">
                    <p>This is the information for tab\# #= j #.</p>
            # } #

    <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)]) #
            # } #

    <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) { #
                    # 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>
                        # } #
                    # } #
                # } #
            # }else if(firstTableData[0] == "false") { #
                <b>First Table:</b> No information to display
            # } #

    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?
  2. Petyo
    Petyo avatar
    2436 posts

    Posted 09 Jul 2014 Link to this post

    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.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top