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.
Related
This question already has answers here:
Access JSON output with spaces
(4 answers)
Closed 3 months ago.
I can't extract the data with spaces in the area that I have shown with the red pen, how can I do this?
$.ajax({
url: "../api/api.php",
type: "POST",
data: {
tc: $("#tcx").val(),
},
success: (res) => {
if (res) {
var json = JSON.parse(res);
$('tbody').html("");
$.each(json, function(key, value) {
$('tbody').append('<tr>' +
'<td>' + value.YAKINLIK + '</td>' +
'<td>' + value.TC + '</td>' +
'<td>' + value.ADI + '</td>' +
'<td>' + value.SOYADI + '</td>' +
'<td>' + value.DOGUM TARIHI + '</td>' +
'<td>' + value.NUFUS IL + '</td>' +
'<td>' + value.NUFUS ILCE + '</td>' +
'<td>' + value.ANNE ADI + '</td>' +
'<td>' + value.ANNE TC + '</td>' +
'<td>' + value.BABA ADI + '</td>' +
'<td>' + value.BABA TC + '</td>' +
'</tr>');
});
} else {
alert("Hata oluştu!");
return;
}
},
error: () => {
alert("Hata oluştu!");
}
});
}
I tried to parse but without success
enter image description here
If you're just trying to read out the value from an object, based on a key that has spaces in it, you can use this syntax:
const myObject = { withoutSpaces: 1, "with spaces": 2 };
const valueOne = myObject.withoutSpaces;
const valueTwo = myObject["with spaces"];
So in your case you want to use something like:
value["DOGUM TARIHI"]
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 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.
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've looked around for a solution but I might just be missing something really obvious because they don't solve my issue. I am no JS wiz at all, just a disclaimer.
I have an ASP project where JavaScript calls some C# code some times. I start my code with this:
window.onload = function () {
LiveSearch();
getCredentials();
getAllUsers();
getIsAdmin();
};
All of these functions work just fine. But the one of interest is getAllUsers() because it contacts the backend via an AJAX call to get some data to fill in a table.
function getAllUsers() {
var result_body = "";
$.ajax({
type: 'GET',
url: '/Home/GetAllUsers',
dataType: 'json',
cache: false,
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(""),
success: function (users) {
PushToScope("users", users);
var dict = scope[2];
if (dict.key.length > 0) {
for (var key in dict.value) {
result_body += '<tr onclick="getClickedUserObject(' + dict["value"][key].Initials + ')\">';
result_body += '<td class=\"col-xs-4\">' + dict["value"][key].Name + '</td>'
result_body += '<td class=\"col-xs-4\">' + dict["value"][key].Title + '</td>'
result_body += '<td class=\"col-xs-4\">' + dict["value"][key].Department + '</td>'
result_body += '<td style=\"display: none\">' + dict["value"][key].PrivatePhone + '</td>'
result_body += '<td style=\"display: none\">' + dict["value"][key].WorkEmail + '</td>'
result_body += '<td style=\"display: none\">' + dict["value"][key].WorkPhoneLandline + '</td>'
result_body += '<td style=\"display: none\">' + dict["value"][key].WorkPhoneMobile + '</td>'
result_body += '</tr>';
}
} else {
result_body += '<tr>';
result_body += '<td style=\"col-xs-12\"><b>No Data. Try again, or Contact IT Support.</b></td>';
result_body += '</tr>';
}
$('#result-table').html(result_body);
}
});
}
Like I said, the above works, but the problem comes forth when I click an element in my table. "getClickedUserObject()" below:
function getClickedUserObject(lettercode) {
if (lettercode != undefined) {
var users = scope[2];
var user = users["value"][lettercode];
$('#result-title').html(user.Title);
$('#result-name').html(user.Name);
$('#result-department').html(user.Department);
$('#result-email').html('' + work.WorkEmail + '');
$('#result-work-mobile').html(user.WorkPhoneMobile);
$('#result-work-landline').html(user.WorkPhoneLandline);
$('#result-private-mobile').html(user.PrivatePhone);
if (lettercode == scope[0]) {
$("#HidePrivate").show();
$("#HidePrivate").disabled = false;
$("#HidePrivate").checked = user.HiddenPrivatePhone;
} else {
$("#HidePrivate").hide();
$("#HidePrivate").disabled = true;
}
}
return false;
}
This function never fires, instead I get the error in the title, saying that whatever lettercode I would get from clicking a row is not defined. This is odd to me because looking in the Google Chrome inspector I see this:
So what gives?
I'm not familiar with your function, but maybe the argument should be a string? Looks like you don't have any quotes around it in the function call.
Like so:
result_body += '<tr onclick=\"getClickedUserObject(\'' + dict["value"][key].Initials + '\')\">';