1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    4
    Vote Rating
    0
    colincalnan is on a distinguished road

      0  

    Default JSONP returns data that cannot be output in TPL

    JSONP returns data that cannot be output in TPL


    I get some JSON data back as so (a list of bus stops)...

    Code:
    [[50119, "Macdonald St @ W 21 Av"], [51269, "Macdonald St @ W 22 Av"], [51270, "Macdonald St @ W 20 Av"], [50118, "Macdonald St @ W 19 Av"], [50120, "Macdonald St @ W 23 Av"], [51268, "Macdonald St @ W 24 Av"], [51271, "Macdonald St @ W 18 Av"], [50121, "Macdonald St @ Alamein Av"], [50113, "Macdonald St @ W 16 Av"], [61090, "W 16 Av @ Macdonald St"]]
    How do I output this in the tpl.

    From the code example I have this..

    Code:
    Ext.util.JSONP.request({
                    url: 'http://m.translink.ca/api/stops/?f=json&lng=-123.16789&lat=49.25344',
                    callbackKey: 'callback',
                    callback: function(data) {
                        //data = data.results;
                           // Update the tweets in timeline
                           timeline.update(data);
    
                        // Add points to the map
                        for (var i = 0, ln = data.length; i < ln; i++) {
                               var stop = data[i];
                        }
                    }
                });
    How do I get the data received above to output in my template?

    Code:
    tpl: [
                    '<tpl for=".">',
                        '<div class="stop">{data}',
                        '</div>',
                    '</tpl>'
                ]

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,828
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The short answer is you can't do that. JSONP is a hack around normal Ajax, whereby it inserts a script tag into the document and executes the data passed.

    JSONP expects something like:

    Code:
    myFunc(['a'], ['b'], ['c'])
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Jul 2010
    Posts
    4
    Vote Rating
    0
    colincalnan is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    The short answer is you can't do that. JSONP is a hack around normal Ajax, whereby it inserts a script tag into the document and executes the data passed.

    JSONP expects something like:

    Code:
    myFunc(['a'], ['b'], ['c'])
    Thanks.

    So how can I then get that data to appear on the page?

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,828
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    What do you mean? Are you saying the data loads correctly?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext User
    Join Date
    Jul 2010
    Posts
    4
    Vote Rating
    0
    colincalnan is on a distinguished road

      0  

    Default


    Sorry, Sencha Noob here. I guess the first questions would be:

    1. How do I debug something like this?
    2. How can I get data from this remote address using Sencha and then output it in a template similar to what I have done above?

    I just want to get the JSON data back from the address, and loop through it, outputting it to screen.

    Thanks.

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,828
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    As I said above, if you're loading the data from a remote source, you need to have it call some local function on the page, since cross domain Ajax requests aren't allowed.

    More info here http://en.wikipedia.org/wiki/JSON#JSONP
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Ext User
    Join Date
    Jul 2010
    Posts
    4
    Vote Rating
    0
    colincalnan is on a distinguished road

      0  

    Default


    Evan,

    I thought it was calling a local function - callbackKey: 'callback'

    and then that function was "callback: function(data) {"

    Am I missing something here?

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,828
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    JSONP works by inserting a script tag. So to load data cross domain, you need some way of indicating that the data is loaded.

    In this case, it's a function, so the data returned from the server needs to look something like:

    Code:
    myWrapper(data)
    Have a look at the twitter example, specifically, what the data looks like when it comes back.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Similar Threads

  1. [FIXED] Auto load data into Panel (using a tpl)
    By Hani79 in forum Ext 3.x: Help & Discussion
    Replies: 7
    Last Post: 30 Jun 2014, 3:28 PM
  2. Simple text output of JSON store data
    By squeakingsneaker in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 26 Feb 2010, 8:22 AM
  3. is js in data evaluated at tpl.overwrite(panel.body, data)
    By mxu in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 29 Nov 2007, 6:50 AM
  4. tpl.overwrite(el, data) vs el.update(data, true)
    By mxu in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 28 Nov 2007, 2:20 PM

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi