This is a migrated thread and some comments may be shown as answers.

Populating a template with data pulled using an ajax call

2 Answers 253 Views
Templates
This is a migrated thread and some comments may be shown as answers.
Juan
Top achievements
Rank 1
Juan asked on 19 Feb 2014, 11:04 AM
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 Answers, 1 is accepted

Sort by
0
Accepted
Petyo
Telerik team
answered on 19 Feb 2014, 12:28 PM
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!
0
Juan
Top achievements
Rank 1
answered on 20 Feb 2014, 04:36 AM
thanks Petyo! it did the trick!
Tags
Templates
Asked by
Juan
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Juan
Top achievements
Rank 1
Share this question
or