I just created ajax response but i dont know how to give input fields here.. im new bie to Ajax, can you suggest any way please..
$.ajax({
type: "GET",
url: 'get/' + vouchno,
// cache: false,
success: function(data) {
alert(data);
alert(JSON.stringify(data));
$('#vochDate').val(data.strvouchdt);
$('#cashbill').val(data.billtype);
$('#cashref').val(data.refno);
$('#cashAc').val(data.acctname);
$('#refdate').val(data.refdt);
$('#payacc_code').val(data.acctcode);
$('#cashAc').val(data.acctname);
$('#cashAc').val(data.acctname);
for (var i = 0; i < data.cashpayments.length; i++) {
$("#tab_logic ").append('<tr><td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].debit + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' +
'<td>' + '<input type="text">' + data.cashpayments[i].acctcode + '</td>' + '</tr>');
}
},
failure: function(data) {
alert(data.responseText);
},
error: function(data) {
alert(data.responseText);
}
});
Completely a guess, you want text-fields in row columns with values prefilled in it:
$("#tab_logic").append(`<tr><td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].debit}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td>
<td><input type="text" value="${data.cashpayments[i].acctcode}"></td></tr>`);
If you are talking about binding the data into input form from the response:
function populate(data) {
for (var i in data) {
if (typeof (data[i]) === 'object') {
//populate(data[i]);
} else {
$(
"input[type='text'][name='" + i + "']," +
" input[type='hidden'][name='" + i + "'], " +
"input[type='checkbox'][name='" + i + "'], " +
"select[name='" + i + "'], textarea[name='" + i + "']"
)
.val(data[i]);
$("input[type='radio'][name='" + i + "'][value='" + data[i] + "']").prop('checked', true);
if ($("input[name='" + i + "']").hasClass('datepicker')) {
$("input[name='" + i + "']").val($.datepicker.formatDate("dd-M-yy", new Date(data[i])));
}
if ($("input[name='" + i + "']").hasClass('financialValueFormat')) {
var formatedAmount = financialValFormat(data[i]);
$("input[name='" + i + "']").val(formatedAmount);
}
}
}
$('form').find('input[type="checkbox"]').each(
function () {
if ($(this).siblings('input[type="hidden"]').val() == "true" ||
$(this).siblings('input[type="hidden"]').val() == 1) {
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
}
}
);
}
You can define this function some where in your project which is available globally and then just call populate(response.data)
Please ignore the functions financialValFormat. This function is just used to format the value for money fields.
Related
How do I access the value of a td (x3) of the same tr (x1), if I click on the tr (x1 of td (x2))?
$(document).ready(function () {
$.ajax({
url: '/api/Usuario/GetPermisosRolPorUsuario',
method: 'GET',
dataType:'JSON',
data: { NitEmpresa,NombreUsuario },
headers: {
'Authorization': 'Bearer '
+ sessionStorage.getItem("accessToken")
},
success: function (data) {
debugger
$('#tblBody').empty();
$.each(data, function (index, value) {
var row =
$('<tr>'
+'<td id="IdUsuario">'+ value.IdUsuario + '</td>'
+ '<td id="RolId">' + value.RolId + '</td>'
+ '<td id="Estado" >' + value.Estado + '</td>'
+ '<td>' + value.Rol + '</td>'
+ '<td>' + value.DescripcionRol + '</td>'
+ '<td>' + value.NombreUsuario + '</td>'
+ '<td>' + value.FullName + '</td>'
+ '<td>' + value.licenciaEmpresa + '</td>'
+ '<td>' + value.RazonSocial + '</td>'
+ '<td>' + value.NitEmpresa + '</td>'
+ '<td>' + value.Correo + '</td>'
+ '<td>' + value.Celular + '</td>'
+ '<td>' + formatDate(value.licenciaFechaExpire) + '</td>'
);
$('#tblData').append(row);
});
Thank you, I managed to access the brothers 'td', as follows:
$('tr td:nth-child(3)', '#tblData').click(function () {
returns to the father to look for his brothers
var $thisRow = $(this).closest('tr')
brothers td
IdUsuario = $('td:first', $thisRow).text();
RolId = $('td:nth-child(2)', $thisRow).text();
Estado= $('td:nth-child(3)', $thisRow).text();
//an alert to print the values
alert(IdUsuario + '-' + RolId + '-' + Estado);
});
},
error: function (jQXHR) {
toastr.error('Sistemas Infinitos Informa: '+jQXHR.responseText);
}
});
});
$.each(data, function (index, value) {
var row =
$('<tr>'
+'<td id="IdUsuario">'+ value.IdUsuario + '</td>'
+ '<td id="RolId">' + value.RolId + '</td>'
+ '<td id="Estado" >' + value.Estado + '</td>'
First, each element in the DOM should have a unique id. By repeating the same ID multiple times, I'm not sure your on('click') events will attach in all browsers and return the value you are looking for. Instead, your click event should look something like this:
$('tr', '#tblData').click(function () {
var id1 = $('td:first-child', this).text();
var id2 = $('td:nth-child(2)', this).text();
var id3 = $('td:nth-child(3)', this).text();
...
}
or if you only want to allow clicking on the first TD:
$('tr td:first-child', '#tblData').click(function () {
var $thisRow = $(this).closest('tr')
var id1 = $(this).text();
var id2 = $('td:nth-child(2)', $thisRow).text();
var id3 = $('td:nth-child(3)', $thisRow).text();
...
}
I have a dropdown list which is getting Accountoff data from database through ajax. Now I am selecting data from modal and giving the val to the dropdown list and triggering it change method manually. But its not working.
This is the code where I am giving the selected data from modal to dropdown list.
AccountOf = function (value) {
var lblBrandCode = $(value).closest('tr').find("#hdnCusCode").val();
var lblCusDesc = $(value).closest('tr').find('#lblCusDesc').val();
$("#AccountOfModal").modal("hide");
$("#ddlACof").val(lblBrandCode);
//document.getElementById("ddlACof").value = lblBrandCode;
$("#ddlACof").change();
}
here is the the code that invoke the above method.
$.ajax({
dataType: "json",
async: true,
type: 'GET',
url: '#Url.Content("~/BookingOrder/Select_CustomerDetailModal")',
success: function (data) {
if (data.Success == true) {
var item = JSON.parse(data.Response)
$("#AccountOfTable tbody tr").remove()
if (item.length > 0) {
$.each(item, function (value, item) {
var temp = '<tr id="DelChkListRow1' + (rowCount++) + '" data-tr-count="' + (dataCount++) + '" onclick="AccountOf(this)">' +
'<td>' + SNo++ + '</td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblCusCode" >' + item.CusCode + '</label><input type="hidden" id="hdnCusCode" value="' + item.CusCode + '"/></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblCusDesc">' + item.CusDesc + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblNIC">' + item.NIC + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblAddress">' + item.Address1 + '</label></td>' +
'<td class="tdDiv" style="overflow:auto"><label id="lblPhone">' + item.Phone1 + '</label></td>' +
'</tr>';
$("#AccountOfTable tbody").append(temp);
});
}
}
},
complete: function () {
},
});
$( "#ddlACof" ).trigger( "change" );
I have a datatable and populating with Ajax response. I have a submit button at top and i want to handle click event for submit,
I have input text boxes in each row and The below code is working only for first 10 rows, if is click next button in data table the submit ($('#createOrderId').click) event is not working. I tried creating on change event in fndrawcallback, but that is also not working.
Can anyone help me on this.
function showCheckoutResults(obj) {
oTable = $('#checkoutTable').DataTable({
bDestroy : true,
"autoWidth": false,
columnDefs : [ {
width: "2%",
targets : 0,
className : 'dt-body-center select-checkbox',
'checkboxes': {
//'selectRow': true
}
},
{
"targets": [ 10 ],
"visible": false
}
],
select : {
style : 'multi',
selector: 'td:first-child'
},
order : [ [ 1, 'asc' ] ],
"fnDrawCallback": function() {
loadDatePicker();
$('.commonOrderQty').on('change', function () {
var dataArr = [];
var rows_selected = oTable.column(0).checkboxes.selected();
if (typeof rows_selected != 'undefined') {
$.each(rows_selected, function(index, rowId){
dataArr.push(rowId);
});
}
for(var i=0;i<dataArr.length;i++) {
$( "#ordQty" + dataArr[i] ).change(function() {
alert($("#ordQty" + dataArr[i]).val);
validateOrderQty( dataArr[i]);
});
}
});
}
});
oTable.rows().remove().draw();
$.each(obj, function(index, key) {
var ordrSrchResultData = [];
var finalLeadTime = calculateLeadTime(key.fopLeadTime);
var unitPrice = key.quote;
if(key.um == 'CPC') {
unitPrice = key.quote/100;
}
ordrSrchResultData.push(index);
ordrSrchResultData.push('<input id="po' + index
+ '" type="text" maxlength="12" class="checkoutText" value="' + key.poNo + '"/>');
ordrSrchResultData.push('<input id="ordQty' + index
+ '" type="text" class="checkoutText commonOrderQty" value="' + key.orderQty + '"/>');
ordrSrchResultData.push('<input id="boxQty' + index
+ '" type="text" class="checkoutText" value="' + key.boxQty + '"disabled/>');
ordrSrchResultData.push('<input type="text" class="checkoutText" id="datePicker' + index
+ '" value="' + key.dueDate + '" readonly="readonly"/>');
ordrSrchResultData.push('<input type="text" class="checkoutText" id="datePicker' + index
+ '" value="' + finalLeadTime + '" readonly="readonly"/>');
ordrSrchResultData.push('<input id="partNo' + index
+ '" type="text" class="checkoutText" value="' + key.partNo + '"disabled/>');
ordrSrchResultData.push('<input type="text" class="checkoutText" id="suppPartNo' + index
+ '" value="' + key.suppPartNo + '" readonly="readonly"/>');
ordrSrchResultData.push('<input type="text" class="checkoutText" id="extPrice' + index
+ '" value="' + key.extPrice + '" readonly="readonly"/>');
ordrSrchResultData.push('<input type="text" class="checkoutText" id="customerCd' + index
+ '" value="' + key.customerCd + '" readonly="readonly"/>');
ordrSrchResultData.push('<input type="text" class="checkoutText" id="quote' + index
+ '" value="' + unitPrice + '" readonly="readonly"/>');
ordrSrchResultData.push('<input type="hidden" value="'+key.dueDate+'" id="existDatePicker'+index+'"');
oTable.columns.adjust().draw();
oTable.row.add(ordrSrchResultData).draw();
localStorage.setItem('_selectedStartDate', finalLeadTime);
updateDatepicker(index, finalLeadTime);
$('#checkoutTable tr:last').attr('id', 't' + index);
$("#" + 't' + index).removeClass('selected');
$( "#ordQty" + index ).change(function() {
validateOrderQty(index);
});
});}
$('#createOrderId').click(function (){
var dataArr = [];
var rows_selected = oTable.column(0).checkboxes.selected();
$.each(rows_selected, function(index, rowId){
dataArr.push(rowId);
});
var rowsCount = dataArr.length;
var errMsg = $("#noSelectedDataErrMsg").val();
if(rowsCount == 0) {
jQuery("label[for='ordlabelvalue']").html(errMsg);
$('#orderErrorModal').modal('show');
return;
}
createOrder(dataArr);
});
Instead of:
$('#createOrderId').click(function (){
Use this:
$(document).on('click','#createOrderId',function (){
Hi how I can call a function in a bootbox jquery?
This is an example, at
select name="Status" I would if possible call a function that shows and hides tr of table called in html_form var. How would I do that?
function ChangeStatusDossier(UtenteCreatore) {
var html_form = '<form name="ChangeStatusDossier" id="ChangeStatusDossier" class="ChangeStatusDossier"><table><tr><th colspan="2"><h2 class="blue">Change Dossier Status</h2></th></tr><tr><td><strong>Choose status </strong> </td><td><select name="Status" onchange="Show(this.value);"><option value="0">Under process</option><option value="1">Under collection</option><option value="2">Cargo collected</option><option value="159">In Warehouse</option><option value="1485">To Destination</option></select></td></tr><tr id ="HubChoose" style="display:none;"><td>Choose hub</td><td><select name="Hub"><option>HUB MILANO</option></select></td></tr><input type="hidden" name="UtenteCreatore" value="' + UtenteCreatore + '"></table><form>';
bootbox.confirm(html_form, function (result) {
if (result) {
$('#ChangeStatusDossier').submit();
}
});
function Show(value) {
if (value == "159") {
$("#HubChoose").show();
}
}
}
In your case it's better to use the dialog method instead of confirm.
Here's how you could do that:
function ShowHub(value) {
if (value == "159") {
$("#HubChoose").show();
}
else {
$("#HubChoose").hide();
}
}
jQuery("#default").on("click", function() {
bootbox.dialog({
title: "This is a form in a modal.",
message:
'<form class="ChangeStatusDossier" id="ChangeStatusDossier" name="ChangeStatusDossier">' +
'<input name="UtenteCreatore" type="hidden" value="' + UtenteCreatore + '">' +
'<table>' +
'<tr>' +
'<th colspan="2">' +
'<h2 class="blue">Change Dossier Status</h2>' +
'</th>' +
'</tr>' +
'<tr>' +
'<td><strong>Choose status</strong> </td>' +
'<td><select name="Status" onchange="ShowHub(this.value);">' +
'<option value="0">' +
'Under process' +
'</option>' +
'<option value="1">' +
'Under collection' +
'</option>' +
'<option value="2">' +
'Cargo collected' +
'</option>' +
'<option value="159">' +
'In Warehouse' +
'</option>' +
'<option value="1485">' +
'To Destination' +
'</option>' +
'</select></td>' +
'</tr>' +
'<tr id="HubChoose" style="display:none;">' +
'<td>Choose hub</td>' +
'<td><select name="Hub">' +
'<option>' +
'HUB MILANO' +
'</option>' +
'</select></td>' +
'</tr>' +
'</table>' +
'</form>',
buttons: {
success: {
label: "Submit",
className: "btn-success",
callback: function () {
$('#ChangeStatusDossier').submit();
showResult("Form submitted!");
}
},
cancel: {
label: "Cancel",
className: "btn-danger",
callback: function() {
showResult("Canceled!");
}
}
} // buttons
}); // dialog
});
function showResult(result) {
if (typeof result !== "undefined" && result !== null) {
console.log(result);
}
}
Here's a working DEMO
For some reason a field in my JSON response is undefined in IE. When I run it in chrome it looks fine. But in IE when I write to the console is shows undefined.
Here is my code
function getList() {
var argument = new Object();
argument.identifier = _settings.identifier;
$.ajax({
url: "/Vendor.aspx/GetList",
data: JSON.stringify(argument),
dataType: 'json',
contentType: 'application/json',
error: function (xhr) {
console.log(xhr);
},
success: function (data) {
addData(JSON.parse(data.d));
},
type: 'POST'
});
}
function addData(data) {
if (data === undefined || data === null || data.length == 0) {
alert('No data to show');
return;
}
//this.clearRows();
for (var index = 0; index < data.length; index++) {
var d = data[index];
var row = '<tr>' +
'<td>' + d.Item + '</td>' +
'<td>' + d.AlternativeItem + '</td>' +
'<td>' + d.Condition + '</td>' +
'<td>' + d.PCS + '</td>' +
'<td>' + d.Description + '</td>' +
'<td><input type="text" class="input-field-integer" id="' + d.Item + '"/></td>' +
'<td><input type="text" class="input-field-integer" value="' + d.Price + '"/></td>' + //This field is empty in IE but not in Chrome.
'<td><input type="text" class="input-field" value="' + d.Condition2 + '"</></td>' +
'<td><input type="text" class="input-field" value="' + d.Stock + '"</></td>' +
'<td><input type="text" class="input-field" value="' + d.ETAIfNotInStock + '"</></td>' +
'</tr>';
$(this._settings.fileTable + ' tbody').append(row);
console.log(d.Price); // value is undefined???
}
}
Here is the output of the JSON:
{"Item":"1234","AlternativeItem":"","Condition":"New Retail","PCS":"20","Description":"my item detail","Price":"100","Condition2":"new","Stock":"5 stk. ","ETAIfNotInStock":"","Comment":"","RowReference":null}
IE might be caching the response from the server.
try adding [OutputCacheAttribute(VaryByParam = "*", Duration = 0, NoStore = true)] to the response from the server #WebAPI
I've cleared my browser cache and then it started to work. I had to do clear it twice and then restart computer.
IE is very special.