We Keep Coding

Codigniter Javascript nested Jquery error

My requirnment is if data1[count1].result_type > 0 then the td will be a drop down list from a datatable. Nut is i try this, the output is like this, all the required options are comming to a single selectbox insted of the relevent row. And the result comes to the very last row.
The desired result would be two dropdowns at the last two rows. The wanted result options all together in the one dropdown. How can I solve this?
$('#bill_no_search').click(function() {
{
$("#data_table_one tbody").html("");
var barcode = $('#barcode_no').val();
$.ajax({
url: "<?php echo base_url('index.php/Lab_and_lab_office/get_barcode_to_bill_no'); ?>",
data: {
barcode: barcode
},
method: "POST",
dataType: "JSON",
success: function(data) {
var bill_no = data.bill_no;
console.log(bill_no)
$.ajax({
url: "<?php echo base_url('index.php/Lab_and_lab_office/resulting'); ?>",
data: {
bill_no: bill_no
},
method: "POST",
dataType: "JSON",
success: function(data) {
for (var count = 0; count < data.length; count++) {
var element_id = data[count].element_id;
var ct = 'screen' + count + '';
var bt = 'td' + count + ''
var result = 'result' + count + ''
$('#data_table_one tbody').append(
'<tr>' +
'<td >' + (count + 1) + '</td>' +
'<td >' + data[count].billing_element_result_id + '</td>' +
'<td >' + data[count].bill_no + '</td>' +
'<td >' + data[count].processor_id + '</td>' +
'<td >' + data[count].test_processor_display_name + '</td>' +
'<td >' + data[count].test_code + '</td>' +
'<td >' + data[count].test_details + '</td>' +
'<td contenteditable=true id="result' + count + '">' + data[count].result + '</td>' +
'<td id="td' + count + '" contenteditable=true><select id="screen' + count + '" style="display:none"></select></td>' +
'<td contenteditable=true id="resultcell">' + data[count].result + '</td>' +
'</tr>'
);
console.log(ct)
$.ajax({
url: "<?php echo base_url('index.php/Lab_and_lab_office/get_result_type'); ?>",
data: {
element_id: element_id
},
method: "POST",
dataType: "JSON",
success: function(data1) {
for (var count1 = 0; count1 < data1.length; count1++) {
if (data1[count1].result_type > 0) {
document.getElementById(ct).style.display = "block";
$('#' + ct + '').append(
'<option>' + data1[count1].result_options + '</option>'
);
document.getElementById(bt).contentEditable = "false";
document.getElementById(result).contentEditable = "false";
}
console.log(ct)
}
}
})
}
}
})
}
})
}
})

javascript foreach select loop with selected value

I've written the following code that generates a select list. However, the part where it's supposed to check if this.id equals the same as the existing_code and put the selected value in doesnt seem to work.
any ideas what is wrong?
function showHide(layer, existing_code) {
jQuery.ajax({ url: 'getdata.php', dataType: 'json', cache: 'false', success: function(data) {
var codes = codes;
var selectcode = '';
selectcode += '<select name="codes">';
jQuery.each(codes, function() {
selectcode += '<option value="' + this.id + '"';
if (this.id == existing_code) {
selectcode += ' selected';
}
selectcode += '>' + this.code + '</option>';
});
selectcode += '</select>';
jQuery('.'+layer).html(selectcode);
}});
}

This is probably what you want:
function showHide(layer, existing_code) {
jQuery.ajax({ url: 'getdata.php', dataType: 'json', cache: 'false', success: function(data) {
var codes = data;
var selectcode = '';
selectcode += '<select name="codes">';
jQuery.each(codes, function(i, code) {
selectcode += '<option value="' + code.id + '"';
if (code.id === existing_code) {
selectcode += ' selected';
}
selectcode += '>' + code.code + '</option>';
});
selectcode += '</select>';
jQuery('.'+layer).html(selectcode);
}});
}

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...

Why are functions executed in this order?

Code:
function fillChooseCompInAddDeviceDiv(){
$.ajax({
url: "${pageContext.request.contextPath}/StoreServlet",
type: "get",
data: {ajaxId: "2"},
dataType: "json",
success: function(data) {
$("table#choseComponentAddDeviceDiv").find("td").remove();
for(var i = 0; i<data.length; i++) {
$("table#choseComponentAddDeviceDiv").append("<tr>" + "<td>" + data[i].name + "</td>" + "<td>" + data[i].price + "</td>" + "<td>" + data[i].amount + "</td>" + "<td>" + data[i].description + "</td>" + "<td>" + data[i].categoryName + "</td>" + "<td>" + "<a href='" + data[i].link + "'>" + data[i].link + "</a>" + "</td>" + "<td>" + "<img src = '" + data[i].imagePath + "' />" + "</td>" + "<td>" + "<input type='checkbox' class='checkBoxCol' value='" + data[i].name + "'>" + "</td>" + "</tr>");
}
alert("ALERT 1");
},
error: function(status) {
//Do something
}
});
}
//any edit clicked in eny table
function anyEditOnCLick(buttonId, buttonVal){
window.editIsClicked = true;
$("input.nameInput").attr("readonly", true);
if (buttonId === "device"){
$("#addDeviceDiv").css("visibility", "visible");
window.location.hash = "#addDeviceDiv";
fillChooseCompInAddDeviceDiv();
$.ajax({
url: "${pageContext.request.contextPath}/StoreServlet",
type: "get",
data: {ajaxId: "11", toEdit: buttonVal},
dataType: "json",
success: function(data) {
// puni text area
$("#addDeviceFieldName").val(data.name);
$("#addDeviceFieldDescription").val(data.description);
// cekira odgovarajuce komponente, jedan samo data se ocekuje, ne data[]
//fillChooseCompInAddDeviceDiv();
for (var i = 0; i<data.components.length; i++){
$("table#choseComponentAddDeviceDiv td input").filter(function(){return this.value == data.components[i].name}).attr("checked", true);
}
alert("ALERT 2");
},
error: function(status) {
//Do something
}
});
//name is unique - cannot be changed
$("#addDeviceDiv input#addDeviceFieldName").attr("readonly", true);
} else if (buttonId === "component"){
$("#addComponentDiv").css("visibility", "visible");
window.location.hash = "#addComponentDiv";
fillCategorySelection();
$.ajax({
url: "${pageContext.request.contextPath}/StoreServlet",
type: "get",
data: {ajaxId: "21", toEdit: buttonVal},
dataType: "json",
success: function(data) {
$("#addComponentFieldName").val(data.name);
$("#addComponentFieldPrice").val(data.price);
$("#addComponentFieldAmount").val(data.amount);
$("#addComponentFieldDescription").val(data.description);
$("#addComponentFieldLink").val(data.link);
$("#form#uploadForm #imageFile").attr("value", data.imagePath);
//fillCategorySelection();
$("#addComponentDiv select.categorySelect option").filter(function(){return this.value == data.categoryName}).attr("selected", "selected");
},
error: function(status) {
//Do something
}
});
//name is unique - cannot be changed
$("#addComponentDiv input#addComponentFieldName").attr("readonly", true);
} else if (buttonId === "category"){
$("#addCategoryDiv").css("visibility", "visible");
window.location.hash = "#addCategoryDiv";
fillChoseSubCategoriesinAddCategoriesDiv();
$.ajax({
url: "${pageContext.request.contextPath}/StoreServlet",
type: "get",
data: {ajaxId: "31", toEdit: buttonVal},
dataType: "json",
success: function(data) {
$("#addCategoryFieldName").val(data.name);
$("#addCategoryFieldDescription").val(data.description);
//fillChoseSubCategoriesinAddCategoriesDiv();
for (var i = 0; i<data.subCategories.length; i++){
$("table#choseSubCategoriesinAddCategoriesDiv td input").filter(function(){return this.value == data.subCategories[i].name}).attr("checked", true);
}
},
error: function(status) {
//Do something
}
});
//name is unique - cannot be changed
$("#addCategoryDiv input#addCategoryFieldName").attr("readonly", true);
}
}
Function anyEditOnCLick(arg1, arg2) is event function and is placed in onClick tag of a button.
When I click on this button browser always first shows ALERT 2 message and after that go execute fillChooseCompInAddDeviceDiv() and shows ALERT 1. Can someone explain what is really happend here and how can I "persuade" javascript first execute fillChooseCompInAddDeviceDiv()? Before this, i thought function call provides executing whole function body before resuming execution of outer code.

Ajax cannot get success or error

I'm trying to show search results via AJAX to the view. The action gets JSON and sends it, but the AJAX seems to not be receiving the data.
$(function () {
$("#btnSearchForUser").click(function () {
var searchUserResult = $("#UserName").val();
var jsonResult = {
UserName: searchUserResult
};
$.ajax({
type: "POST",
async: false,
dataType: "json",
url: "/Car/ReturnCars",
data: jsonResult,
success: function (jsonResults) {
var table = $("#tblCarResults");
table.empty();
for (var i = 0; i < jsonResults.length; i++) {
var btnBill = "<td><input type='button' value='Get bill'/> <td>";
var btnReturn = "<td><input type='button' value='Return car'/></td>";
var tdUserName = "<td>" + jsonResults[i].UserName + "</td>";
var tdManufacture = "<td>" + jsonResults[i].Manufacturer + "</td>";
var tdModel = "<td>" + jsonResults[i].Model + "</td>";
var tdFee = "<td>" + jsonResults[i].Fee + "</td>";
var tr = tdManufacture + tdModel + tdFee + btnBill + btnReturn;
$(tr).appendTo(table);
};
},
error: function (error) {
alert("Error: " + error.status);
}
});
});
})
Edit: the success was not a mistype and has been corrected.

Since you have not answered my question in the comments. I am guessing btnSearchForUser is a submit button and you are not cancelling its click action.
$("#btnSearchForUser").click(function (event) {
event.preventDefault();