My attempt to dynamically create a list item with JSON response and set the data-icon to "check" is not working as expected. The result always shows "arrow-r" data-icon instead.
This is how I generate the list item:
function CallvarURL(url) {
var respPrice ;
$.ajax({
url: url,
type : "GET",
dataType : "json",
contentType: "application/json",
async : false,
success : function(msg) {
respPrice = msg;
$("#varList li").remove();
$.each(respPrice.Value, function(index, value) {
if(value.SubVar_id == 'NoDataFound' ) {
alert('No product is assigned to '+ localStorage.getItem('userId') + ' for update the price please contact your admin.');
} else {
vari = value.SrNo;
commVari = value.subVar_eng_name;
minPrice = value.Frm_price;
maxPrice = value.to_price;
var update = value.TimeCheck;
if (update == 'Y') {
$respPrice = '<li data-categoryId = "'+ vari +'" data-categoryId2 = "'+ minPrice +'" data-categoryId3 = "'+ maxPrice +'" data-categoryId4 = "'+ commVari +'"><a href="#" data-icon="star"><b class="stuff">' + commVari + '</b><br><b class="tcolour">' + minPrice + ' - ' + maxPrice + '</b></a></li>';
} else {
$respPrice = '<li data-categoryId = "'+ vari +'" data-categoryId2 = "'+ minPrice +'" data-categoryId3 = "'+ maxPrice +'" data-categoryId4 = "'+ commVari +'"><b class="stuff">' + commVari + '</b><br><b class="tcolour">' + minPrice + ' - ' + maxPrice + '</b></li>';
}
$('#varList').append($respPrice);
};
});
I'm unable to figure out why this is happening. I've tried changing the values for data-icon but it always displays "arrow-r". Any assistance would be appreciated.