1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12
    Vote Rating
    10
    pentool will become famous soon enough

      0  

    Default Answered: JSONP: How and where to define callback function

    Answered: JSONP: How and where to define callback function


    Hello,

    I'm new to this whole JSONP world and trying to define a callback function.

    Here's my proxy config:
    Code:
    proxy: {
      type: 'jsonp',
      url: 'http://www.xyz.com/MyDataFile.json',
      reader: {
        type: 'json',
        rootProperty: 'data'
      }
    }

    In my JSON data file, if I define my data as:
    Code:
    Ext.util.JSONP.callback1({
      "data": [...]
    })
    Then for some magical reason everything works fine. However, if I change the "Ext.util.JSONP.callback1" thing in the JSON data file to something else, say, "responseData" then it will say that "responseData" is not defined.
    Code:
    responseData({
      "data": [...]
    })
    I'd like it to be "responseData" and not "Ext.util.JSONP.callback1". I'm not sure what do I need to make it work like this.

    Can anyone gimme a hand?

    Thank you!

  2. So the way I solved this (after losing a couple of hairs...) is to use PHP as on this doc page (under the Implementing on the Server Side section):
    http://docs.sencha.com/touch/2-0/#!/...ta.proxy.JsonP

    Instead of calling the json data file directly, I call the PHP routine, which reads the file. The data file has to be a json file and NOT a jsonp file. Then php will wrap the callback function name around the data found in the file. Eg:

    MyDataFile.json:
    Code:
    {
      "data": [
        {"name":"George", "color":"blue"},
        {"name":"Mary", "color":"pink"}
      ]
    }
    The callback function name is whatever you pass along in "callback". If you don't pass anything, then by default (as indicated in the docs) is Ext.data.JsonP.callback1. Since I don't care about this any more (since PHP will handle it), just left it at default and didn't specify any callback or callbackKey.

    So this is my proxy config in the store:
    Code:
    proxy: {
      type: 'jsonp',
      url: 'http://www.xyz.com/MyDataFile.php',
      reader: {
        type: 'json',
        rootProperty: 'data',
      }
    }
    MyDataFile.php contains the php code listed on the docs above. I modified that function so that instead of wrapping the contents into a json_encode thing (because the file IS already a json file) just simply read the file and wrap the callback function name around it. So this is the php:

    Code:
    <?php
    
    $callback = $_REQUEST['callback'];
    
    // Read the file as a string.
    $output = file_get_contents('MyDataFile.json');
    
    //start output
    if ($callback) {
        header('Content-Type: text/javascript');
        echo $callback . '(' . $output . ');';
    } else {
        header('Content-Type: application/x-json');
        echo json_encode($output);
    }
    
    ?>
    And that made it work.

    The reason I needed this way, because this also works by using a jquery script from an HTML file as such:

    Code:
    <html>
    ...blah blah...
    
    <script>
      $.getJSON("http://www.xyz.com/MyDataFile.php?callback=?",
        function (data) {
          console.log(data);
        });
    </script>
    </html>
    So now you can attack the same json data file on another domain from either a Sencha app or from a plain HTML page.

  3. #2
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Callback

    Callback


    I'm quite new to this callback thing too, but I believe you can add 'callbackName: 'blah' under the URL field?

    See here also:

    http://www.sencha.com/forum/archive/...t-194248.html?

    :-)

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12
    Vote Rating
    10
    pentool will become famous soon enough

      0  

    Default


    Thanks for the suggestions. I've spent all day yesterday trying to figure this one out but so far nothing helped. There's no such config as "callbackName". Only "callbackKey". But that's something different since I get the same error.

  5. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default callbackKey

    callbackKey


    Must be callbackKey then must have been a typo in that link to that post.

    Just a thought, have you looked at the kitchen sink where it has this code:


    Code:
    Ext.data.JsonP.request({    url: 'http://free.worldweatheronline.com/feed/weather.ashx',
        callbackKey: 'callback',
        params: {
        key: '23f6a0ab24185952101705',
        q: '94301', // Palo Alto
        format: 'json',
        num_of_days: 5
    },
    Does that help?

  6. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12
    Vote Rating
    10
    pentool will become famous soon enough

      0  

    Default


    Thanks, but no.

    "callbackKey" only refers to the "key" as in a key:value pair. Also, I'm not calling a function. I don't know what to do with that function. I have a config.

    Code:
    config: {
      model: 'xyz',
      autoLoad: true,
    
    
      proxy: {
        type: 'jsonp',
        url: 'http://www.xyz.com/MyDataFile.json',
        reader: {
        type: 'json',
        rootProperty: 'data'
      }
    }
    As far as I understood, callbackKey would only change:
    url: 'http://www.xyz.com/MyDataFile.json?callbackKey=callbackFunction'

    And that's not what I'm looking for.

  7. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12
    Vote Rating
    10
    pentool will become famous soon enough

      0  

    Default


    So the way I solved this (after losing a couple of hairs...) is to use PHP as on this doc page (under the Implementing on the Server Side section):
    http://docs.sencha.com/touch/2-0/#!/...ta.proxy.JsonP

    Instead of calling the json data file directly, I call the PHP routine, which reads the file. The data file has to be a json file and NOT a jsonp file. Then php will wrap the callback function name around the data found in the file. Eg:

    MyDataFile.json:
    Code:
    {
      "data": [
        {"name":"George", "color":"blue"},
        {"name":"Mary", "color":"pink"}
      ]
    }
    The callback function name is whatever you pass along in "callback". If you don't pass anything, then by default (as indicated in the docs) is Ext.data.JsonP.callback1. Since I don't care about this any more (since PHP will handle it), just left it at default and didn't specify any callback or callbackKey.

    So this is my proxy config in the store:
    Code:
    proxy: {
      type: 'jsonp',
      url: 'http://www.xyz.com/MyDataFile.php',
      reader: {
        type: 'json',
        rootProperty: 'data',
      }
    }
    MyDataFile.php contains the php code listed on the docs above. I modified that function so that instead of wrapping the contents into a json_encode thing (because the file IS already a json file) just simply read the file and wrap the callback function name around it. So this is the php:

    Code:
    <?php
    
    $callback = $_REQUEST['callback'];
    
    // Read the file as a string.
    $output = file_get_contents('MyDataFile.json');
    
    //start output
    if ($callback) {
        header('Content-Type: text/javascript');
        echo $callback . '(' . $output . ');';
    } else {
        header('Content-Type: application/x-json');
        echo json_encode($output);
    }
    
    ?>
    And that made it work.

    The reason I needed this way, because this also works by using a jquery script from an HTML file as such:

    Code:
    <html>
    ...blah blah...
    
    <script>
      $.getJSON("http://www.xyz.com/MyDataFile.php?callback=?",
        function (data) {
          console.log(data);
        });
    </script>
    </html>
    So now you can attack the same json data file on another domain from either a Sencha app or from a plain HTML page.

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