Develop Reference

How to group together the items matching a specific condition in jquery

I am looping through an array and displaying the search results if the result is either a "place" or "address". Here is the current output -
How to group all the items matching the first condition and all the items matching the second conditions like this -
Can anyone please help. Below is my code. Places should display first and next addresses
predictions.forEach(function(prediction) {
if(prediction.types.indexOf("postal_code")){
console.log(prediction.types)
results_html.push(`<h3>Places</h3><li class="autocomplete-item" data-type="place" data-place-id=${prediction.place_id}><span class="autocomplete-icon icon-localities"></span>
<span class="autocomplete-text">${prediction.description}</span></li>`);
}else if(prediction.types.indexOf("address")){
console.log(prediction.types)
results_html.push(`<h3>Address</h3><li class="autocomplete-item" data-type="place" data-place-id=${prediction.place_id}><span class="autocomplete-icon icon-localities"></span>
<span class="autocomplete-text">${prediction.description}</span></li>`);
}
});

Push them to separate arrays and then combine them later:
results_places = [];
results_addresses = [];
predictions.forEach(function(prediction) {
if (prediction.types.indexOf("postal_code")) {
console.log(prediction.types)
results_places.push(`<li class="autocomplete-item" data-type="place" data-place-id=${prediction.place_id}><span class="autocomplete-icon icon-localities"></span>
<span class="autocomplete-text">${prediction.description}</span></li>`);
} else if (prediction.types.indexOf("address")) {
console.log(prediction.types)
results_addresses.push(`<li class="autocomplete-item" data-type="place" data-place-id=${prediction.place_id}><span class="autocomplete-icon icon-localities"></span>
<span class="autocomplete-text">${prediction.description}</span></li>`);
}
});
if (results_places.length) results_places.shift('<h3>Places</h3>');
if (results_addresses.length) results_addresses.shift('<h3>Address</h3>');
results_html = results_places.concat(results_addresses)

Getting and setting attributes with Kendo sortable on change event

Would just like to get and set different attributes when a list item is moved to the other list on my mvc page... I can't access anything so far. The problem is in the javascript, it hits the onchange event fine. I didnt post the "available list" in the cshtml for brevity. this is what the console.log as the bottom reads:
SpecialNeedInActiveList change: Meds per tube newIndex: -1 oldIndex: 5 action: remove
SpecialNeedActiveList change: Meds per tube newIndex: 3 oldIndex: -1 action: receive
Any help would be appreciated, this has taken way too long for me.
HTML:
<div class="col-md-6" id="SpecialNeedContainerLL">
<ul id="SpecialNeedActiveList" class="col-md-6">
#if (Model.SelectedSpecialNeeds.Any())
{
foreach (var y in Model.SelectedSpecialNeeds)
{
<li class="list-item" selected-personspecialneed="#y.PersonSpecialNeedId" selected-need-type="#y.SpecialNeedTypeId"> #y.SpecialNeedDescription </li>
}
}
</ul>
</div>
#(Html.Kendo().Sortable()
.For("#SpecialNeedActiveList")
.ConnectWith("#SpecialNeedInActiveList")
.PlaceholderHandler("placeholder")
.Events(events => events.Change("onChange"))
)
Javascript:
function onChange(e) {
var id = e.sender.element.attr("id"),
text = e.item.text(),
newIndex = e.newIndex,
oldIndex = e.oldIndex;
if (id == 'SpecialNeedActiveList' && newIndex > -1) {
//add item to selected list
//remove item from availables list
/*NONE of the following works...*/
//var oldPersonSpecialNeedId = e.sender.element.getAttribute('available-personspecialneed');
//var oldSpecialNeedTypeId = e.sender.element.getAttribute('available-need-type');
//e.sender.element.removeAttribute('available-personspecialneed');
//e.sender.element.removeAttribute('available-need-type');
//e.sender.element.setAttribute('selected-personspecialneed', oldPersonSpecialNeedId);
//e.sender.element.setAttribute('selected-need-type', oldSpecialNeedTypeId);
}
console.log(id + " change: " + text + " newIndex: " + newIndex + " oldIndex: " + oldIndex + " action: " + e.action);
}

When you are in the change event handler(onChange()), e.sender.element is NOT the item that was dragged, it is the list that sent the change event, the <ul> element.
The item being drag/dropped is contained in the e.item field, which you should be able to manipulate as normal, for example using jQuery(but you may use whatever DOM manipulation technique you like):
var $item = $(e.item);
var oldPersonSpecialNeedId = $item.attr('selected-personspecialneed');
var oldSpecialNeedTypeId = $item.attr('selected-need-type');
$item.attr("selected-personspecialneed", "new" + oldPersonSpecialNeedId);
$item.attr("selected-need-type", "new" + oldSpecialNeedTypeId);
Here's a working example showing the attributes being changed:http://dojo.telerik.com/#Stephen/arUpO
It is based on single list from the code in your question rather than 2 lists but it simply demonstrates how to access the dragged element from the sortable change event, which is the core of your problem.
Having said that, I would probably investigate using a DataSource-bound list so that you can manipulate fields of a model instead of attributes of a DOM element. http://demos.telerik.com/aspnet-mvc/sortable/integration-listview is a good place to start.

jQuery find not working with object array

This code doesn't work
var next = $("#orders").find(".next");
if (next.length == 1) {
var address = $(next[0]).find(".directionsAddress");
var destination = $(address[0]).text();
}
<div id="orders" class="ui-sortable">
<div id="companyAddress" class="noDisplay">101 Billerica Avenue, North Billerica, MA</div>
<div id="companyPhone" class="noDisplay">9788353181</div><div class="next"></div>
<div class="lat">42.616007</div>
<div class="lng">-71.31187</div>
<div id="section1611" class="sectionMargin borderRad">
<div class="directionsAddress noDisplay">92+Swan+Street+Lowell+MA</div>
It is suppose to find one div with a class of "next" that I know exists on the page, then within that one item of the result set array, there will be one div with a class name of directionsAddress.
The "next" array is coming back with a length of 1, so it looks like the problem is with my $(next[0]).find because the address array is coming back as 0 length and I am making a syntax error of some sort that I don't understand.

This should do what you want. You need to find the parent (or alternatively, the sibling of .next) then try to find the applicable .directionsAddress.
var next = $("#orders").find(".next");
if (next.length == 1) {
var destination = $(next).parent().find(".directionsAddress");
alert($(destination).text());
}
Working fiddle: https://jsfiddle.net/00fgpv6L/

Check if next item exists inside an ng-repeat item

I'm using ng-repeat with a limitTo filter and a button to raise the limit when clicked. Is there any way to check if the next item in the ng-repeat iteration exists/count how many more items there are so that i can hide the 'load more' button/show how many more items there are.
below is sort of an example of what I am trying to do:
<div ng-repeat="comment in collection.data | limitTo:commentLimit">
{{comment.text}}
<div ng-show="filteredItems[$index + 1]" ng-click="increaseLimit()">load more (3 more replies)</div>
</div>

You can do something similar to this codepen:
http://codepen.io/anon/pen/waxOZL
<div ng-repeat="comment in collection.data | limitTo:commentLimit">
{{comment.text}}
</div>
<div ng-show="collection.data.length > commentLimit" ng-click="increaseLimit()">load more (3 more replies)</div>
Also, you should put the load more link outside the ng-repeat to show it only once.

Ideally, I think what you want to do is set an increment value in your scope, and add a new function called nextIncrementAmount which will help you display the number of new replies the button will add when clicked.
$scope.commentLimit = 3;
$scope.incrementStep = 3;
//use this function to increase the filter limit
$scope.increaseLimit = function() {
var newLimit = $scope.commentLimit + $scope.incrementStep;
$scope.commentLimit = (newLimit < $scope.collection.data.length) ? newLimit : $scope.collection.data.length;
}
//use this function to show the number of replies the increment button will increment by.
$scope.nextIncrementAmount = function() {
var newLimit = $scope.commentLimit + $scope.incrementStep;
return (newLimit < $scope.collection.data.length) ? $scope.incrementStep : $scope.collection.data.length - $scope.commentLimit;
}
Then in your view you'll want to do something like this:
<div ng-repeat="comment in collection.data | limitTo:commentLimit">
{{comment.text}}
</div>
<div ng-if="collection.data.length != commentLimit"
ng-click="increaseLimit()">
load more (<ng-pluralize count="nextIncrementAmount()"
when="{
'1': '{} more reply',
'other': '{} more replies',
}"> </ng-pluralize>)
</div>

jQuery find and replace second one

I was wondering how I would go about finding and replacing some text in a div, but i want to find and replace the second occurrence of that text. For example:"You just added a item, please remove this item" so I would like to find the second "item" and replace it with whatever text I choose.
JS:
var compareCount = $('.compareWidget').find('.compareItem').length;
if (compareCount >= 2) {
$('.message').find('.count').text(compareCount);
$('message').html().replace('item', 'items');
}
$('.message').slideDown("Fast");
setTimeout(function () {
$('.message').slideUp("Fast");
}, 5000);
HTML:
<div id="alertMessage">
<div class="message">
<span>You just added a item to compare, you currently have <span class="count">1</span> item to compare</span>
</div>
</div>

"you currently have 1 item to compare"
You want to turn item to items?
You can do it with regular expressions, or you can wrap it into an element and grab that.
<span class="count">1</span> <span class="type">item</span> to compare</span>
and
$('.message').find('.type').text("items");

Using regular expressions you can
function replaceMatch(originalString, searchFor , replaceWith, matchNumber)
{
var match = 0;
return originalString.replace(searchFor, function(found){
match++;
return (match===matchNumber)?replaceWith:found;
},'g');
}
and call it like
var msg = $('.message');
msg.html( replaceMatch( msg.html(), 'item', 'items', 2) );
demo http://jsfiddle.net/gaby/crhvA/