We Keep Coding

how to pass ID value onclick function from anchor tag by click on image using MVC?

Based on the database value status will be Y or N. If it Y means it will active.png will be displayed. it is working fine. when i click active.png image then anchor tag onclick="GetRecords1(' + item.ModuleID + '); Function the ID value is not passed to the event.
How to pass the active.png image click the ID value.
<script>
$(document).ready(function () {
$("#DomainID").change(function () {
var id = $(this).val();
$("#example tbody tr").remove();
$.ajax({
type: 'POST',
url: '#Url.Action("ViewModules")',
dataType: 'json',
data: { id: id },
success: function (data) {
var items = '';
$.each(data.EmpList, function (i, item) {
$("#findValue").show();
/*Find Role here - Comparing Emp List ModuleId to RoleList ModuleId*/
var RoleName = $(data.role).filter(function (index, item) {
return item.ModuleID == item.ModuleID
});
if (item.ParentModuleID == -1) {
item.ModuleName = " -- " + item.ModuleName
} else {
item.ModuleName = item.ModuleName
}
var Status = '';
if (item.Status == "Y") {
Status = '<img src="/img/Active.png" height="22" width="42"/>'
} else {
Status = '<img src="/img/InActive.png" height="22" width="42"/>'
}
var rows = "<tr>"
+ "<td>" + (i + 1) + "</td>"
+ "<td>" + item.ModuleName + "</td>"
+ "<td>" + item.Url + "</td>"
+ "<td>" + RoleName[i].RoleName + "</td>"
+ "<td>" + ' ' + Status + "</td>"
+ "</tr>";
$('#example tbody').append(rows);
});
},
error: function (ex) {
var r = jQuery.parseJSON(response.responseText);
alert("Message: " + r.Message);
alert("StackTrace: " + r.StackTrace);
alert("ExceptionType: " + r.ExceptionType);
}
});
return false;
});
});
</script>
Pass:
<script>
$(document).ready(function () {
$('#example tbody').on('click', function GetRecords1(ModuleID) {
var id = ModuleID;
alert("Status Clicked:" + ModuleID);
});
});
</script>

<a id="123" onclick="someFunction(this.id)"></a>
JavaScript code:
someFunction(id) {
console.log(id)
}

Why are you using in-line JavaScript? You could easily use event delegate on to bind click events.
Here is your modified code:
Status = '<img src="/img/Active.png" height="22" width="42"/>'
Added a class user-status to a tag and assigned id to data-id attribute.
Now get id from click event:
$(document).on('click','.user-status', function(){
var getId = $(this).data('id');
var getStatus = $(this).data('status');
alert("Status Clicked:" + getId );
});

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.");
}
});

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"); });
});

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.