We Keep Coding

Loop a column value in a table using ajax call

I hope you are fine!
I'm new in coding so I'm facing of something without results.
I have this type of code here in JS.
key: 'generateChart2',
value: function generateChart2() {
var self = this;
var Jahr1 = [];
var years1 = "";
for (var i = 0; i < $('#mf123_select_jahr').val().length; i++) {
if (i > 0) years1 += ","
years1 += $('#mf123_select_jahr').val()[i];
}
var postedData1 = {};
postedData1.years1 = years1;
console.log(postedData1);
$.ajax({
url: "data/json.dashboard.php?call=chart2",
data: postedData1,
dataType: 'json',
type: 'POST',
success: function (dataGraph2) {
var trHTML='';
$.each(dataGraph2, function (key, value) {
for (var i in postedData1) {
Jahr1.push(postedData1[i].years1);
}
console.log(postedData1.years1);
trHTML +=
'<tr><td >' + value.Mandant +
'</td><td >' + thousandSepNeu(value.Jahr1, 2) + " €" +
'</td><td >' + value.Growth +
'</td></tr>';
});
$('#dataGraph2').append(trHTML);
}
});
}
The value.Mandant and the value.Growth are doing well. The problem that I have is that the for loop does not work. I need to thr postedData1 to choose whenever the user choose the year to show him the results.
The output of console.log(postedData1); is:
Am I making a mistake? I know that the problem is on the for loop.
Please any advice i would appreciate it.
:)

Display data received from drop box value

I would like once the user selects a different item in the drop box list which was taken from a mysql database, that specific data to that field be displayed.
Currently, I am able to get the value of the item in the drop down box but I am unable to use it.
<h3>Drop down Menu</h3>
<select id="dmenu">
<option selected="selected" id="opt">Choose your station</option>
</select>
<div id="optionT"></div>
$(document).ready(() => {
window.onload = ajaxCallback;
function ajaxCallback(data) {
var data;
var myOptions;
var output;
$.ajax({
url: 'http://localhost:5000/alldata',
type: 'GET',
datatype: 'json',
success: (data) => {
//$.each(data, function (index, value) {
var output = [];
$.each(data, function(key, value) {
output.push('<option value="' + key + '">' + value.Station +
'</option>');
});
$('#dmenu').html(output.join(''));
}
})
}
});
$('#dmenu').on('change', function() {
//alert( this.value );
//alert($(this).find(":selected").value());
function stationData(data) {
var stationName = $(this);
alert(stationName.val());
//var stationName = $(this).value();
//var stationName = $(this).find(":selected").value()
$.ajax({
url: 'http://localhost:5000/alldata',
method: 'POST',
data: {
station: stationName
},
success: (data) => {
$.each(data, function(i) {
data[i]
//console.log(i);
var station_loopOp = '';
//console.log(JSON.stringify(data[i].Station));
station_loopOp += '<li>ID: ' + JSON.stringify(data[i].ID) +
'</li>' +
'<li>Station: ' + JSON.stringify(data[i].Station) +
'</li>' + '<li>Address:
'+JSON.stringify(data[i].Address) +
'</li>' + '<li>' +
Sales: JSON.stringify(data[i].Monthly_CStore_Sales) +
'</li>' + '<li>Operator: ' +
JSON.stringify(data[i].Operator) + '</li>' +
'<li>Top SKU: ' + JSON.stringify(data[i].Top_SKU) +
'</li>' +
'</<li>' + '<br/>');
$('#optionT').html(station_loopOp);
}
});
}
});

You are just defining the function stationData(data){....} inside the callback function but not calling it anywhere inside of it .
Add this line into your function : stationData(<your-data>);

How to convert the values in an array to strings and send to php?

I have a javascript file here.What it does is,when a user selects seats accordings to his preference in a theater layout,the selected seats are stored in an array named "seat".This code works fine until function where the selected seats are shown in a window alert.But from there onwards,the code doesn't seem to do anything.
After the above window alert, I've tried to serialize the above array and send it to the "confirm.php" file.But it does not show anything when echoed the seats.
Here is the js code.
<script type="text/javascript">
$(function () {
var settings = {
rows: 6,
cols: 15,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 80,
seatHeight: 80,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
var init = function (reservedSeat) {
var seat = [], seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 0; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
seat.push('<li class="' + className + '"' +
'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
'<a title="' + seatNo + '">' + seatNo + '</a>' +
'</li>');
}
}
$('#place').html(seat.join(''));
};
var jArray = <?= json_encode($seats) ?>;
init(jArray);
$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)) {
alert('This seat is already reserved!');
} else {
$(this).toggleClass(settings.selectingSeatCss);
}
});
$('#btnShowNew').click(function () {
var seat = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
seat.push(item);
});
window.alert(seat);
});
$('#btnsubmit').click(function () {
var seat = [], item;
$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
item = $(this).attr('title');
seat.push(item);
var seatar = JSON.stringify(seat);
$.ajax({
method: "POST",
url: "confirm.php",
data: {data: seatar}
});
});
});
});
</script>
Can somebody help me figure it out what's wrong in here?

Please Add content type as json.
$.ajax({
method: "POST",
url: "confirm.php",
contentType: "application/json"
data: {data: seatar}
});
For testing you can print file_get_contents('php://input') as this works regardless of content type.

AJAX append option not valid

I try to load the options of a select with an AJAX request. The AJAX request is correct and return what I want. Here is my code :
new Ajax.Request(url, {
method: 'post',
parameters: {foldertype_id: foldertype},
onSuccess: function(answer) {
var folders = JSON.parse(answer.responseText).folders;
var selectToFill = $('my_select_box');
for(var i = 0; i <= folders.length; i ++){
selectToFill.append('<option id="' + folders[i].value + '" value="' + folders[i].ID + '">' + folders[i].label + '</option>');
}
}
});
The option are well added nto the select, but they didn't appear in the dropdown. In Chrome I can see there is no color syntax in the option text. See this screenshot to understand well : http://imgur.com/a/4NZB5
As you can see, the grey options are those added by AJAX, and I can't see those one into my select dropdown
Why this is happen ?
Thanks in advance

got an answer here: https://arstechnica.com/civis/viewtopic.php?t=209624
Typically DOM insertion is using .insert
Example:
new Ajax.Request(url, {
method: 'post',
parameters: {foldertype_id: foldertype},
onSuccess: function(answer) {
var folders = JSON.parse(answer.responseText).folders;
var selectToFill = $('my_select_box');
for(var i = 0; i <= folders.length; i ++){
selectToFill[0].insert({after: '<option id="' + folders[i].value + '" value="' + folders[i].ID + '">' + folders[i].label + '</option>'});
}
}
});
From the code above, you should be pointing to any last option inside your select element which where you will going to append after, example your index 0 or 1
Example Snippet
const test = ["test1","test2"];
test.forEach(function(index,item){
const sel = $('my_select');
sel[0].insert({after: "<option value='"+item+"'>"+item+"</option>"});
});
<script src="https://fastcdn.org/Prototype/1.7.3/prototype.js"></script>
<select id="my_select" placeholder="test">
<option value="test">test</option>
</select>
I hope that helps.

Try this
var htmlToAppend ="";
for(var i = 0; i <= folders.length; i ++){
htmlToAppend += "<option id='" + folders[i].value + "' value='" + folders[i].ID + "'>" + folders[i].label + "</option>";
}
selectToFill.append(htmlToAppend);

How to Bind to DropDown using Jsonp response?

Hi i am using jQuery Ajax to bind data to dropdown.I am using arcgis rest services as source.I am able to get response but not able to bind to dropdown.Can anybody help this done.
$.ajax({
url: "url",
data: { f: "json", where: "1 = 1 ", returnGeometry: false },
dataType: "jsonp",
success: function(response) {
console.log( response );
var len = response.length;
$("#ddlDistrict > option").remove();
$('#ddlDistrict').append("<option value='-- Select --'>-- Select --</option>");
for (var i = 0; i < len; i++) {
$('#ddlDistrict').append('<option value="' + response[i].DistrictName + '">' + response[i].DistrictName + '</option>');
}
}
});
My console output is

success: function(response) {
console.log( response, typeof response );
if(typeof response == 'string') {
response = JSON.parse(response);
}
var len = response.features.length;
$("#ddlDistrict > option").remove();
$('#ddlDistrict').append("<option value='-- Select --'>-- Select --</option>");
for (var i = 0; i < len; i++) {
console.log(response.features[i]);
$('#ddlDistrict').append('<option value="' + response.features[i].DistrictName + '">' + response.features[i].DistrictName + '</option>');
}
}

From the response it seems you want to display displayFieldName which has a value of 'DistrictName'
SO you have to pass the key name
for (var i = 0; i < len; i++) {
$('#ddlDistrict').append('<option value="' + response[i].displayFieldName+ '">' + response[i].displayFieldName+ '</option>');
}
Now from response I see displayFieldName is just a key., where as features,fieldAliases,fields are array,object & array of object again.
I am not sure if you want to target fields which have name as key and DistrictName as value. If it is o then loop condition need to be changes
for (var i = 0; i < response.fields.length; i++) {
$('#ddlDistrict').append('<option value="' + response.fields[i].displayFieldName+ '">' + response.fields[i].name+ '</option>');
}