handling a jsonp callback in an ember component - ember.js

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

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);
});

Try changing this line:
jsonpCallback: 'callback:handleJson'
to
jsonpCallback: 'handleJson'

Related

Ember.js: how to analyze error in vendor.js

I've deployed my ember-cli app in stage environment to let teammates test the app. In the app I have implemented Ember.onerror to email me errors that occur in stage and in production environment.
Ember.onerror = function(data) {
Ember.$.ajax({
type: "POST",
url: url + "/error",
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify({message: data.message, stacktrace: data.stack}),
beforeSend: function (xhr, settings) {
xhr.setRequestHeader('Accept', settings.accepts.json);
}
});
}
I'm having difficulties in analyze stacktrace because it references only vendor.js and I can't understand where the problem really is.
For example I've received following message:
Message: Nothing handled the action 'back'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.
and stacktrace:
EmberError#http://example.com/assets/vendor-952b195e45ab9682c02f1fabba312c19.js:25705:26
triggerEvent#http://example.com/assets/vendor-952b195e45ab9682c02f1fabba312c19.js:38985:44
trigger#http://example.com/assets/vendor-952b195e45ab9682c02f1fabba312c19.js:64971:26
trigger#http://example.com/assets/vendor-952b195e45ab9682c02f1fabba312c19.js:63740:21
send#http://example.com/assets/vendor-952b195e45ab9682c02f1fabba312c19.js:38468:45
send#http://example.com/assets/vendor-952b195e45ab9682c02f1fabba312c19.js:42710:26
runRegisteredAction#http://example.com/assets/vendor-952b195e45ab9682c02f1fabba312c19.js:33277:30
run#http://example.com/assets/vendor-952b195e45ab9682c02f1fabba312c19.js:10765:30
run#http://example.com/assets/vendor-952b195e45ab9682c02f1fabba312c19.js:30030:32
handler#http://example.com/assets/vendor-952b195e45ab9682c02f1fabba312c19.js:33269:39
http://example.com/assets/vendor-952b195e45ab9682c02f1fabba312c19.js:55210:34
dispatch#http://example.com/assets/vendor-952b195e45ab9682c02f1fabba312c19.js:4872:14
handle#http://example.com/assets/vendor-952b195e45ab9682c02f1fabba312c19.js:4540:33
The meaning of the error message is clear, but I'm wondering if there's a way to easily recognize where that back action is not handled.

Create Item by using Item web api

I want to know how implement javascript method to create new item by using sitecore item web api.I am trying for below code my self.
But in the browser console show this error:
XMLHttpRequest cannot load http://myproject/-/item/v1/sitecore/Content/Home?name=MyItem5&template=Sample/Sample%20Item&sc_database=master. Request header field X-Scitemwebapi-Password is not allowed by Access-Control-Allow-Headers.
Please can anyone help me!!!!!!!
function createItem(){
jQuery.ajax({
crossDomain: 'true',
type: 'POST',
url: 'http://myproject/-/item/v1/sitecore/Content/Home?name=MyItem5&template=Sample/Sample Item&sc_database=master',
dataType: 'JSON',
contentType: 'application/x-www-form-urlencoded',
headers:{
"X-Scitemwebapi-Username":"sitecore\\Admin",
"X-Scitemwebapi-Password":"b",
},
success: function(data) {
alert(JSON.stringify(data));
},
error: function(res, error){
alert(JSON.stringify(res))
alert(res+ ' something is wrong');
}
});
}
Make sure you have these settings in your Sitecore.ItemWebApi.config
itemwebapi.mode="StandardSecurity"
itemwebapi.allowanonymousaccess="false"/>

Using ember data to save multiple records via post

Does anyone know of any working examples of overriding ember-data's DS.Adapter to save all records at once?
I'd like to stringify my entire array of records and send them to my server. I don't have much flexibility on the server to use anything but the existing API which is just a perl CGI script. Any help in the right direction would be appreciated.
What I did was iterate over the ember-data models, serialized them, saved them into a json object that matched server requirements, and executed post request.
var identifiedResponse = []
this.store.filter(key, function (record) {
return !!record.get('name')
}).then(function(resp) {
identifiedResponse.push(item.serialize())
})
jQuery.ajax({
url: url,
type: "POST",
data: identifiedResponse,
contentType: "application/json",
dataType: 'json',
xhrFields: {
withCredentials: true
}
})

Mobile Application Using Sencha Touch - JSON Request Generates Syntax Error

I started playing a bit with Sencha Touch.
So I've built a really simple application based on one of the examples just to see how it goes.
Basically it creates a JSON Request which executes a Last.FM web service to get music events near the user's location.
Here's the JSON code:
var makeJSONPRequest = function() {
Ext.util.JSONP.request({
url: 'http://ws.audioscrobbler.com/2.0/',
params: {
method: 'geo.getEvents',
location: 'São+Paulo+-+SP',
format: 'json',
callback: 'callback',
api_key: 'b25b959554ed76058ac220b7b2e0a026'
},
callback: function(result) {
var events = result.data.events;
if (events) {
var html = tpl.applyTemplate(events);
Ext.getCmp('content').update(html);
}
else {
alert('There was an error retrieving the events.');
}
Ext.getCmp('status').setTitle('Events in Sao Paulo, SP');
}
})
};
But every time I try to run it, I get the following exception:
Uncaught SyntaxError: Unexpected token :
Anyone has a clue?
A couple of things. First of all the "Uncaught SyntaxError: Unexpected token :" means the browser javascript engine is complaining about a colon ":" that has been put in the wrong place.
The problem will most likely be in the returned JSON. Since whatever the server returns will be run though the eval("{JSON HTTP RESULT}") function in javascript, the most likely thing is that your problem is in there somewhere.
I've put your code on a little sencha test harness and found a couple of problems with it.
First: My browser was not too happy with the "squiggly ã" in location: 'São+Paulo+-+SP', so I had to change this to location: 'Sao+Paulo,+Brazil', which worked and returned the correct results from the audioscribbler API.
Second: I notice you added a callback: 'callback', line to your request parameters, which changes the nature of the HTTP result and returns the JSON as follows:
callback({ // a function call "callback(" gets added here
"events":{
"event":[
{
"id":"1713341",
"title":"Skank",
"artists":{
"artist":"Skank",
"headliner":"Skank"
},
// blah blah more stuff
"#attr":{
"location":"Sao Paulo, Brazil",
"page":"1",
"totalpages":"1",
"total":"2"
}
}
}) // the object gets wrapped with extra parenthesis here
Instead of doing that I think you should be using the callbackKey: 'callback' that comes with the example in http://dev.sencha.com/deploy/touch/examples/ajax/index.js.
Something like this for example:
Ext.util.JSONP.request({
url: 'http://ws.audioscrobbler.com/2.0/',
params: {
method: 'geo.getEvents',
location: 'Sao+Paulo,+Brazil',
format: 'json',
api_key: 'b25b959554ed76058ac220b7b2e0a026'
},
callbackKey: 'callback',
callback: function(result) {
// Output result to console (Firebug/Chrome/Safari)
console.log(result);
// Handle error logic
if (result.error) {
alert(result.error)
return;
}
// Continue your code
var events = result.data.events;
// ...
}
});
That worked for me so hopefully it'll work for you too. Cherio.

Using jquery $.get to call an external web service

I am calling the following jQuery code on page load to test the concept of calling an external web service from the client. The data object in the success callback is always empty. What am I doing wrong?
$.ajax({
url: "http://www.google.com/search",
type: 'GET',
data: { q: "green tea" },
success: function(data) { alert("Data Loaded: " + data) },
dataType: "text/html"
});
It's the same-origin policy you're hitting here, it's specifically in place to prevent cross-domain calls for security reasons. The expected behavior is for the response to be empty here.
You either need to fetch the data via JSONP or get the data via your own domain, your server proxying the request.
It's worth noting Google has a full JavaScript API for searching that you may want to check out for doing this.
browser dont allow you to make cross domain request(a security feature). there is a hack for that with a limitation that you can get only json as response.
----the trick (hack)----
using jquery(or javascript)you create a new script tag and with src="url_of_third_party?", when that request is made you get json from cross site.
jQuery('body').append('<script src="cross_site_url" type="text/javascript"></script>');
or simply you can do this
$.ajax({
url: "http://www.google.com/search",
type: 'GET',
data: { q: "green tea" },
success: function(data) { alert("Data Loaded: " + data) },
dataType: "jsonp",
});
note: dataType=jsonp