Kendo UI/Mobile - Get JSONP and append to listview

4 posts, 0 answers
  1. James
    James avatar
    3 posts
    Member since:
    Nov 2012

    Posted 28 Nov 2012 Link to this post

    I'm just starting out with Kendo mobile (impressed so far - coming from JQM). I'm trying to pass a postcode to a url which returns some json (houses near that area) and then append it to a listview using Datasource. However, it fails an in console I just get:

    Error [object Object] 

    Heres my code:

    var app = new kendo.mobile.Application(document.body, 
    {
        transition:'slide'
    });
    
    function onBodyLoad() {
        //document.addEventListener("deviceready", onDeviceReady, false);
        // Use the following for testing in the browser
        getProperties(onResult);
    }
    
    function getProperties(callback) {
    
        var template = kendo.template($("#propertiesListViewTemplate").html());
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: 'http://www.someurl.me/getproperties.php?postcode=bd11db',
                    dataType: "jsonp"
                }
            },
    
            schema: {
                //data: "ResultSet.Result"
                data: function(response) {
                    return response.listing;
                }
            },
    
    
            error: function(e) {
                console.log("Error " + e);
            },
            change: function() {
                $("#propertyResultListView").html(kendo.render(template, this.view()));
            }
        });
        dataSource.read();
        $("#propertyResultListView").kendoMobileListView({dataSource:dataSource,template: $("#propertiesListViewTemplate").html()});
    
    }
    
    function onResult(resultData) {
        console.log("Results " + resultData);
        $("#propertyResultListView").kendoMobileListView({dataSource: kendo.data.DataSource.create({data:resultData}),
            template: $("#propertiesListViewTemplate").html()});
    }

    I'm sure this is down to the schema part of the Datasource but I'm lost as to what it should be (the docs havent really helped).

    The JSON thats returned is:

    {"country":"England","result_count":510,"longitude":-1.826866,"area_name":"Caldercroft, Elland HX5","listing":[{"image_caption":"Main Image","status":"for_sale","num_floors":"0","listing_status":"sale","num_bedrooms":"2","agent_name":"Daniel & Hirst","latitude":53.688934,"agent_address":"110 Commercial Street","num_recepts":"0","property_type":"Detached","country":"England","longitude":-1.843375,"first_published_date":"2012-10-11 19:05:42","displayable_address":"Elland HX5","street_name":"EXLEY LANE","num_bathrooms":"0","thumbnail_url":"http://images.zoopla.co.uk/f7f6791d95dadef11b340be2949bd8957079168f_80_60.jpg","description":"Comments","post_town":"Elland","details_url":"http://www.zoopla.co.uk/for-sale/details/26491359","agent_logo":"http://static.zoopla.co.uk/zoopla_static_agent_logo_(120721).png","price_change":[{"date":"2012-10-11 16:45:02","price":"37500"}],"short_description":"We are pleased to offer ...","agent_phone":"01484 954009","outcode":"HX5","image_url":"http://images.zoopla.co.uk/f7f6791d95dadef11b340be2949bd8957079168f_354_255.jpg","last_published_date":"2012-11-21 17:31:46","county":"West Yorkshire","price":"37500","listing_id":"26491359"}

    Could someone point me in the right direction? The whole datasource schema is confusing to me. If it helps to describe what I'm trying to do in JQM I'd do something like

    $.getJSON(serviceURL + 'getproperties.php?postcode=' + postcode + '&minimum_beds=' + minimumBeds + '&minimum_price=' + minimumPrice + '&maximum_price=' + maximumPrice , function(data) {
    
        $('#propertyList li').remove();
    
        // Loop through json data and append to table
        listings = data.listing;
        $.each(listings, function(index, property) {
    
            console.log(property.image_url);
            console.log(property.price);
    
            $('#propertyList').append('<li><a href="propertydetails.html?id=' + property.listing_id + '">' +
                    '<img src="' + property.thumbnail_url + '"/>' +
                    '<h6>' + property.property_type + '</h6>' +
                    '<p>' + property.displayable_address + '</p>' +
                    '<p><strong>&pound;' + property.price + '</strong></p>');
    
            $('#propertyList').listview('refresh');
        });
    
    });


    Thanks in advance!


  2. Daniel
    Admin
    Daniel avatar
    2230 posts

    Posted 30 Nov 2012 Link to this post

    Hello James,

    The schema looks correct for the response you are receiving. Since from your description it seems that the dataSource error event is triggered, the most likely reason for the problem is that the request does not have a callback and you have specified that JSONP should be used. If the URL is local then you should change the dataType to "json". If it is not, then you should enable your server for JSONP.

    Regards,
    Daniel
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. James
    James avatar
    3 posts
    Member since:
    Nov 2012

    Posted 02 Dec 2012 Link to this post

    Hi Daniel

    I've now changed my web service code so the request now has a callback, however the listview is not being created and no errors are being shown in console. HOWEVER, I can see the responce in the network tab of chrome dev tools with all the json in there. So I guess I'm doing something wrong with kendo to get the data displayed on screen. If I console.log(this.view()); in my datasource change method I get this in my console (which must mean im nearly there!)

    [o.extend.init, o.extend.init, o.extend.init, o.extend.init, o.extend.init, o.extend.init, o.extend.init, o.extend.init, o.extend.init, o.extend.init, _events: Object]
    1. 0: o.extend.init
    2. 1: o.extend.init
    3. 2: o.extend.init
    4. 3: o.extend.init
    5. 4: o.extend.init
    6. 5: o.extend.init
    7. 6: o.extend.init
    8. 7: o.extend.init
    9. 8: o.extend.init
    10. 9: o.extend.init
    11. _events: Object
    12. length: 10
    13. parent: function (){return b._parent()}
    14. type: function (a){var b=this,c,d,e=function(){return b},f;o.fn.init.call(this);for(d in a)c=a[d],d.charAt(0)!="_"&&(f=M.call(c),c=b.wrap(c,d,e)),b[d]=c;b.uid=n.guid()}
    15. __proto__: b

    I can expand the 0,1,2,3 etc to reveal my results from the web service but how can I get these into my template/listview. Really appreciate your help as I'm very new to Kendo but really want to adopt it as my framework of choice. Please help :) Thanks.
  4. Daniel
    Admin
    Daniel avatar
    2230 posts

    Posted 04 Dec 2012 Link to this post

    Hi James,

    I am not sure what is causing the problem with displaying the data. Could you share the "propertiesListViewTemplate" template so I can check the exact setup?

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