I am working with a file to interact with an API. First the API sends some HTML and Javascript to create a search form, then the API can process the query of that search form.
I am having some problems with my second request, which is called within the success function of the first request (this seems to be the problem!). Here's the code I'm working with.
$.ajax({
type: "POST",
url: "https://vq3rsgkd94.execute-api.us-east-1.amazonaws.com/deploy",
crossDomain: true,
data: JSON.stringify({
"stage": "load",
"fields": ["first_name", "last_name", "graduation_year"]
}),
success: function(response) {
response = JSON.parse(response);
$(response.html).prependTo("#content");
$(response.scripts).appendTo("body");
},
complete: function() {
//get field inputs
var fieldInput = {
"first_name_query": "",
"last_name_query": "",
"graduation_year_query": ""
};
$('form').find('input[type=search]').each(function(index, value) {
var variableName = value.name;
var fieldId = "#" + value.name;
$(fieldId).keyup(function() {
variableName = $(this).val();
fieldInput[value.name + "_query"] = variableName
console.log(value.name + ":" + fieldInput[value.name + "_query"]);
})
.keyup();
});
$('#search_form').submit(function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "https://vq3rsgkd94.execute-api.us-east-1.amazonaws.com/deploy",
data: JSON.stringify({
"stage": "search",
"fields": ["first_name", "last_name", "graduation_year"],
"query": {
"first_name": fieldInput["first_name_query"]
}
}),
success: function(response) {
response = JSON.parse(response);
console.log(response);
}
});
})
}
});
When trying to parse the response, I get unexpected token: o. If I run this code outside of the first ajax request like this:
$.ajax({
type: "POST",
url: "https://vq3rsgkd94.execute-api.us-east-1.amazonaws.com/deploy",
data: JSON.stringify({
"stage": "search",
"fields": ["first_name", "last_name", "graduation_year"],
"query": {
"first_name": "Bob"
}
}),
success: function(response) {
response = JSON.parse(response);
console.log(response);
}
});
I don't have any problem and the code executes normally. So the problem seems to be running one Ajax call inside another's success response, but I don't know why? I can probably do things another way instead, but wanted to see if anyone had some insight into why this doesn't work.
The error you are getting suggests that you are trying to parse an object with JSON.parse
since
var x = {}
console.log(x.toString()) //> [object Object]
JSON.parse(x)
// Uncaught SyntaxError: Unexpected token o in JSON at position 1
// at JSON.parse (<anonymous>)
// at <anonymous>:3:6
Are you sure that response is a string in the second case
Instead of explicitly converting the JSON allow jquery to parse it for you with dataType: 'json'
$.ajax({
type: "POST",
url: "https://vq3rsgkd94.execute-api.us-east-1.amazonaws.com/deploy",
data: JSON.stringify({
"stage":"search",
"fields":["first_name","last_name","graduation_year"],
"query":{"first_name": fieldInput["first_name_query"] }
}),
dataType: 'json'
)}
So the problem ended up being pretty strange. I'm developing an API for Nationbuilder platform (maybe my first mistake). For unknown reasons, Nationbuilder was appending a authenticity token to any request made, which my LAMBDA based API couldn't parse. Just in case anyone else is in the same very tiny boat as I was, I ended up using GET requests instead of POST requests and Nationbuilder stopped appending the authenticity token.
Also, if anyone is using Lambda, I ended up switching to Digital Ocean hosted Express JS and am much happier.
Related
and thank you in advance for helping me.
I'm trying to make a POST where I pass the TOKEN in the URL and I want to pass another param too so I can save the info in the DB. I have this:
$("#btnAddCompany").click(function(e) {
var token = "123";
var companyValue = document.getElementById("companyValue").value;
var obj ={CompanyId: 4 ,Name: companyValue }
var postData = JSON.stringify(obj);
console.log(postData);
$.ajax({
type: "POST", //REQUEST TYPE
dataType: "json", //RESPONSE TYPE
contentType: "application/json",
data: postData,
url: "http://banametric.ddns.net/BanaMetricWebServices/BanaSov_WS.svc/CompanySave/"+token,
success: function(data) {
toastr.success("Lidl Adicionado!");
},
error: function(err) {
console.log("AJAX error in request: " + JSON.stringify(err, null, 2));
}
}).always(function(jqXHR, textStatus) {
if (textStatus != "success") {
alert("Error: " + jqXHR.statusText);
}
})
});
But I'm getting an 400 error (Bad Request) so I assume that I'm making something wrong, but I don't find out what. The error trace is this:
AJAX error in request: { "readyState": 4, "responseText": "\r\n
The server encountered an error processing the request. The
exception message is 'The incoming message has an unexpected message
format 'Raw'. The expected message formats for the operation are
'Xml', 'Json'. This can be because a WebContentTypeMapper has not been
configured on the binding. See server logs for more
details. The exception stack trace is: \r\n at
System.ServiceModel.Dispatcher.DemultiplexingDispatchMessageFormatter.DeserializeRequest(Message
message, Object[] parameters)\r\n at
It's error because of
The expected message formats for the operation are 'Xml', 'Json'.
So you can pass contentType in your ajax call
$.ajax({
....,
contentType: "application/json"
})
I am not sure, but it depends on what server wants to read from you.
Server does not want to read raw bytes, it wants xml or json
Try to add headers like
beforeSend: function(xhrObj){
xhrObj.setRequestHeader("Content-Type","application/json");
xhrObj.setRequestHeader("Accept","application/json");
},
in $.ajax() function
You need to set the content type header in your request to inform the server you're sending the data as JSON.
The error message is telling you that the server does not understand the content you're sending it - you have to give it a hint that the data is in a particular format, especially because, again as mentioned in the error message, it allows you to submit in more than one different format (JSON or XML in this case).
Adding
contentType: "application/json"
to the options in your $.ajax call should resolve the issue.
P.S. We can't see the signature of your controller method but it's possible you may also need to give your parameter a name within the JSON, e.g. something like data: JSON.stringify({ "companyValue": postData }); , but there's not enough info in your question to say for certain what the correct structure should be.
$("body").on("submit", ".example_form", function() {
$.ajax({
url: 'http://example.com/{ROUTE_URL}',
data: new FormData(this),
processData: false,
contentType: false,
/* OR contentType: "application/json; charset=utf-8"*/
type: 'POST',
dataType: "json",
success: function(data) {
console.log(data);
}
});
});
Instead of this
var postData = JSON.stringify(companyValue);
why don't you try this:
var obj ={token :token ,companyValue:companyValue }
And then make use of the json stringify function
var postData = JSON.stringify(obj);
After that in ajax call only change the url:
url: "http://webservice/CompanySave/"
I was hoping that someone may be able to give me a pointer on how to achieve the following.
Currently, I have:
A JS function: A jQuery AJAX query that will get items from a SharePoint custom list.
A JS function: it will put the list results in to a datatable.
A JS function, that can turn an InitatorId into the real name of a user (GetDisplayName).
function GetDisplayName(userid) {
var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";
var requestHeaders = { "accept" : "application/json;odata=verbose" };
$.ajax({
url : requestUri,
contentType : "application/json;odata=verbose",
headers : requestHeaders,
success : GetDisplayNameSuccess,
error : GetDisplayNameFail
});
}
function populateMyOutstandingItems() {
SP.SOD.executeFunc("sp.js", "SP.ClientContext", function() {
SP.SOD.executeFunc("sp.runtime.js", "SP.ClientContext", function() {
var context = SP.ClientContext.get_current();
var queryUrl = "https://companyname.sharepoint.com/subsite/_api/Web/Lists/getbytitle('Read%20Requests')/GetItems"; //change the Url
var camlXML = "<Query><Where><And><Eq><FieldRef Name='ReaderId' LookupId='True' /><Value Type='Integer'>" + _spPageContextInfo.userId + "</Value></Eq><Neq><FieldRef Name='Read' /><Value Type='Text'>YES</Value></Neq></And></Where></Query>"
var requestData = { "query" :
{"__metadata":
{ "type": "SP.CamlQuery" }
, "ViewXml": camlXML
}
};
return jQuery.ajax({
url: queryUrl,
type: "POST",
data: JSON.stringify(requestData),
headers: {
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"Accept": "application/json; odata=verbose",
"Content-Type": "application/json; odata=verbose"
},
success: onQuerySuccessMyOutstandingItems,
error: onQueryErrorMyOutstandingItems
});
});
});
}
function onQuerySuccessMyOutstandingItems(data) {
var jsonData = data.d.results
console.log(jsonData)
$("#resultsDivMyOutstandingItems").dataTable( {
"data" : jsonData,
columns: [
{ data: "Document_x0020_Name" },
{ data: "Document_x0020_Library_x0020_Nam" },
{ data: "Request_x0020_Made_x0020_Date" },
{ data: "InitatorId" },
{ data: "Request_x0020_ReadBy_x0020_Date" }, ],
order: [[3, "asc"]]
} ); }
At the moment, in the datatable, I have the InitatorID (ie. 30) but I would like to have the real name of the user in the table.
I understand some type of recursive AJAX query will be needed, but I'm not sure what the best way forward would be to achieve this, and was hoping that someone would be able to point me in the right direction.
After reading a bit about chained requests, I tried the code below, but it's wrong I guess, since Chrome complains of an 'unexpected ending':
var request = $.ajax({
url: queryUrl,
type: "POST",
data: JSON.stringify(requestData),
headers: {
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"Accept": "application/json; odata=verbose",
"Content-Type": "application/json; odata=verbose"
}
}),
chained = request.then(function( data ) {
return $.ajax( spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + data.InitatorId + ")",
{ data: { user: data.Title }} )
});
chained.done(function( data ) {
console.log(data)
});
In short, what is the best to achieve what I'm trying to do?
Many thanks
Glen
I am not sure I completely understand what you're asking, so here's my best guess at the scenario (please correct me if I am wrong)
Make an AJAX call to get a list of items from a SharePoint custom
list, but alas, one of the columns in this list has an InitatorID instead of a user name.
To fix this, we want to make another AJAX call that will get a list of usernames for a matching set of InitatorIDs we just retrieved.
Once we have that, we want to put the data in a dataTable for display.
Without knowing the details, I would just do nested AJAX calls. Basically, once the first call is done, call the second AJAX function. Once that one is done, update the dataTable. Something like:
$.ajax({
url: MY_FIRST_URL,
data: myFirstData
}).done(function (data) {
// The first call gets completed after some time and the 'done' function is called.
// here, extract the various InitatorID values, and pass them to the
// second AJAX call, so you can then get the usernames for those Ids
var initatorIds = // ... do data massaging here to get the initatorIds
// into the format you want from the 'data' variable
// passed in the done function...
$.ajax({
url: MY_SECOND_URL,
data: initatorIds
}).done(function (data2) {
// once the SECOND call is complete, populate the dataTables
var jsonData = // ... some manipulation of data and data2 results
// to get the combined output you want.
$("#resultsDivMyOutstandingItems").dataTable( {
"data" : jsonData,
columns: [
....
....
});
}).fail(function (jqXHR, textStatus) {
// do stuff if the second call fails
});
}).fail(function (jqXHR, textStatus) {
// do stuff if the first call fails
});
And at the risk of over-complicating the solution, I'd personally look to load the data directly into the table via the ajax functionality found within the dataTable plugin (read more about that here). But definitely if it minimizes confusion to lay it out as above, do that first!
I have My jquery function that is returning me data of the formatt:
{"Suggestions":[{"name":"RR Restaurant","category_id":"166","locality":"Gayathri Nagar","listing_info":"listing","random_id":"1ll0f0wJ"},{"name":"Oko Restaurant","category_id":"166","locality":"Kumara Krupa","listing_info":"listing","random_id":"0F7ZGV9p"},{"name":"H2O Restaurant","category_id":"166","locality":"Maratha Halli","listing_info":"listing","random_id":"0JNPOyuP"},{"name":"Taj Restaurant","category_id":"166","locality":"Shivaji Nagar","listing_info":"listing","random_id":"7GeA0Kfq"},{"name":"PSR Restaurant","category_id":"166","locality":"Peenya Industrial Area","listing_info":"listing","random_id":"cRvJCwQ3"},{"name":"ac restaurant","category_id":"166","listing_info":"keyword"},{"name":"Indian Restaurant","category_id":"166","listing_info":"keyword"},{"name":"goan restaurant","category_id":"166","listing_info":"keyword"},{"name":"thai restaurant","category_id":"166","listing_info":"keyword"},{"name":"andhra restaurant","category_id":"166","listing_info":"keyword"}],"ImpressionID":"test"}
I wish to parse the same to get multiple variables with The field "Name" and "Random Id" in different js variables
$("#what").on("keypress", function() {
$.ajax({
type: "GET",
cache: false,
url: "/AutoComplete.do",
data: {
query: 'Pest',
city: 'Bangalore'
}, // multiple data sent using ajax
success: function(data) {
alert();
}
});
});
My JSON object seems to be nested with "Suggestions" as the parent. Please help.
If you add a property to $.ajax function you be ensure that is json parsing:
dataType: 'json'
EDIT
To iterate above the string you can use for(in) or each() jquery
json = "[{'key':'value'},{'key':'value']";
for(var i in json) {
console.log(json[i]);
//if you see in console [OBJECT Object] you are
//in a new object you must to iterate nested of this.
}
$("#what").on("keypress", function() {
$.ajax({
type: "GET",
dataType: "JSON", //You need this to be inserted in your ajax call.
cache: false,
url: "/AutoComplete.do",
data: {
query: 'Pest',
city: 'Bangalore'
}, // multiple data sent using ajax
success: function(data) {
alert();
}
});
});
After insert dataType you can probably do this.
console.log(data.Suggestions);
Also take a look at the API Doc at below url regardless of dataType.
http://api.jquery.com/jquery.ajax/
The data object you are specifying is what will be sent as the arguments to your success method, if you use the GET method.
$("#what).on("keypress", function() {
$.get("/AutoComplete.do", function(response) {
var data = JSON.parse(response);
//data.suggestions = [lots of objects];
//data.suggestions[0].locality = "Gayathri Nagar"
});
});
I am trying to run post request to parse json format data into the page. An example query is:
$("#click").click(function () {
$.ajax({
type: "POST",
url: "http://ut-pc-236:9000/kanye/flow/search",
contentType: "application/json;charset=UTF-8",
data: {
"fromDate":"2011-01-01",
"toDate":"2011-03-16T14:35:00Z",
"limitTotalFlows":1000,
"operator":"AND",
"keyValues":[ "J0419:E", "J0410:AMPY", "J1043:BEDFORD" ]
},
success: function (data) {
console.log(data);
}
});
});
but it gives an error - bad request (400). I guess it should be some syntax error since the get method works ok. If anyone can help I would really appreciate it. Thanks
You're not sending a valid json object as you claim to be doing with the contentType.
JSON.stringify your data:
data: JSON.stringify({
"fromDate":"2011-01-01",
"toDate":"2011-03-16T14:35:00Z",
"limitTotalFlows":1000,
"operator":"AND",
"keyValues":[ "J0419:E", "J0410:AMPY", "J1043:BEDFORD" ]
}),
How should I be passing query string values in a jQuery Ajax request? I currently do them as follows but I'm sure there is a cleaner way that does not require me to encode manually.
$.ajax({
url: "ajax.aspx?ajaxid=4&UserID=" + UserID + "&EmailAddress=" + encodeURIComponent(EmailAddress),
success: function(response) {
//Do Something
},
error: function(xhr) {
//Do Something to handle error
}
});
I’ve seen examples where query string parameters are passed as an array but these examples I've seen don't use the $.ajax() model, instead they go straight to $.get(). For example:
$.get("ajax.aspx", { UserID: UserID , EmailAddress: EmailAddress } );
I prefer to use the $.ajax() format as it's what I’m used to (no particularly good reason - just a personal preference).
Edit 09/04/2013:
After my question was closed (as "Too Localised") i found a related (identical) question - with 3 upvotes no-less (My bad for not finding it in the first place):
Using jquery to make a POST, how to properly supply 'data' parameter?
This answered my question perfectly, I found that doing it this way is much easier to read & I don't need to manually use encodeURIComponent() in the URL or the DATA values (which is what i found unclear in bipen's answer). This is because the data value is encoded automatically via $.param()). Just in case this can be of use to anyone else, this is the example I went with:
$.ajax({
url: "ajax.aspx?ajaxid=4",
data: {
"VarA": VarA,
"VarB": VarB,
"VarC": VarC
},
cache: false,
type: "POST",
success: function(response) {
},
error: function(xhr) {
}
});
Use data option of ajax. You can send data object to server by data option in ajax and the type which defines how you are sending it (either POST or GET). The default type is GET method
Try this
$.ajax({
url: "ajax.aspx",
type: "get", //send it through get method
data: {
ajaxid: 4,
UserID: UserID,
EmailAddress: EmailAddress
},
success: function(response) {
//Do Something
},
error: function(xhr) {
//Do Something to handle error
}
});
And you can get the data by (if you are using PHP)
$_GET['ajaxid'] //gives 4
$_GET['UserID'] //gives you the sent userid
In aspx, I believe it is (might be wrong)
Request.QueryString["ajaxid"].ToString();
Put your params in the data part of the ajax call. See the docs. Like so:
$.ajax({
url: "/TestPage.aspx",
data: {"first": "Manu","Last":"Sharma"},
success: function(response) {
//Do Something
},
error: function(xhr) {
//Do Something to handle error
}
});
Here is the syntax using jQuery $.get
$.get(url, data, successCallback, datatype)
So in your case, that would equate to,
var url = 'ajax.asp';
var data = { ajaxid: 4, UserID: UserID, EmailAddress: EmailAddress };
var datatype = 'jsonp';
function success(response) {
// do something here
}
$.get('ajax.aspx', data, success, datatype)
Note
$.get does not give you the opportunity to set an error handler. But there are several ways to do it either using $.ajaxSetup(), $.ajaxError() or chaining a .fail on your $.get like below
$.get(url, data, success, datatype)
.fail(function(){
})
The reason for setting the datatype as 'jsonp' is due to browser same origin policy issues, but if you are making the request on the same domain where your javascript is hosted, you should be fine with datatype set to json.
If you don't want to use the jquery $.get then see the docs for $.ajax which allows room for more flexibility
Try adding this:
$.ajax({
url: "ajax.aspx",
type:'get',
data: {ajaxid:4, UserID: UserID , EmailAddress: encodeURIComponent(EmailAddress)},
dataType: 'json',
success: function(response) {
//Do Something
},
error: function(xhr) {
//Do Something to handle error
}
});
Depends on what datatype is expected, you can assign html, json, script, xml
Had the same problem where I specified data but the browser was sending requests to URL ending with [Object object].
You should have processData set to true.
processData: true, // You should comment this out if is false or set to true
The data property allows you to send in a string. On your server side code, accept it as a string argument name "myVar" and then you can parse it out.
$.ajax({
url: "ajax.aspx",
data: [myVar = {id: 4, email: 'emailaddress', myArray: [1, 2, 3]}];
success: function(response) {
//Do Something
},
error: function(xhr) {
//Do Something to handle error
}
});
You can use the $.ajax(), and if you don't want to put the parameters directly into the URL, use the data:. That's appended to the URL
Source: http://api.jquery.com/jQuery.ajax/
The data parameter of ajax method allows you send data to server side.On server side you can request the data.See the code
var id=5;
$.ajax({
type: "get",
url: "url of server side script",
data:{id:id},
success: function(res){
console.log(res);
},
error:function(error)
{
console.log(error);
}
});
At server side receive it using $_GET variable.
$_GET['id'];