handling a jsonp callback in an ember component

Question

I have a jsonp request to retrieve feature information via geoserver, the call looks something like this:

import Ember from 'ember';

export default Ember.Component.extend({

  _selectParcel: function() {

    function handleJson(data){
      console.log(data);
    }

    $.ajax('url/geoserver/wms', {
      type: 'GET',
      data: {
      service: 'WFS',
      version: '1.1.0',
      request: 'GetFeature',
      typeName: 'name_here',
      maxFeatures: 10000,
      outputFormat: 'text/javascript',
      srsname: 'EPSG:4326',
      bbox: '-73.68229866027832, 40.97056664236637, -73.68229866027832, 40.97056664236637, EPSG:4326'
    },
      dataType: 'jsonp',
      jsonpCallback: 'callback:handleJson',
      jsonp: 'format_options'
    });

  }
});

The problem that I run into is dealing with the callback scope - in this case, handleJson()

I have also tried

.then(function(){});

after the ajax call but with no luck.

_selectParcel is going to be called frequently based on mouse movement.

How should the jsonp callback be handled within the Ember component?

I've seen this using ember data with jsonp but im not sure how to interact with an adapter from the component.

Console errors look like : "Uncaught ReferenceError: handleJson is not defined" the way its written above - and "Uncaught ReferenceError: parseResponse is not defined" when using callback=? and a ".then(function(){})" promise

yeah, its "Uncaught ReferenceError: handleJson is not defined" the way its written above - and "Uncaught ReferenceError: parseResponse is not defined" when using callback=? and a ".then(function(){})" promise — cswright, Sep 16 '15 at 16:46

score 1 · Accepted Answer · edited Apr 13 '17 at 12:33

Okay, so there are really 2 pieces here.

should ember components request data
how are geoserver jsonp requests handled

For the first one I found this write up helpful Should Components Load Data

For the second, this bit where the format_options and the jsonpCallback keys match did the trick. Thank you to this link

$.ajax('url/geoserver/wms', {
    type: 'GET',
    data: {
      service: 'WFS',
      version: '1.1.0',
      request: 'GetFeature',
      typeName: 'name_here',
      maxFeatures: 10000,
      outputFormat: 'text/javascript',
      srsname: 'EPSG:4326',
      bbox: '-73.68229866027832, 40.97056664236637, -73.68229866027832, 40.97056664236637, EPSG:4326',
      format_options: 'callback:getJson'
    },
    dataType: 'jsonp',
    jsonpCallback: 'getJson'
  }).then(function(data) {
    console.log(data);
  });

score 0 · Answer 2 · answered Sep 16 '15 at 18:10

0

Try changing this line:

  jsonpCallback: 'callback:handleJson'

to

  jsonpCallback: 'handleJson'

answered Sep 16 '15 at 18:10

Tyler Iguchi

1,074
8
14

You're right! The jsonpCallback had to be changed, and I also had to change the format_options key to match. Thanks =) – cswright Sep 16 '15 at 18:18

handling a jsonp callback in an ember component

2 Answers2