Populating a template with data pulled using an ajax call

3 posts, 1 answers
  1. Juan
    Juan avatar
    3 posts
    Member since:
    Nov 2011

    Posted 19 Feb 2014 Link to this post

    hi there,

    I'm a newbie in using kendo ui. and I'm having problems with populating a template using data from an ajax call.

    here is my view

    <div id="computerTab" class="container">
        <div id="computerDetailsSection"></div>    
    </div>

    <script type="text/x-kendo-template" id="myTemplate">
        <div>
            <!-- Loop for sections -->
            <dl>
            #for (var i=0,len=Sections.length; i<len; i++){#
                #if(Sections[i].Fields.length>0)#
                #{#
                    <dt>${ Sections[i].Title }</dt>
                    <!-- Loop for fields -->
                    #for(var j=0, l=Sections[i].Fields.length; j<l; j++){#
                        <dd>${ Sections[i].Fields[j].Name }</dd>
                    #}#
                #}#
            # } #
        </dl>
     
        </div>
    </script>

    here is my script

    <script>
        function getComputerData() {
            var result;
            $.ajax({
                url: 'myurl',
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    console.log('success');
                    result = data;
                },
                error: function () {
                    console.log('Error');
                }
            });
            return result;
        }

        var ajaxData = getComputerData();
        var scriptTemplate = kendo.template($("#myTemplate").html());
        $("#computerDetailsSection").html(scriptTemplate(ajaxData));

    here is a sample of the data that i get from my ajax call
    Sections: [
                 { Fields: [], Title: "Computer", Order: 1, init: "readMode", alt: "editMode hidden" },
                 {
                     Fields: [
                            { Order: 1, Name: "Company-owned Location", Value: null },
                            { Order: 2, Name: "Country", Value: null },
                            { Order: 3, Name: "State", Value: null },
                            { Order: 4, Name: "Site", Value: null },
                            { Order: 5, Name: "Address Line 1", Value: null },
                            { Order: 6, Name: "Address Line 2", Value: null },
                            { Order: 7, Name: "Building", Value: null },
                            { Order: 8, Name: "Floor", Value: null },
                            { Order: 9, Name: "City", Value: null },
                            { Order: 10, Name: "Zip", Value: null },
                            { Order: 11, Name: "Room", Value: null },
                            { Order: 12, Name: "Where can you be found?", Value: null }
                     ],
                     Title: "Location", Order: 5, init: "readMode", alt: "editMode hidden"
                 }]
    but when i run this in my browser i always get this exception JavaScript runtime error: Object expected

    what am i doing wrong?

    thanks!
  2. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 19 Feb 2014 Link to this post

    Hello Juan,

    Fetching data with ajax is asynchronous - the result returned from getComputerData is undefined. You should bind the data in the success event handler. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Juan
    Juan avatar
    3 posts
    Member since:
    Nov 2011

    Posted 19 Feb 2014 Link to this post

    thanks Petyo! it did the trick!
Back to Top