Im trying to set the vue.js to orderBy a table of search result items, by TotalPrice or Rate. (clickable column header).
I tried vue.js documentatiom but the ascending ordering is not working.
My code:
var SearchResultComponent = Vue.extend({
template:
'<div class="table-responsive">' +
'<h3 class="selectedItemsHeader" style="margin-top:0;margin-bottom:0;">{{ language.resultsItems }}</h3>' +
'<table class="table">' +
'<thead>' +
'<tr>' +
'<th style="width:15%">' +
'{{ language.company }} <i class="fa fa-caret-down"></i>' +
'</th>' +
'<th style="width:30%">{{ language.service }}</th>' +
'<th style="width:10%">{{ language.servicePrice }}</th>' +
'<th style="width:10%">{{ language.discount }}</th>' +
'<th style="width:15%">{{ language.info }}</th>' +
'<th style="width:10%">' +
'{{ language.totalVat }} <i class="fa fa-caret-up"></i>' +
'</th>' +
'<th></th>' +
'</tr>' +
'</thead>' +
'<tbody v-if="items.length > 0">' +
'<tr v-for="item in items | orderBy itemByTotalPrice">' +
'<td class="clearfix">{{ item.companyName }}'+
'<span class="rate" v-if="item.companyRate"><span class="star"></span><span class="point">{{ item.companyRate }} / 5</span></span>'+
'</td>' +
'<td class="small-text item-name">{{{ getItemName(item) }}}</td>' +
'<td>{{ totalPriceNoDiscount(item) }} €</td>' +
'<td>{{ totalPriceDiscount(item) }} €</td>' +
'<td class="small-text">{{ item.companyNote || \' - \' }}</td>' +
'<td>{{ totalPrice(item) }} €</td>' +
'<td>'+
'<button class="btn btn-primary btn-sm" #click="select(item, $event)">{{ language.select }}</button>' +
'</td>' +
'</tr>' +
'</tbody>' +
'<tbody v-if="items.length == 0">' +
'<tr>' +
'<td colspan="7" style="font-size: 12pt;color: #777;padding-top: 60px;">{{ language.noResultsFound }}</td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'<h3 class="selectedItemsHeader" v-if="selectedItems.length > 0">{{ language.selectedItems }}</h3>' +
'<table class="table selectedItems" v-if="selectedItems.length > 0">' +
'<tbody>' +
'<tr v-for="item in selectedItems">' +
'<td style="width:15%">{{ item.selectedItem.companyName }}' +
'</td>' +
'<td style="width:30%" class="small-text item-name">{{{ getItemName(item.selectedItem) }}}</td>' +
'<td style="width:10%">{{ totalPriceNoDiscount(item.selectedItem) }} €</td>' +
'<td style="width:10%">{{ totalPriceDiscount(item.selectedItem) || \'0.00\' }} €</td>' +
'<td style="width:15%" class="small-text">{{ item.selectedItem.companyNote || \' - \' }}</td>' +
'<td style="width:10%">{{ totalPrice(item.selectedItem) }} €</td>' +
'<td>'+
'<button class="btn btn-danger btn-sm" #click="remove(item)"><i class="fa fa-remove"></i></button>' +
'</td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</div>',
props: ['items','selectedItems','removeUrl'],
data: function(){ return { sortBy: 'total' } },
computed: {
'language' : function() { return language; }
},
methods: {
'select' : function(item, ev) {
this.$dispatch('onCompanySelect', item);
$(ev.target).attr('disabled', true).addClass('disabled');
},
'remove' : function(item) {
this.$dispatch('onSelectedItemRemove', {
removeUrl: this.removeUrl,
item: item
});
},
'totalPriceNoDiscount' : function(item) {
return item.priceNoDiscount.toFixed(2);
},
'totalPriceDiscount' : function(item) {
return (item.priceNoDiscount - this.totalPrice(item)).toFixed(2);
},
'totalPrice' : function(item) {
return item.extraServicesPriceVat ? (item.priceVat + item.extraServicesPriceVat).toFixed(2) : item.priceVat.toFixed(2);
},
'itemByTotalPrice' : function(a, b) {
if(this.sortBy == 'total') {
$('a.companyrate').css('color', '#333');
$('a.totalVat').css('color', '#337ab7');
return this.totalPrice(a) > this.totalPrice(b);
} else if(this.sortBy == 'rate') {
$('a.totalVat').css('color', '#333');
$('a.companyrate').css('color', '#337ab7');
return a.companyRate < b.companyRate;
}
}
}
});
Any suggestions ? Thank you in advance
Related
I have a page in which I have to show list of data in UI through ajax & append the list data in html table save that list data into Local Storage with Jquery, My question is that I want to implement lazy load in UI such that user clicks a button (Click to view more list), and after clicking the button the ajax calls another list with limit & offset to show more list & append the new list below the existing list in UI and also save the data into local storage along with the existing data present.
My Ajax Call for List Data
var sendingData = {
limit: "50000",
offset: "0"
};
$.ajax({
type: 'POST',
url: "/Common/Item/getselleritems?SellerId=" + userid,
data: sendingData ,
crossDomain: true,
success: function (data)
{
localStorage.setItem("productCode", JSON.stringify(data));
},
error()
{
//Do something
}
});
``
My Html design Function
function showProducts()
{
var productsStorage = localStorage.getItem("productCode");
var products = JSON.parse(productsStorage);
var trHTML = '';
$("table tbody").html("");
$.each(products.Data, function (key, value)
{
trHTML += '<tr>'
+ '<td class="d-md-flex align-items-center">' + '<figure style="' + imgStyle + '"><a href="" title="Photo title" data-effect="mfp-zoom-in">' +
'<img src="' + imgSrc + '" alt="thumb" class="lazy"></a></figure>' +
'<div class="flex-md-column">' +
'<h4 class="package_name" id="itemdescription_' + value.Id + '" onclick = "packageDetails(\'' + value.Price + '\',\'' + value.Name + '\',\'' + value.Description
+ '\',\'' + itemTimeSlotType + '\',\'' + value.ServiceName + '\',\'' + value.PreparationTime + '\',\'' + value.Quantity + '\')" >' +
'<i class="icon_box-selected" style="' + style + '; margin-right:3px"></i>' +
value.Name + '</h4>' +
'<p>' + value.Description + '</p>' +
'<em>' + "Available In: " + itemTimeSlotType + '</em>' + '<br>' +
'<span class="stars_sellerItem" style="' + starStyle + '">' + value.FoodtestAvgRating + ' <i class="icon_star"> </i> ' +
'</span>' +
'</div>' +
'</td>' + '<td style="padding: 0.75rem 0 0.75rem 0;">' +
'<strong id="itemprice_' + value.Id + '">' +
'<i class="fa fa-inr" aria-hidden="true"></i>' + value.Price +
'</strong>' +
'</td>' +
'<td class="options">' +
'<div class="dropdown dropdown-options">' +
'<i class="icon_plus_alt2"></i>' +
'<div class="numbers-row number" id="item2_' + value.Id + '" data-id="' + value.Id + '">' +
'<input type="text" value="1" class="form-control" name="quantity" id="itemvalue_' + value.Id + '" onchange="getval(' + itemId + ');" readonly>' +
'<div class="inc button_inc plus">' + '+' + '</div><div class="dec button_inc minus">' + '-' + '</div>' + '</div>' +
'</td>' + '</tr>';
}
$("table tbody").append(trHTML);
}
I am trying to print XML content in a table using jQuery. This comes blank in table.
data[i].xml_details contains the XML content. I am getting blank display while try printing in table. where as console.log('XML Details' + data[i].xml_details); prints XML content without any issues.
success: function(data) {
// remove all Row items in table, before adding new rows
$('table.others_list tbody tr').remove();
for (var i in data) {
var xml = $.parseXML(data[i].xml_details);
var newRow = jQuery('<tr><td class="col-sm-2"> <div>' +
data[i].request_type +
'</div> </td> <td style="display:none;">' +
data[i].rels_others_id +
'</td>' +
'<td class="col-sm-2">' +
data[i].xml_details +
'</td>' +
' <td class="col-sm-2">' + data[i].request_details + '</td>' +
' <td class="col-sm-1">' +
'<a href="#" class="delete-esb" onclick="deleteOthersRow(this);">' +
'<i class="fa fa-trash-o" "> </i> </a>' +
'</td></tr>');
jQuery('table.others_list').append(newRow);
console.log('XML Details' + data[i].xml_details);
}
Extract text content from the parsed XML data. Then construct text string and insert it to the table.
for (var i in data) {
var xml = $.parseXML(data[i].xml_details);
var xmlContent = [];
// Search for the title and content of xml tags
$(xml).find('*').each(function(){
if ($(this).children().length == 0) {
xmlContent.push($(this).prop("tagName") + ': ' + $(this).text());
}
});
var textString = xmlContent.join(', ');
var newRow = jQuery('<tr><td class="col-sm-2"> <div>' +
data[i].request_type +
'</div> </td> <td style="display:none;">' +
data[i].rels_others_id +
'</td>' +
'<td class="col-sm-2">' +
textString +
'</td>' +
' <td class="col-sm-2">' + data[i].request_details + '</td>' +
' <td class="col-sm-1">' +
'<a href="#" class="delete-esb" onclick="deleteOthersRow(this);">' +
'<i class="fa fa-trash-o" "> </i> </a>' +
'</td></tr>');
jQuery('table.others_list').append(newRow);
console.log('XML Details' + data[i].xml_details);
}
2nd variant. To print XML string as is, replace special HTML characters in data[i].xml_details with their &-named equivalents:
function escapeHtml(text) {
return text
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """);
}
...
for (var i in data) {
var xml = $.parseXML(data[i].xml_details);
var newRow = jQuery('<tr><td class="col-sm-2"> <div>' +
data[i].request_type +
'</div> </td> <td style="display:none;">' +
data[i].rels_others_id +
'</td>' +
'<td class="col-sm-2">' +
escapeHtml(data[i].xml_details) +
'</td>' +
' <td class="col-sm-2">' + data[i].request_details + '</td>' +
' <td class="col-sm-1">' +
'<a href="#" class="delete-esb" onclick="deleteOthersRow(this);">' +
'<i class="fa fa-trash-o" "> </i> </a>' +
'</td></tr>');
jQuery('table.others_list').append(newRow);
console.log('XML Details' + data[i].xml_details);
}
I am making dropdown item selected true dynamically using below lines of code
for(var i in data) {
var book_id = data[i]['book_id'];
var indivudvalbookdetails = data[i]['indivudvalbookdetails'];
var id=1;
for(var j in indivudvalbookdetails) {
if(indivudvalbookdetails[j]['status'] == undefined || indivudvalbookdetails[j]['status'] == "")
{
$('.library_info_tbl tbody').append('<tr>' +
'<td class="text-center centeralign"> ' + data[i]['subject'] + '</td>' +
'<td class="text-center centeralign"> ' + data[i]['title'] + ' </td>' +
'<td class="text-center centeralign"> ' + data[i]['isbn'] + '</td>' +
'<td class="text-center centeralign"> ' + data[i]['author'] + ' </td>' +
'<td class="text-center centeralign"> ' + indivudvalbookdetails[j]['acquisitionno'] + '</td>' +
'<td class="text-center centeralign"><div class="btn-group">' +
'<input type="text" class="hide" id="acquisitionno' + id + '" value="' + indivudvalbookdetails[j]['acquisitionno'] + '" class="form-control">' +
'<select id="status' + id + '" class="form-control">' +
'<option value="Select">Select</option>'+
'<option value="Damaged"' +
indivudvalbookdetails[j]['status'] == "Damaged" ? 'selected="true"': 'selected="false">Damaged</option>'+
'<option value="Lost"' +
indivudvalbookdetails[j]['status'] == "Lost" ? 'selected="true"' : ' selected="false">Lost</option>' +
'</select>'+
//'<input type="text" id="status' + id + '" class="form-control">' +
'</div></td>' +
'</tr>');
id++;
}
}
It is displaying the code in html like:
"selected="false">Lost selected="false">Lost
selected="false">Lost selected="false">Lost selected="false">Lost"
The string termination is not right and the if condition as well.
Check the code below:
var id = 'select';
var indivudvalbookdetails = [{
status: 'Damaged'
}]
var j = 0;
var select = '<select id="status' + id + '" class="form-control">' +
'<option value="Select">Select</option>' +
'<option value="Damaged"' +
(indivudvalbookdetails[j]['status'] == "Damaged" ? 'selected="selected"' : '') + '>Damaged</option>' +
'<option value="Lost"' +
(indivudvalbookdetails[j]['status'] == "Lost" ? 'selected="selected"' : '') + '>Lost</option>' +
'</select>'
document.getElementById('main').innerHTML = select;
<div id="main"></div>
Even if the value of
isAdmin = false
The code is not going into the condition
if(!isAdmin)
As a result, I am not getting desired output.
This is how below if called in asp.net :
<span onclick="DisplayPrdWeightGrd('<%#Container.ItemIndex + 1 %>','<%# Eval("OrderId")%>','<%= Convert.ToBoolean(Utility.IsAdmin()) %>');">
function DisplayPrdWeightGrd(index, OrderId, isAdmin) {
$.ajax({
type: "POST",
url: "../handlers/DisplayOrderDetail.ashx?OrderId=" + Orderid + "&tk=" + $.now(),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
if ($('#tableOrderDetail_' + index + ' tr').length <= 1) {
$.each(data, function(i, v) {
setDataOnRow(index, v, i);
});
}
},
failure: function(response) {
alert("fail");
},
error: function(response) {
alert(response);
}
});
function setDataOnRow(idx, v, i) {
var totalprice;
if (v.IsGST == true) {
totalprice = parseFloat(v.TotalPrice * (1.1)).toFixed(2);
} else {
totalprice = parseFloat(v.TotalPrice).toFixed(2);
}
//debugger;
var obj = $('#tableOrderDetail_' + idx + ' tr td table:last');
if (!isAdmin) {
$('#tableOrderDetail_' + idx + ' tr:last').after('<tr>' +
'<td width="25%" >' + (i + 1) + '</td>' +
'<td width="25%" class="center">' + v.ProductName + '</td>' +
'<td width="12%" class="center">' + v.NoOfCarton + '</td>' +
'<td width="12%" class="center">' + v.ProductQuantity + '</td>' +
'<td width="12%" class="center">' + v.OriginalPrice + '</td>' +
'<td width="12%" class="center">' + v.OrderPrice + '</td>' +
'<td width="10%" class="center">' + v.IsGST + '</td>' +
'<td width="10%" class="center">' + v.Discount + '</td>' +
'<td width="12%" class="center">' + totalprice + '</td></tr>');
} else {
$('#tableOrderDetail_' + idx + ' tr:last').after('<tr>' +
'<td width="25%" >' + (i + 1) + '</td>' +
'<td width="25%" class="right">' + v.ProductName + '</td>' +
'<td width="12%" class="right">' + v.NoOfCarton + '</td>' +
'<td width="12%" class="right">' + v.ProductQuantity + '</td>' +
'<td width="12%" class="right">' + v.OriginalPrice + '</td>' +
'<td width="12%" class="right">' + v.OrderPrice + '</td>' +
'<td width="10%" class="right">' + v.IsGST + '</td>' +
'<td width="10%" class="center">' + v.Discount + '</td>' +
'<td width="12%" class="center">' + totalprice + '</td></tr>');
}
}
I tried debugger, it is always going is else condition for the value isAdmin is true or false. Stuck here.
You are setting the value of that isAdmin parameter as a string. So the check inside the "if" checks for the "truthy" value of the string, which is any non null/non empty value. So both the values 'True' and 'False' will be seen as true.
To solve this:
remove the quotes around <%= Convert.ToBoolean(Utility.IsAdmin()) %>
make sure you get true and false (lowercase!). You might need to add a .ToString().ToLowerInvariant(). Or (guessing that Utility.IsAdmin() returns a bool): <%= Utility.IsAdmin() ? "true" : "false" %>
Try
var isAdmin = Boolean(isAdmin);
then check if-else condition.
if(!isAdmin)
The isAdmin only exists inside your ajax call, thus your setDataOnRow function will not recognize it hence always go to the else
function DisplayPrdWeightGrd(index, OrderId, isAdmin) { var Admin = isAdmin.toLowerCase();
$.ajax({
type: "POST",
url: "../handlers/DisplayOrderDetail.ashx?OrderId=" + Orderid + "&tk=" + $.now(),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
if ($('#tableOrderDetail_' + index + ' tr').length <= 1) {
$.each(data, function(i, v) {
setDataOnRow(index, v, i);
});
}
},
failure: function(response) {
alert("fail");
},
error: function(response) {
alert(response);
}
});
function setDataOnRow(idx, v, i) {
var totalprice;
if (v.IsGST == true) {
totalprice = parseFloat(v.TotalPrice * (1.1)).toFixed(2);
} else {
totalprice = parseFloat(v.TotalPrice).toFixed(2);
}
//debugger;
var obj = $('#tableOrderDetail_' + idx + ' tr td table:last');
if (Admin === "false") {
$('#tableOrderDetail_' + idx + ' tr:last').after('<tr>' +
'<td width="25%" >' + (i + 1) + '</td>' +
'<td width="25%" class="center">' + v.ProductName + '</td>' +
'<td width="12%" class="center">' + v.NoOfCarton + '</td>' +
'<td width="12%" class="center">' + v.ProductQuantity + '</td>' +
'<td width="12%" class="center">' + v.OriginalPrice + '</td>' +
'<td width="12%" class="center">' + v.OrderPrice + '</td>' +
'<td width="10%" class="center">' + v.IsGST + '</td>' +
'<td width="10%" class="center">' + v.Discount + '</td>' +
'<td width="12%" class="center">' + totalprice + '</td></tr>');
} else {
$('#tableOrderDetail_' + idx + ' tr:last').after('<tr>' +
'<td width="25%" >' + (i + 1) + '</td>' +
'<td width="25%" class="right">' + v.ProductName + '</td>' +
'<td width="12%" class="right">' + v.NoOfCarton + '</td>' +
'<td width="12%" class="right">' + v.ProductQuantity + '</td>' +
'<td width="12%" class="right">' + v.OriginalPrice + '</td>' +
'<td width="12%" class="right">' + v.OrderPrice + '</td>' +
'<td width="10%" class="right">' + v.IsGST + '</td>' +
'<td width="10%" class="center">' + v.Discount + '</td>' +
'<td width="12%" class="center">' + totalprice + '</td></tr>');
}
}
It solved my issue using below two lines:
1. In function
function DisplayPrdWeightGrd(index, OrderId, isAdmin)
add
var Admin = isAdmin.toLowerCase();
2 In function
function setDataOnRow(idx, v, i)
add in if condition as
if(Admin==="false")
Thanks for discussion.
Collapsible did not collapse after being expanded. It is dynamically created in popover.
Here is my jsFiddle:
$('.tooltiphelp').tooltip();
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
$('[data-toggle="collapse"]').collapse();
jQuery('document').ready(function() {
jQuery('#accordionRank').on('show hide', function() {
jQuery(this).css('height', 'auto');
});
jQuery('#accordionRank').collapse({ parent: true, toggle: true });
});
var popover = $("#noteListDiv").find('.positive').popover({
trigger: 'click',
placement: 'bottom',
content: function () {
return func_getRank($(this).closest('tr').prop('id'));
}
});
var func_getRank = function (ID) {
var Rankdata = {"Rank":[{"ID": "114077", "NL": "1 of 25", "OF": "1 of 30", "MLB": "1 of 240"}]};
var cshtml;
cshtml = '<div>'
+ '<div class="accordion" id="accordionRank">'
+ '<div class="accordion-group">'
+ '<div class="accordion-heading">'
+ '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionRank" href="#collapseNL">'
+ 'NL Rank: ' + Rankdata.Rank[0].NL
+ '</a>'
+ '</div>'
+ '<div id="collapseNL" class="accordion-body collapse">'
+ '<div class="accordion-inner">'
+ 'Anim pariatur cliche...'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="accordion-group">'
+ '<div class="accordion-heading">'
+ '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionRank" href="#collapseOF">'
+ 'OF Rank: ' + Rankdata.Rank[0].OF
+ '</a>'
+ '</div>'
+ '<div id="collapseOF" class="accordion-body collapse">'
+ '<div class="accordion-inner">'
+ 'Anim pariatur cliche...'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<div class="accordion-group">'
+ '<div class="accordion-heading">'
+ '<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionRank" href="#collapseMLB">'
+ 'MLB Rank: ' + Rankdata.Rank[0].MLB
+ '</a>'
+ '</div>'
+ '<div id="collapseMLB" class="accordion-body collapse">'
+ '<div class="accordion-inner">'
+ '<table id="MiniLeaderboard">'
+ '<thead><tr>'
+ '<th>Rank</th>'
+ '<th>Hitter</th>'
+ '<th>BAVG</th>'
+ '<th>Hits/AB</th>'
+ '</tr></thead>'
+ '<tbody><tr>'
+ '<td>1</td>'
+ '<td>Christian Yelich</td>'
+ '<td>.470</td>'
+ '<td>39-for-83</td>'
+ '</tr>'
+ '<tr>'
+ '<td>2</td>'
+ '<td>Ryan Braun</td>'
+ '<td>.397</td>'
+ '<td>27-for-68</td>'
+ '</tr>'
+ '<tr>'
+ '<td>3</td>'
+ '<td>Adam Eaton</td>'
+ '<td>.370</td>'
+ '<td>37-for-100</td>'
+ '</tr>'
+ '<tr>'
+ '<td>4</td>'
+ '<td>Joey Votto</td>'
+ '<td>.369</td>'
+ '<td>31-for-84</td>'
+ '</tr>'
+ '<tr>'
+ '<td>5</td>'
+ '<td>Edwin Encarnation</td>'
+ '<td>.364</td>'
+ '<td>28-for-77</td>'
+ '</tr></tbody>'
+ '</table>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
;
return $(cshtml).html();
};
Data text should come from JSON.
Here is the issue, please watch this screen cast.
Please help! Thanks in forward for your help.
I've updated my jsFiddle and it's now working. Maybe not a good idea but looks good for now.
$(document).on('click', '.accordion-toggle', function(e) {
$(e.target).css('text-decoration','none');
var $_this = $(e.target).parent().next("div");
var $_inner = $_this.find('div:first-child');
if($_inner.hasClass('in')){
$_inner.removeClass("in");
$_this.removeClass("in");
}
else {
$_inner.addClass("in");
$_this.addClass("in");
}
func_accordionToggle(e.target);
});
var func_accordionToggle = function (e) {
var $_this = $(e).parent().parent();
var id = $(e).parent().next("div").attr('id');
switch(id) {
case 'collapseNL':
$('#collapseOF').removeClass("in");
$('#collapseMLB').removeClass("in");
$('#collapseOF').find('div:first-child').removeClass("in");
$('#collapseMLB').find('div:first-child').removeClass("in");
break;
case 'collapseOF':
$('#collapseNL').removeClass("in");
$('#collapseMLB').removeClass("in");
$('#collapseNL').find('div:first-child').removeClass("in");
$('#collapseMLB').find('div:first-child').removeClass("in");
break;
case 'collapseMLB':
$('#collapseNL').removeClass("in");
$('#collapseOF').removeClass("in");
$('#collapseNL').find('div:first-child').removeClass("in");
$('#collapseOF').find('div:first-child').removeClass("in");
break;
};
}
Thanks for all the help Guys.