sending openlayers3 event over ajax results in RangeError - javascript

The error in chrome console is RangeError: Maximum call stack size exceeded
I use the following code:
draw.on('drawend',
function(evt) {
var fe = evt.feature
console.log(fe);
var parser = new ol.format.GeoJSON();
var features = source.getFeatures();
var featuresGeoJSON = parser.writeFeatures(features);
$.ajax({
url: "http://0.0.0.0:3000/features.json",
method: "POST",
data: fe
});
},
this);
The evt.feature object looks ok in developer tools console.

Make sure you are serializing the feature that you get in the event and not the features from the source. And $.ajax either expects a string or an object with key-value-pairs. Because you want to send the whole object, you will have to use JSON.stringify() to serialize the object. Something like:
draw.on('drawend',
function(evt) {
var parser = new ol.format.GeoJSON();
var featureGeoJSON = parser.writeFeature(evt.feature);
$.ajax({
url: "http://0.0.0.0:3000/features.json",
method: "POST",
data: JSON.stringify(featureGeoJSON)
});
},
this);

Related

Error by using formData

I tried to do this for working with a part of values from a html-form.
var formData = new FormData();
formData.append('file', $('#FORM_ADD_LANG_FILE')[0].files[0]);
formData.append('add_lang_code', $('#FORM_ADD_LANG_CODE').val());
formData.append('job', jobid);
var post_setting = new Array(false,false);
But in my console it is showing the following error and I don't know why it is
"TypeError: 'append' called on an object that does not implement interface FormData."
I generate the ajax-call by this function
function getAJAXcall(processData, contentType, formData, callback) {
var returnValue = {
url: '".$global['serverurl']."module/".$m['ID']."/code/cms_data.php',
type: 'POST',
data: formData,
success: callback
};
if (processData === **false**) returnValue.processData = processData;
if (contentType === **false**) returnValue.contentType = contentType;
}
And call them up in this way
$.ajax(getAJAXcall(post_setting[0], post_setting[1], formData, function(result)
{ ...my callback functions... }
Also i try to change the post_setting = new Array(false,false); to true, true but the result was the same
You use the right method call for this, so presumably there's something else wrong.
Could FormData be overwritten by some other library (perhaps a polyfill), that knows nothing of .append()? Check the console of your browser for FormData and see, if you can spot anything fishy there.
You use the result in a jQuery AJAX call, true? Then this answer applies to you. In a nutshell, add
processData: false,
to your AJAX parameters.

json data extraction in pebbleJS

I am stuck in json data extraction in pebble.
var UI = require('ui');
var ajax = require('ajax');
var URL="http://ws.audioscrobbler.com/2.0/?method=user.getTopArtists&user=test&api_key=4a9f5581a9cdf20a699f540ac52a95c9&limit=10&format=json&callback=?";
var card = new UI.Card({
title:'last.fm stat',
subtitle:'Fetching...'
});
card.show();
ajax({ url: URL }, function(data){
var topArtist=data.topartists[0].artist.name;
card.subtitle(topArtist);
});
Here's the error I get:
[INFO] ocess_manager.c:368: Heap Usage for App <lastfm sta: Total Size <48584B> Used <6256B> Still allocated <28B>
[PHONE] pebble-app.js:?: (+) [card 1] : [card 1]
[PHONE] pebble-app.js:?: JavaScript Error:
TypeError: Cannot read property '0' of undefined
at pebble-js-app.js:123:32
at pebble-js-app.js:871:17
at req.onreadystatechange (lib/ajax.js:11
4:9)
Evening Mona,
Remove the question mark at the URL's end.
Remove the card.show() instruction where you put it, and place it after adding a subtitle to it.
Specify you're dealing with a JSON datatype.
And your final code should now look like this:
var UI = require('ui');
var ajax = require('ajax');
var URL="http://ws.audioscrobbler.com/2.0/?method=user.getTopArtists&user=test&api_key=4a9f5581a9cdf20a699f540ac52a95c9&limit=10&format=json&callback=";
var card = new UI.Card({
title:'last.fm stat',
subtitle:'Fetching...'
});
ajax({ url: URL, type: 'json' }, function(data) {
var topArtist = data.topartists.artist[0].name;
card.subtitle(topArtist);
card.show();
});
It should now run perfectly. :)
Also, you should add a failure callback in your ajax method:
ajax({object}, success, failure)

Uncaught TypeError: callback is not a function

I have a function:
reportAdminActions.reportMemberList(project, function(data) {
console.log(data);
});
This function is called by another ajax operation like these:
reportMemberList: function(projectId, callback) {
var projectDetail = new Object();
projectDetail.projectId = projectId;
var pluginArrayProject = new Array();
pluginArrayProject.push(projectDetail);
$.ajax({
url : ConfigCom.serverUrl + 'projectreportonmember',
dataType: "jsonp",
type: "POST",
data: JSON.stringify(pluginArrayProject)
}).always(function(data) {
callback(data.responseText);
});
}
I need return value to function defined area after ajax operation. But here I got a error
Uncaught TypeError: callback is not a function
Check the rest of your code for calls to reportMemberList and make sure you always call it with the callback as a parameter. If you omit the callback parameter anywhere (e.g. call reportMemberList with just the projectId parameter), the code above would parse correctly the other calls to the function with the callback would produce the error. (This was the solution for me.)
guessing, but try to change your "jsonp" to "json". If you don't make cross-origin requests there, it should work
reportMemberList: function(projectId, callback) {
var projectDetail = new Object();
projectDetail.projectId = projectId;
var pluginArrayProject = new Array();
pluginArrayProject.push(projectDetail);
$.ajax({
url : ConfigCom.serverUrl + 'projectreportonmember',
dataType: "json",
type: "POST",
data: JSON.stringify(pluginArrayProject)
}).always(function(data) {
callback(data.responseText);
});
}

How to pass data while using get method in xdr

As IE does not support cross domain issues, we have to use get or post method by using xdr, my problem is, I don't know how to pass data while using get method with xdr.
Code snippet for get method using jquery ajax is like -
$.ajax({
type: 'GET',
cache: false,
url: site_url,
data: params,
success: onsuccess,
error:onError
});
but suppose if I write this code for xdr it will be like -
var xdr = new XDomainRequest();
xdr.CacheControl = "no-cache";
xdr.open("get", site_url);
xdr.onload = function () {
var data = $.parseJSON(xdr.responseText);
onsuccess(data);
}
xdr.onerror = function() {alert('err');};
xdr.send();
Now in this, I do not know where to pass data!!!
Please help me out to solve this problem.
It all happens in the ".open" method.
Lets say you want to pass some JSON or an object to the request.
Do it like so...
var my_request_data = {
"whatever" : "whatever",
"again" : "whatever again",
"you get" : "the point..."
};
my_request_data = $.param(my_request_data);
xdr.open("get", "http://url.com/to/get/or/post/too/" + my_request_data);
jQuery turns the JSON object into URL friendly params and then it is sent to the server.
That is how you pass data!

Syntax:Error JSON.parse, When trying to load data for protovis

Hi I'm learning how to work with protovis, so far so good, but now I stumbled upon a problem I can't seem to solve.
The following is the code. (I have the latest jquery loaded in my headers)
<script type="text/javascript+protovis">
var dataURL = "http://eagereyes.org/media/2010/protovis-primer/earthquakes.json";
var JSONdata = $.ajax({ type: "GET", url: dataURL, async: false }).responseText;
var earthquakes = JSON.parse(JSONdata);
var width = 560;
var height = 245;
var barWidth = width/earthquakes.length;
var gap = 2;
new pv.Panel().width(width).height(height+5)
.add(pv.Bar)
.data(earthquakes)
.bottom(0)
.width(barWidth-gap)
.height(function(d) d.Magnitude * (height/9))
.left(function() this.index * barWidth)
.root.render();
When I try this in Firefox i get this alert:
Syntax:Error JSON.parse
I have validated the JSON on http://www.jsonlint.com/ already. So the problem must be elsewhere.
Anyone knows whats going on here?
Edit
I tried loading the same data in the protoviewer app: http://www.rioleo.org/protoviewer/ and it works. So it must be the code.
Have you tried a regular async callback instead of the synchronous approach? Like:
var dataURL = "http://eagereyes.org/media/2010/protovis-primer/earthquakes.json";
$.ajax({
type: "GET",
url: dataURL,
success: function(response) {
var earthquakes = JSON.parse(JSONdata);
var width = 560;
var height = 245;
var barWidth = width/earthquakes.length;
var gap = 2;
new pv.Panel().width(width).height(height+5)
.add(pv.Bar)
.data(earthquakes)
.bottom(0)
.width(barWidth-gap)
.height(function(d) d.Magnitude * (height/9))
.left(function() this.index * barWidth)
.root.render();
}
});
Also, is that JSON file located on the same server that the page making the request shows in the address bar (exactly http://eagereyes.org)?
Finally, the manual JSON.parse() step isn't necessary. If you add the dataType: 'json' parameter, $.ajax() will automatically deserialize as JSON and uses JSON.parse() where available.
Add a semi-colon ; to the end of your response
Which browser are you using? Some browsers don't define the JSON object. You can download a script from the URL below which will define the JSON object if it doesn't already exist.
https://github.com/douglascrockford/JSON-js
You can check whether JSON is defined as follows:
alert(JSON);
update
OK next thing I'd do is check that the ajax call is actually returning the corect data. Change your code to print the JSON returned from the ajax call.
var JSONdata = $.ajax({ type: "GET", url: dataURL, async: false }).responseText;
alert(JSONdata);
var earthquakes = JSON.parse(JSONdata);
$.ajax({
type: "POST",
url: "saveChangesInEditing.php",
data: idObject,
success: function(data){
dataObject = JSON.parse(data);
$("input[name = 'id']").val(dataObject.id);
$("input[name='full_name']").val(dataObject.full_name);
$("input[name='sport']").val(dataObject.sport);
$("input[name='idol']").val(dataObject.idol);
},
error: function(data){
alert("error!" + data);
}
});

Categories

Resources