We Keep Coding

Make a combo box from ajax response

So, I have a button. When I click on it, It'd retrieve ids by ajax method. While the ids are being generated, I'm using another ajax to get some data using the id's as parameter. it's basically an ajax inside an ajax response.
JS:
$("#btn_add").click(function() {
var val_txt = $('#i_minta').find('option:selected').val().replace(/\s{2,}/g, ' ').trim();
var val = val_txt.split("|");
var val_no = val[0];
var val_tgl = val[1];
var val_kc = val[2];
$.ajax({
type: "POST",
url: "<?php echo site_url('con_atk/get_minta'); ?>",
cache: false,
dataType: "json",
data: {
x: val_no /*this is the parameter to get the ID List*/
},
success: function(response) {
var no = 1;
var col_no, col_brg, col_pnh, col_mnt, col_hrg, col_tot, tableData;
$.each(response, function(index, data) {
var txt_harga = [];
var select_txt = "<select id=combo_harga class='form-control'></select>";
$.ajax({
type: "POST",
url: "<?php echo site_url('con_atk/get_harga'); ?>",
cache: false,
dataType: "json",
data: {
y: data.KodeBarang /* this is the ID to get another data */
},
success: function(outputs) {
$.each(outputs, function(i, value) {
//$('#combo_harga').append($('<option></option>').val(index).html(value.harga));
//txt_harga.push('<option value="'+ value.stok +'">'+ value.harga +'</option>');
txt_harga[i] = "<option value='" + value.stok + "'>" + value.harga + "</option>";
});
$('#combo_harga').append(txt_harga.join(''));
}
});
var rowCount = $("#t_output tbody tr").length;
var in_kode = "<input type='hidden' id='i_kb' name='detail[" + rowCount + "][in_kb]' value='" + data.KodeBarang + "' />";
var in_pmnh = "<input type='text' id='i_pnh' name='detail[" + rowCount + "][in_pnh]' onCopy='return false' onDrag='return false' onDrop='return false' onPaste='return false' autocomplete='off' onkeypress='return isNumber(event)' />";
col_no = "<tr><td style='text-align:right; vertical-align:middle'>" + no++ + "</td>";
col_brg = "<td style='text-align:left; vertical-align:middle'>" + data.KodeBarang + " " + in_kode + "<br />" + data.NamaBarang + "</td>";
col_pnh = "<td class='mid'>" + in_pmnh + "</td>";
col_mnt = "<td class='mid'><input type='text' id='o_pmnt' value='" + data.jumlah_minta + "' style='font-weight:bold; width:70%; text-align:right; background-color:#DE5862 !important' readonly /></td>";
col_hrg = "<td style='text-align:right; vertical-align:middle'>" + select_txt + "</td>";
col_tot = "<td style='text-align:right; vertical-align:middle'>xxx</td></tr>";
tableData += col_no + col_brg + col_pnh + col_mnt + col_hrg + col_tot;
$('#t_output tbody tr').remove();
$('#t_output tbody').append(tableData);
});
}
});
});
The end result is a table with each row has a combobox with the value of each id. Like this:
no id somecolumn somecolumn harga somecolumn
1 A xxx xxx value_of_A_1 xxx
2 B xxx xxx value_of_B_1,value_of_B_2 xxx
3 C xxx xxx value_of_C_1,value_of_C_2,value_of_C_3 xxx
the combobox should be inside the harga column.
Thank you for your help :)

Hope It will success you.(it's my old code. don't worry about code format)
var as = $(this).val();
var val = as;
as = as.replace(/\s/g, '');
if (this.checked) {
var a = "_" + as;
var viewName = { viewName: a }
var billingFieldId = '#A' + as + '_BillingCycleId';
var vatFieldid = '#A' + as + '_VatcalculationProcessId';
var serviceType = '#A' + as + '_ServiceType';
$.ajax({
url: '#Url.Action("GetPartialView", "Customers")',
contentType: "application/json;charset=utf-8",
data: JSON.stringify(viewName),
type: 'POST',
dataType: 'html'
}).success(function (result) {
$('#' + as).html(result);
if (billningCycle != null && vatCalculation != null) {
$.ajax({
url: '#Url.Action("GetCommonValue", "Customers")',
contentType: "application/json;charset=utf-8",
data: JSON.stringify(viewName),
type: 'POST',
dataType: 'json',
success: function (data) {
$.each(data.BillingCycles, function (index, value) {
$(billingFieldId).append($('<option />', {
value: value.Id,
text: value.Name
}));
});
$.each(data.Vats, function (index, value) {
$(vatFieldid).append($('<option />', {
value: value.Id,
text: value.Name
}));
});

Can't find syntax error in code

Chrome dev tools is telling me there is an error on line 3 but I am unsure what it is. Admittedly I am new to coding with jQuery so it's possible that the tutorials that I followed had something wrong.
$.ajax({
url: 'https://www.carcraft.atsbusinessandgames.com/xmls/carcraft_1-7-10Test.xml',
type: "Get",
dataType: 'xml',
success: function (result) {
}
$(result).find('Module').each(function() {
//$("#ModsList").append($(this).text());
var authors = $(this).find('authors').text();
var version = $(this).find('version').text();
var date = $(this).find('date').text();
var episode = $(this).find('episode').text();
$("#ModsList").append("<tr>" + "<td>" + $authors + "</td>" + "<td>" + $version + "</td>" + "<td>" + $date + "</td>" + "<td>" + $episode + "</td>" + "</tr>");
});
error: function() {
alert("Notify the site owner that the xml file has a syntax error and is therefore unreadable.");
}
});
This is the table I'm trying to modify via above code:
<table id="ModsList">
<tr style="font-weight: bold;">
<td>Mod Name</td>
<td>Author(s)</td>
<td>Version</td>
<td>Date added/updated</td>
<td>Episode Added</td>
</tr>
</table>

Your success handler is not declared appropriately. You have to put the code in between the { } for the success function. As you have it now, you're inserting random code into an object definition, which is not legal.
Change the code to this:
$.ajax({
url: 'https://www.carcraft.atsbusinessandgames.com/xmls/carcraft_1-7-10Test.xml',
type: "Get",
dataType: 'xml',
success: function (result) {
$(result).find('Module').each(function() {
//$("#ModsList").append($(this).text());
var authors = $(this).find('authors').text();
var version = $(this).find('version').text();
var date = $(this).find('date').text();
var episode = $(this).find('episode').text();
$("#ModsList").append("<tr>" + "<td>" + authors + "</td>" + "<td>" + version + "</td>" + "<td>" + date + "</td>" + "<td>"+episode+"</td>" + "</tr>");
});
},
error: function() {
alert("Notify the site owner that the xml file has a syntax error and is therefore unreadable.");
}
});

Why success: function (result) {} is being empty? Hope the result should be accessible only at success function.

Try this
$.ajax({
url: 'https://www.carcraft.atsbusinessandgames.com/xmls/carcraft_1-7-10Test.xml',
type: "Get",
dataType: 'xml',
success: function (result) {
$(result).find('Module').each(function() {
//$("#ModsList").append($(this).text());
var authors = $(this).find('authors').text();
var version = $(this).find('version').text();
var date = $(this).find('date').text();
var episode = $(this).find('episode').text();
$("#ModsList").append("<tr>" + "<td>" +authors+ "</td>" + "<td>" +version+ "</td>" + "<td>" +date +"</td>" + "<td>" +episode+ "</td>" + "</tr>");
});
},
failure: function() {
alert("Notify the site owner that the xml file has a syntax error and is therefore unreadable.");
}
});

how to set value dynamically created textbox in javascript

I'm using javascript to dynamically generate a dialogue box (it's a div element), containing a textbox .
THE PROBLEM: I can generate my textbox just fine, but I can't get the value from it. innerHTML comes back blank every time. I'm not sure what I'm doing wrong.
intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id', 'strText' + intTextBox);
newTBDiv.innerHTML = String.fromCharCode(64 + (intTextBox + 2)) + ' :'
+ "<input style='margin-top:10px;margin-left:10px;width: 250px;'"
+ " class='txt3_double' type='text' id='"
+ intTextBox + "' name='" + intTextBox
+ "' placeholder='Next Location Point'/>"
+ "<img src='img/Add.png' onclick='addElement();return false;' />"
+ "<img src='img/Minus.png' onclick='removeElement();return false;' />";
contentID.appendChild(newTBDiv);
textboxes = intTextBox;
TextBoxloc = TextBoxloc + 1;
var contentIDloc = document.getElementById('content');
var newTBDivloc = document.createElement('div');
newTBDivloc.setAttribute('id', 'strText' + TextBoxloc);
newTBDivloc.innerHTML = String.fromCharCode(64 + (TextBoxloc + 2))
+ ' :' + "<input class='txt3_double' type='text' id='"
+ TextBoxloc + "' name='" + TextBoxloc + "' />";
contentIDloc.appendChild(newTBDivloc);
textboxesloc = TextBoxloc ;
$(document.getElementById(intTextBox)).autocomplete({
source: function (request, response) {
debugger
$.ajax({
url: '<%=ResolveUrl("~/Root.aspx/GetAutoCompleteData") %>',
data: "{ 'Address': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data.d.length == 0) {
$('.ui-autocomplete').hide();
}
else {
$(".pac-container").remove();
response($.map(data.d, function (item) {
debugger
return {
label: item.split('-')[0],
val: item.split('-')[1],
long: item.split('-')[2]
}
}))
}
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
debugger
document.getElementById(TextBoxloc).value = i.item.val;
},
minLength: 2
});

In your code I can see where you're creating individual textboxes with unique ids coming from intTextBox, so to get at the text in the textboxes just use the value:
var textboxVal = $(intTextBox).value;

Try this
document.getElementById(TextBoxloc).value = i.item.value;
i.item.val should be i.item.value

I see you are adding "strText" in id attribute and trying to set the value using
document.getElementById(TextBoxloc).value = i.item.val;
and are you getting the right value in i.item.val??
good luck...

jQuery will not bind on click handler to image

I have created a table using an array of JSON Objects that are returned by my servlet. I am trying to make it so that when I click on the image I add before each row it will call a function. The code below should work but it does not and I think I'm missing something simple.
$(document).ready(function(){
loadData();
$("#item").bind("click", function() { alert("test"); });
});
function loadData(){
$.ajax({
type: "POST",
url: "http://myservlet.com/orders",
data: { }
}).done(function( msg ) {
response = $.parseJSON(msg);
$.each(response, function(key,value) {
alert(value.order_id);
var item = 0;
$("#ordersTable tbody").append(
"<tr>"+
"<td><img src=http://examplewebsiteurl.com/plus.png id='item'></img></td>"+
"<td>"+value.order_id+"</td>"+
"<td>"+value.sku+"</td>"+
"<td>"+value.quantity_purchased+"</td>"+
"<td>"+value.product_name+"</td>"+
"<td>"+value.buyer_name+"</td>"+
"<td>"+value.buyer_phone_number+"</td>"+
"</tr>"
);
});
});
}

Try like
$(document).on('click', '#item', function() {
alert("test");
});

Loading data is asynchronous operation that's why you can't bind anything before DOM is populated. You can provide a callback function to be called once data has come and available. Or you can use the fact that $.ajax is Promise object. For example:
function loadData() {
return $.ajax({
type: "POST",
url: "http://myservlet.com/orders",
data: {}
}).done(function (msg) {
$.each(response, function (key, value) {
var item = 0;
$("#ordersTable tbody").append(
"<tr>" +
"<td><img src=http://examplewebsiteurl.com/plus.png class='item'/></td>" +
"<td>" + value.order_id + "</td>" +
"<td>" + value.sku + "</td>" +
"<td>" + value.quantity_purchased + "</td>" +
"<td>" + value.product_name + "</td>" +
"<td>" + value.buyer_name + "</td>" +
"<td>" + value.buyer_phone_number + "</td>" +
"</tr>");
});
});
}
loadData().done(function() {
$(".item").bind("click", function() { alert("test"); });
});

post variable in ajax

I would like to post the variable var projectid=data.projectid, the same as i did with:
url: "rapportage/rapport_detail?idKlant=" + klant,
the ajax call look like this:
$.ajax({
type: "POST",
url: "rapportage/rapport_detail?idKlant=" + klant,
dataType: 'json',
error: function(){ alert("Onvoldoende gegevens beschikbaar om rapportage to genereren."); },
success: function(data){ // Plaats data op de juiste plek in de tabel
var projectid=data.projectid,
titel=data.titel,
projecttype =data.projecttype,
projectleider =data.projectleider,
projecttype =data.projecttype,
statusproject =data.statusproject,
startproject =data.startproject,
deadlineproject =data.deadlineproject,
omzetproject =data.omzetproject,
kostenproject =data.kostenproject,
margeproject =data.margeproject,
totaalurenproject =data.totaalurenproject,
totaalminutenproject =data.totaalminutenproject,
urenkostenproject =data.urenkostenproject;
var str='';
for(var i=0,len=titel.length;i<len;i++){
str+="<tr>"+"<td>" + titel[i] + "</td>";
str+="<td>" + projectleider[i] + "</td>";
str+="<td>" + projecttype[i] + "</td>";
str+="<td>" + statusproject[i] + "</td>";
str+="<td>" + startproject[i] + "</td>";
str+="<td>" + deadlineproject[i] + "</td>";
str+="<td>" + "€" + omzetproject + "</td>";
str+="<td>" + "€" + kostenproject + "</td>";
str+="<td>" + "€" + margeproject + "</td>";
str+="<td>" + totaalurenproject + ":" + totaalminutenproject + "</td>";
str+="<td>" + "€" + urenkostenproject + "</td>"+"</tr>";
}
alert(JSON.stringify(data));
$("#details tbody").append(str);
}
});

You can use this;
$.ajax({
type: "POST",
url: "rapportage/rapport_detail?idKlant=" + klant,
dataType: 'json',
success: function(data) {
var projectid=data.projectid;
........
$.ajax({
type: "POST",
url: "rapportage/rapport_detail?idKlant=" + klant,
data: "projectid=" + projectid,
dataType: 'json',
success: function(response) {
}
}
.....

i didn't get what you are asking, but if you want to post a variable by POST then you can
type: "POST",
url: "rapportage/rapport_detail",
data : {"idKlant" : klan},
add this in ajax