I have an ajax call that works well in a view, but I would like to make it in a coffee script, right inside a datatable call. The code looks like:
$(document).ready(function () {
$.ajax({
type: "GET",
url: "<%= people_path(format: :json) %>",
dataType: "json",
success: function({data}) {
const user_ids = data.map(user => user.id)
$("#people-ids").html(user_ids.join());
}
});
});
I am new to coffeescript, so I need some help to finish the method around the mapping section.
I could go as far as this:
ajax:
type: 'GET'
url: $('#people-datatable').data('source')
dataType: 'json'
success: ({data}) ->
I obtain 7 objects in {data}, but i do not know how to continue to retrieve their ID as in JS. can someone help please ?
In the map iterator function you need to wrap the parameter name in parenthesis. Coffeescript doesn't support the syntax without parenthesis which is allowed in javascript.
It would be ambiguous as it could be interpreted as user => ... being a function user being executed with the argument => ...
This should work:
$(document).ready ->
$.ajax
type: "GET",
url: "<%= people_path(format: :json) %>",
dataType: "json",
success: ({ data }) ->
user_ids = data.map (user) -> user.id
$("#people-ids").html user_ids.join()
While you are learning the syntax it might be useful to build snippets in http://coffeescript.org/#try: so you can see what it transpiles to instantly.
Related
I have the following ajax link:
#Html.AjaxActionLink(item.Name, "https://test.testspace.space/storage/Data/stream?tokenValue=e58367c8-ec11-4c19-995a-f37ad236e0d2&fileId=2693&position=0", new AjaxOptions { HttpMethod = "POST" })
However, although it is set to POST, it seems that it still sends GET request.
UPDATE:
As suggested below, I also tried with js functuion like this:
function DownloadAsset() {
alert("downloading");
$.ajax({
type: "POST",
url: 'https://test.testspace.space/storage/Data/stream?tokenValue=add899c5-7851-4416-9b06-4587528a72db&fileId=2693&position=0',
success: function () {
}
});
}
However, it still seems to be GET request. Parameters must be passed as query and not in the body of the request because they are expected like that by the target action. I don't know why (it would be more natural to have GET request) but back-end developer designed it like this due to some security reason.
If I use razor form like this, then it works:
<html>
<form action="https://test.testspace.space/storage/Data/stream?tokenValue=2ec3d6d8-bb77-4c16-bb81-eab324e0d29a&fileId=2693&position=0" method="POST">
<div>
<button>Send my greetings</button>
</div>
</form>
</html>
However, I can not use this because I already have bigger outer form on the page and I'll end up with nested forms which is not allowed by razor/asp.
The only way is to use javascript but for some reason it does not make POST request.
#Html.AjaxActionLink will generate to <a> tag,and tag will only have HttpGet request method.If you want to send HttpPost with <a> tag,you can use it call a function with ajax,here is a demo:
link
<script>
function myFunction() {
$.ajax({
type: "POST",
url: "https://test.testspace.space/storage/Data/stream",
data: { tokenValue: "e58367c8-ec11-4c19-995a-f37ad236e0d2", fileId: "2693", position:0 },
success: function (data) {
}
});
</script>
Since you want to make a POST request, but the values need to be as query string params in the URL, you need to use jquery.Param.
see https://api.jquery.com/jquery.param/.
You should set the params, like below :
$.ajax({
url: 'your url',
type: 'POST',
data: jQuery.param({ tokenValue: "your token", fileId : "2693", position: 0}) ,
...
Try this instead,
First remove the action url from the from
Second put the result in the success function to return response
and for parameters, I always use FormData() interface to post with Ajax
And last don't forget to include dataType, contentType, processData to not get an unexpected behavior
your code will look like this
var form_data = new FormData();
form_data.append('tokenValue' ,'add899c5-7851-4416-9b06-4587528a72db&fileId=2693');
form_data.append('position' ,'position');
$.ajax({
type: "POST",
dataType: 'json',
contentType:false,
processData:false,
data: form_data,
url: 'https://test.testspace.space/storage/Data/stream',
success: function (result) {
}
});
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 3 years ago.
I am trying to use 'this' once I get response from Ajax call.
but 'this' seems to be undefined. I found few articles using the 'bind', but I am not sure how to implement the bind.
I don't have any problem using 'this' inside the ajax call. I get response from backend as expected.
saveCart(data: any): void {
let body: any = {}
body.data = data
body = JSON.stringify(body)
// the 'this' works here as expected.
let config = this.config.getHeaders() as any
$.ajax({
url: environment.domain + '/cart',
type: "POST",
headers: config,
data: body,
contentType: "application/json",
dataType: "json",
async: false
}).done(function (response) {
// The 'this' below is undefined **********
this.profileService.logout().subscribe(result => {
console.log('User was logged out', result)
})
})
}
Update: Couple of folks had question about why I am not using httpClient.
This function is called when the user closes the browser. Using angular angular's httpclient is freezing the browser (heavy backend code) for few seconds before it closes. so opted for ajax call.
below is the code I am using everywhere else using angular httpClient
this.http.post(environment.domain + url, body, options)
.pipe(retryWhen(this.config.handleRetry))
.pipe(catchError(this.config.handleError))
Try this one.
saveCart(data: any): void {
/* Other code */
var that = this;
$.ajax({
url: environment.domain + '/cart',
type: "POST",
headers: config,
data: body,
contentType: "application/json",
dataType: "json",
async: false,
success:function(response){
//The 'this' below is undefined **********
that.profileService.logout().subscribe(result => { console.log('User was logged out', result) })
}
})
Try to use this way.
Option 1
Before Ajax call, set a new variable...
var that = this;
Now you can user that instead of this. It will work same as this.
Option 2
You can try with ES6 syntax. I haven't try with Ajax but I used this in my code regularly and it works fine for me.
$.ajax({
url: environment.domain + '/cart',
type: "POST",
headers: config,
data: body,
contentType: "application/json",
dataType: "json",
async: false,
success:(() =>{ <----------------Hear is the change
this...
}) =>{
}
})
Currently, the searchform hit, the form get submitted. Then it will fetch data from specified URL which is search/ajax2.php and return data here.
All I want to add is, to include another URL beside the above mentioned one, so that two actions can be performed at the same time.
Now, in the search/ajax2.php it runs a select query. Whereas in additional page that I want to include, which could be writedb.php it inserts data taken from this jason into database. It doesn't have to return anything back to ajax page though!
How to achieve this?
$("#searchform").on("submit", function () {
//$(this).find(':submit').attr('disabled','disabled');
var data = {
"action": "test"
};
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "search/ajax2.php",
data: data,
success: function (data) {
}
});
Try adding your second url in sucess function like this :
$.ajax({
type: 'POST',
url: 'some_url1',
data: 'some data',
success: function(data){
$.ajax ({
type: 'POST',
url: 'some_url2',
data: 'some data',
success: function(data){}
});
}
});
I think it goes a little something like this:
In my view:
from django.core import serializers
And later....
data = serializers.serialize('json', MODEL.objects.filter(id=id), fields=('points'))
return HttpResponse(data)
In my jQuery:
$.ajaxSetup({
dataType: "json"
});
$('#selector .selector_detail a').click(function() {
var call_to = $(this).attr('href');
$.ajax({
url: call_to,
type: "POST",
complete: function() {
console.log('Ajax Complete')
},
success: function(data) {
points = data(fields.points)
console.log('Ajax Successful')
console.log(data);
},
error: function(xhr) {
console.log('Whoops, something went wrong. XHR Response:' + JSON.stringify(xhr));
},
});
return false;
});
I want the value of points, but I have no idea how to get it out. I can see it in the console.log when I look at the data Objects. What am I missing?
if data is a json object and the correct headers are set, you can access it's properties using a dot:
data.points
data[0].points //if points is an array
//this is not correct
data(fields.points);
I don't know what's the exact structure of 'data' but you can derive it from your console.log(data);
EDIt - if data has the structure you outlined in the comment you can access points like this:
alert(data[0].fields.points);
add dataType: 'json' to your .ajax call.
$.ajax({
url: call_to,
dataType: 'json',
type: "POST",
then its jut data.points in your success function, or perhaps data.field.points. I can't tell from your post.
This works fine:
jQuery('#my_get_related_keywords').click(function() {
if (jQuery('#my_keyword').val() == '') return false;
jQuery.getJSON("http://boss.yahooapis.com/ysearch/web/v1/"
+jQuery('#my_keyword').val()+"?"
+"appid=myAppID"
+"&lang=en"
+"&format=json"
+"&count=50"
+"&view=keyterms"
+"&callback=?",
function (data) {//do something}
This returns 400 Bad Request (Just a reformulation of the above jQuery using .ajax to support error handling).
jQuery('#my_get_related_keywords').click(function()
{
if (jQuery('#my_keyword').val() == '') return false;
jQuery('#my_loader').show();
jQuery.ajax(
{
url: "http://boss.yahooapis.com/ysearch/web/v1/"
+jQuery('#my_keyword').val()+"?"
+"appid=myAppID"
+"&lang=en"
+"&format=json"
+"&count=50"
+"&view=keyterms"
+"&callback=?",
success: function(data)
{//do something}
I think you just need to add 2 more options (contentType and dataType):
$('#my_get_related_keywords').click(function() {
$.ajax({
type: "POST",
url: "HERE PUT THE PATH OF YOUR SERVICE OR PAGE",
data: '{"HERE YOU CAN PUT DATA TO PASS AT THE SERVICE"}',
contentType: "application/json; charset=utf-8", // this
dataType: "json", // and this
success: function (msg) {
//do something
},
error: function (errormessage) {
//do something else
}
});
}
Add this to your ajax call:
contentType: "application/json; charset=utf-8",
dataType: "json"
Late answer, but I figured it's worth keeping this updated. Expanding on Andrea Turri answer to reflect updated jQuery API and .success/.error deprecated methods.
As of jQuery 1.8.* the preferred way of doing this is to use .done() and .fail(). Jquery Docs
e.g.
$('#my_get_related_keywords').click(function() {
var ajaxRequest = $.ajax({
type: "POST",
url: "HERE PUT THE PATH OF YOUR SERVICE OR PAGE",
data: '{"HERE YOU CAN PUT DATA TO PASS AT THE SERVICE"}',
contentType: "application/json; charset=utf-8",
dataType: "json"});
//When the request successfully finished, execute passed in function
ajaxRequest.done(function(msg){
//do something
});
//When the request failed, execute the passed in function
ajaxRequest.fail(function(jqXHR, status){
//do something else
});
});
Be sure and use 'get' or 'post' consistantly with your $.ajax call for example.
$.ajax({
type: 'get',
must be met with
app.get('/', function(req, res) {
===============
and for post
$.ajax({
type: 'post',
must be met with
app.post('/', function(req, res) {
I was getting the 400 Bad Request error, even after setting:
contentType: "application/json",
dataType: "json"
The issue was with the type of a property passed in the json object, for the data property in the ajax request object.
To figure out the issue, I added an error handler and then logged the error to the console. Console log will clearly show validation errors for the properties if any.
This was my initial code:
var data = {
"TestId": testId,
"PlayerId": parseInt(playerId),
"Result": result
};
var url = document.location.protocol + "//" + document.location.host + "/api/tests"
$.ajax({
url: url,
method: "POST",
contentType: "application/json",
data: JSON.stringify(data), // issue with a property type in the data object
dataType: "json",
error: function (e) {
console.log(e); // logging the error object to console
},
success: function () {
console.log('Success saving test result');
}
});
Now after making the request, I checked the console tab in the browser development tool.
It looked like this:
responseJSON.errors[0] clearly shows a validation error: The JSON value could not be converted to System.String. Path: $.TestId, which means I have to convert TestId to a string in the data object, before making the request.
Changing the data object creation like below fixed the issue for me:
var data = {
"TestId": String(testId), //converting testId to a string
"PlayerId": parseInt(playerId),
"Result": result
};
I assume other possible errors could also be identified by logging and inspecting the error object.
Your AJAX call is not completed with the following two params.
contentType: "application/json; charset=utf-8",
dataType: "json"
contentType is the type of data you're sending
dataType is what you're expecting back from the server
In addition try to use JSON.stringify() method. It is used to turn a javascript object into json string.