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.
Related
I am currently building a website with Django and Javascript. I am working on the ajax calls that would the data needed for populate my homepage. However, I keep getting this cross-origin error. I have tried setting the document domain, enabling CROS headers and passing CSRF tockens. All attempts have been unsuccessful. Please take a look at my javascript code above.
if (window.scrollY > news_elementTarget.offsetTop) {
if (!news_fetched) {
$.ajax({
url: '/ajax/home',
type: 'get',
data: {
button_test: $(this).text(),
section: 'news',
CSRF: csrftoken,
},
success: function (response) {
console.log('success')
create_section_1(response.id, response.sections)
news_fetched = true
}
})
}
}
I'm trying to make an ajax call to the backend when the window scrolls to a certain div. The get request is never even sent to the backend. I really confused because I thought my domains are the same which wouldn't cause a Cross-origin error.
I have all the objects from my db rendered on my template by an ajax function.
Near every object there's a button that should delete it from the db but since I'm working on Django it raise a csrf_token missing or incorrect error.
I'm not using a form so I don't know how to include the csrf_token.
var $orders = $('#orders')
$.ajax({
type: 'GET',
url: 'http://127.0.0.1:8000/MyApp/list-api/?format=json',
success: function(orders) {
$.each(orders, function(i, order){
$orders.append('<li>name: '+order.name+', drink:
'+order.drink+'</li>')
$orders.append("<button data-id=" +(order.pk)+"
class='remove'>X</button>")
});
},
error: function() {
alert('errore caricamento ordini');
}
});
$orders.delegate('.remove', 'click', function(){
$.ajax({
type: 'DELETE',
url: 'http://127.0.0.1:8000/MyApp/list-api/' +
$(this).attr('data-id')
});
});
When I press a remove button a new request appears in the network panel of the browser, the response states :detail: "CSRF Failed: CSRF token missing or incorrect." The console gives a 403 forbidden error.
Any help or hints are really appreciated.
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'
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.
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