Develop Reference

JS Datatable not displaying AJAX response

Datatable is not displaying the response of an AJAX call to flask backend.
The data is retrieved as I can see it in the console.log of the success field of the AJAX call, however its not populating in the table.
Here is the JSON:
{'events':
[
{
'TIME': 'Evening',
'DESCRIPTION': 'test1'
},
{
'TIME': 'Morning',
'DESCRIPTION': 'test2'
}
]
}
This is the JS part:
function load_table() {
var payload = {'from_date': $('#from_date').val(), 'to_date': $('#to_date').val()}
$('#table').DataTable({
pageLength: 50,
paging: true,
ajax: {
url: "data/get-events/" + JSON.stringify(payload),
dataType: "json",
type: 'GET',
error: function(e){
alert(e);
},
success: function(e){
console.log(e);
},
dataSrc: 'events'
},
columns: [
{ title: 'Time', data: 'TIME'},
{ title: 'Event', data: 'DESCRIPTION'}
],
bDestroy: true,
});
}
I tried the tens of answers to my similar question but none of them worked.

I want to ask, how to throw a value from ajax to javascript?

I have code like this, ajax code is a method of retrieving data from php and the return I call it "RESPONSE". And the function $ (window). on ('load', function () {is a function in chat feature where I want to call the response feature contained in ajax to the "chat-msg" variable
$(window).on('load', function() {
var tags = [{
type: "input",
tag: "text",
name: "name",
"chat-msg": "Halo, Selamat datang di Sistem Pakar Diet? Nama kakak siapa?" }, {
type: "input",
tag: "radio",
name: "kegiatan",
"chat-msg": "Senang bertemu denganmu, {{name}}! Kegiatan kakak sehari?",
children: [{
value: "olahraga",
text: "Olahraga",
}, {
value: "kerja",
text: "Kerja Kantoran",
}, {
value: "dirumah",
text: "Dirumah",
}]
}, {
type: "msg",
"chat-msg": "Mimin juga suka {{kegiatan}}...",
delay: 1250,
callback: function() {
var name = Chat.getData().name;
Chat.addTags([{
type: "input",
tag: "radio",
name: "tricked",
"chat-msg": tampunganrespon,
children: [{
value: true,
text: "Ya"
}, {
value: false,
text: "Tidak"
}],
success: function(data) {
var msg = data.tricked == 'true' ? "";
Chat.addTags([{
type: "msg",
"chat-msg": msg,
delay: 2000
}]);
}
}])
}
},
$(document).ready(function() {
$("#display").click(function() {
$.ajax({
type: "GET",
url: "datapertanyaan.php",
dataType: "html",
success: function(response) {
$("#responsecontainer").html(response);
alert(response);
return response;
}
});
});
});

You means that Processing response outside of Ajax functions? You can package Ajax functions as a promise, In addition, you can encapsulate a function whose parameters contains a callback function so that you can deal with resposne with the callback

How to send Select2 AJAX POST with body?

I am using select2 with ajax. The data needs to be fetched using a POST request with some payload in the body.
POST request is being sent but the data is urlencoded and sent as request payload instead of request body.
I am trying this:
self.$("#elem-id").select2({
placeholder: 'Placeholder Text',
allowClear: true,
ajax: {
type: 'POST',
url: 'my_url',
dataType: 'json',
data: function(term, page) {
return {
q: term,
q2: [{
"hello": "world"
}]
};
},
params: {
headers: getHeaders(),
contentType: "application/json"
},
quietMillis: 250,
results: function(data, page) {
return {
.....
};
},
cache: true
}
});

Pass the object you return in the done function through JSON.stringify function
data: function(term, page) {
return JSON.stringify({
q: term,
q2: [{
"hello": "world"
}]
});
},

How to add new tags in select2?

I am trying to get the tags from my api. Everything works fine but I cant able to add new tags. Here is what i tried:
$(function(){
var user_email = localStorage.getItem('email');
var api = localStorage.getItem("user_api_key");
var auth = "apikey" +' ' +(user_email+":"+api);
$('#s2id_id_add-places').select2({
multiple: true,
tags: [],
tokenSeparators: [",", " "],
width: "200px",
ajax: {
placeholder: "Click to enter who",
type: "GET",
beforeSend: function(xhr) {
xhr.setRequestHeader("Authorization", auth);
xhr.setRequestHeader("Content-Type","application/json");
xhr.setRequestHeader("Accept","application/json");
},
url: "https://example.com/api/v3/places/",
dataType: "json",
contentType: "application/json",
processData: true,
quietMillis: 50,
data: function(term) {
return {
term: term
};
},
results: function(data) {
var results = [];
if(data.objects.length > 0) {
for (i=0; i<data.objects.length; i++) {
results.push({id: data.objects[i].id, text: data.objects[i].label, isNew: true});
}
}
return {
results: results
};
},
});
});
By using the above code, I can only get the tags but I cant able to add the new tags. how can i add the new tags?
Please help

$("#e11_2").select2({
createSearchChoice: function(term, data) {
if ($(data).filter( function() {
return this.text.localeCompare(term)===0;
}).length===0) {
return {id:term, text:term};
}
},
multiple: true,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
You have to create a function like createSearchChoice, that returns a object with 'id' and 'text'. In other case, if you return undefined the option not will be created.

adding custom parameters for highcharts using ajax

I'm trying to add some parameters to my highcharts that are being called by ajax. I call all the necessary parameters in a separate php, then the success result would put it in the container for highcharts.
My Code:
$.ajax({
type: 'post',
url: 'sdayresult.php',
data: $("#FormName").serialize(),
success: function(data) {
//$("#anser").html(data);
$('#container').highcharts({data});
}
The value of the data:
chart: {
type: 'scatter'
},
title: {
text: 'Search by Airline'
},
xAxis: {
categories: ['none']
},
yAxis: {
title: {
text: '# of Crew'
}
},
series: [{
name: '# of Crew',
URLs: ['#'],
data: [0],
point: {
events: {
click: function() {
var someURL = this.series.userOptions.URLs[this.x]; // onclick get the x index and use it to find the URL
if (someURL)
window.open('http://'+someURL);
}}}
}]
But when I run the script, the is a javascript error saying that I have an undefined "}". I tried pasting the value of the data to another test page of highcharts and it seems that the value of data is correct. What should I do to fix it?