Results 1 to 6 of 6

Thread: Help With JSONP Request

  1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    5
    Vote Rating
    0
      0  

    Default Help With JSONP Request

    I'm looking for help with the following code that's just a simple JSONP request to get data from a different server and display it via a simple template. I'm very new to Sencha and ExtJS but I'm doing my best. I've tried messing with this code all afternoon and I can't seem to figure out what's going wrong even though it seems like it should be working fine. If this ends up being a double post, I apologize, admin please delete the original as this one makes much more sense and is more helpful than my original request.

    The index.js code is as follows:

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
            var blogs = new Ext.Component({
                title: 'Blog Data',
                cls: 'timeline',
                scroll: 'vertical',
                tpl: [
                    '<tpl for=".">',
                                '<p><h2>{title}</h2>',
                                'posted on {date}<br />',
                                '{post}<br />{link}</p>',
                    '</tpl>'
                ]
            });
    
            var panel = new Ext.TabPanel({
                fullscreen: true,
                animation: 'slide',
                items: [blogs]        
            });
    
            var refresh = function() {
    
                Ext.util.JSONP.request({
                    url: 'http://www.calculatewhat.com/data.json',
                    callbackKey: 'callback',
                    callback: function(data) {
                        data = data.results;
                        blogs.update(data.results);
    
                    }
                });
            };
            
            var tabBar = panel.getTabBar();
            tabBar.addDocked({
                xtype: 'button',
                ui: 'mask',
                iconCls: 'refresh',
                dock: 'right',
                stretch: false,
                align: 'center',
                handler: refresh
            });
    
        }
    });
    And the external data.json file I'm trying to play with looks like this:
    Code:
    [{
       "title":"Title 1",
       "post":"Post Text 1",
       "date":"Date 1",
       "link": "URL 1"
    }, {
       "title":"Title 2",
       "post":"Post Text 2",
       "date":"Date 2",
       "link": "URL 2"
    }]
    I'm not sure if the problem is in the JSON data file or in the way I'm calling it and the code on index.js. I'm hoping this is pretty basic and someone can push me in the right direction to getting this solved because it's starting to drive me crazy. Thanks!

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    11
      0  

    Default

    The reason this doesnt work is because you are sending raw json over a JSONP request. JSONP is a "hack" to get around cross domain limitations of XHR. The way JSONP works is by sending back a script that executes a callback passing the data as an argument. Your data would have to be formatted like the following to work:

    Code:
    Ext.util.JSONP.callback([{
       "title":"Title 1",
       "post":"Post Text 1",
       "date":"Date 1",
       "link": "URL 1"
    }, {
       "title":"Title 2",
       "post":"Post Text 2",
       "date":"Date 2",
       "link": "URL 2"
    }]);
    This is the reason you usually pass a callbackKey to the request. This will be used as the param name send to the server that indicates what the callback function is. For example, setting callbackKey to 'callback', will make a request like:

    Code:
    http://www.calculatewhat.com/data.json?callback=Ext.util.JSONP.callback
    'callback' is the name that most web services use (like Flickr, Digg, etc).

  3. #3
    Ext User
    Join Date
    Jul 2010
    Posts
    5
    Vote Rating
    0
      0  

    Default YQL

    Thanks a lot, Tommy, that really helps clear things up for me. I'm not familiar with YQL but I see it's a SQL like method of querying data. Does YQL support cross domain data querying? For example, in this same scenario would you think YQL is a valid option over JSONP? Any major disadvantages to either? Thanks a bundle, way cool product you guys have here.

  4. #4
    Ext User
    Join Date
    Jul 2010
    Posts
    5
    Vote Rating
    0
      0  

    Default

    Hrm, I changed the JSON file and reformatted the data as you showed but it's still not doing anything. Either that or it's doing something and just not getting displayed properly for some reason but it appears blank still.

  5. #5
    Ext User
    Join Date
    Jul 2010
    Posts
    5
    Vote Rating
    0
      0  

    Default

    Sorry to bother again but any idea why that might still not be working even after I changed the data as you showed?

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    11
      0  

    Default

    The data that is being passed to the callback of the request is the actual array. That means that your callback should do something like the following (which makes it work for me).

    Code:
            var refresh = function() {
                Ext.util.JSONP.request({
                    url: 'http://www.calculatewhat.com/data.json',
                    callback: function(data) {
                        blogs.update(data);
                    }
                });
            };

Similar Threads

  1. Help With JSONP Request and Basics
    By indieangler in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 6 Jul 2010, 1:46 PM
  2. Grid pagination first request (make the request with the start and limit)
    By zharack in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 24 Jun 2009, 6:28 AM
  3. Grid pagination first request (make the request with the start and limit)
    By zharack in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 23 Jun 2009, 9:01 AM
  4. Replies: 2
    Last Post: 11 Jun 2009, 7:04 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •