We Keep Coding

Display search results inside div and add new results

I've been looking for a good how to on this topic for the last 4 days and could not find any. Even worse; I'm not able to think of a good description of what I'm trying to achieve.
For example Dropbox has the functionality of what I would like to implement on my own website. If you login into dropbox you can upload files. When you upload files one by one the UI stacks the results (filename, location, etc.) into a div element. There are other websites who also do this; Namecheap, for example, when you search for a domain and click add to cart you see the domain show up on the right side, where you have the option to delete it.
What I would like to do:
Have a page with a search box that queries my database for objects and displays the results into a div element below. Everytime the user does a new search the results in that div element will change. But if the user clicks on the 'add to' button the object must move from the search_results div element to another div element on the same page where all the previous selected elements are also listed. The user is then able to delete the object from the list or alter the values of the object such as the amount.
Like I said; I've been pulling my hair out because I cannot find it... I'm feeling really stupid right now :( Does anybody know what the technicall name of such a functionality is?
EDIT
The comment below from Quasimodo's clone and yuriy636 pushed me in the right direction. After searching with there terminology I've found this page:
https://cartjs.org/
The second example is exactly what I was looking for. However I'm not able to upvote a comment but I do like to give credits to both for helping me out!

Your question is quite vague but I think what I've done below can at least nudge you in the right direction.
Let's say you have something like this - a div to hold your search results, each of which is it's own div with class result, and a separate div to hold the 'moved' ones:
<div id="searchResults">
<div class="result">This is one search result.</div>
<div class="result">This is another result.</div>
</div>
<div id="chosenResults"></div>
Now, we can use JQuery to put in the "move" functionality:
$(document).ready(function() { //On page load
$('.result').click(function() { //When element with class "result" is clicked
$(this).detach().appendTo('#chosenResults'); //Remove it form the results list, add it to the other
});
});
Here it is in action: http://codepen.io/anon/pen/GqBxEp
I'm not sure where you're at in regards to the actual data retrieval, etc, however I figured knocking out the front-end as I have above may be useful for you.

I've heard the term infinite list and infinite scroll, Wikipedia uses 'lazy or delayed evaluation': https://en.wikipedia.org/wiki/Lazy_evaluation#Delayed_evaluation

How to create advanced input with filter in results

I want to make something really similar as "search" on website http://www.jobs.cz/
What it should do:
Selectbox show on user focus on input
User can type in input and filter result from selectbox
If user pick one of result selectbox hide
If user focus input again selectbox open again and user can pick another option (pick as added to previous not rewrite previous one)
If he start typing to input it still filter no matter what is already picked
(example: He already pick "Administrativa" but if he type Auto it offer him "Auto - Moto", in another words, values picked before should not be use for filter )
Each picked value should be in some "tag" mode (each one is separated inline-block and have class)
Before I will continue i dont want you to make whole code for me it will prolly take too long, And I didnt come here for code but mostly for HOW TO design something like this. I start my self with multiple things just dont know if I think right and I need to help with some ideas how things like this can be made.
So what I did:
Opening / Closing selectbox div:
Input looks like:
<input id="position" placeholder="Position" ng-focus="focus=true" ng-blur="focus=false" ng-model="q">
And then something like
<div class="inputHelper" ng-show="focus">
Filter results:
Based on angular documentation filter in ng-repeat should be done really easy by:
<li ng-repeat="pos in listCtrl.positions | filter:q as results" ng-click="listCtrl.choosePosition(pos)">{{pos.name}}</li>
With ng-model="q" on <input> , however problem start if I push something to that model, like previous pick from user. I am not sure how to handle filter if user already pick something.
Handle multiple picks
For this I create array where I always check if user already pick that, if not push it to array.
choosePosition: function(position) {
if (listCtrl.chosenPosition.indexOf(position) === -1) {
listCtrl.chosenPosition.push(position);
}
}
Show array of objects in input
I search for this a lot in documentation and google a this kind of issue, and I found this what is basicly display array in input. I didnt find anything more usefull. So for this point I dont know how to display array of objects, and how to style each array element as inline block and give it some class.
Summary:
This is kind of long post, but I try to say everything I need to do to avoid some miss understanding, I spend days here I still stuck somewhere. And I am not even sure I design this well. If here is someone who can help me with part of codes which can work or at least try to explain me how to do something like this i will really appreciate it

If your project will allow its use, Angular Material's Autocomplete is pretty much a direct implementation of what you desire.

Protractor test if modal is visible

I am attempting to Protractor test whether a bootstrap modal window to confirm a records deletion is currently visible.
The record to delete appears in an angular ng-repeat, so I have to activate the delete button from there.
If I test for isPresent the test always passes true because it is looking in the DOM for the modal window, and it will always be there. However testing for isDisplayed always returns false when I expect true.
Here's some code...
// Use the .all repeater to search the array of presented records
element.all(by.repeater('entries in presentData')).then(function(presentData) {
// get the first record and open the options menu
presentData[0].element(by.css('.dropdown-toggle')).click();
// In that first record click the delete button
presentData[0].element(by.css('.delete-link')).click();
browser.waitForAngular();
// Remove the 'fade' class from the Bootstrap modal, I heard animations can cause some issues for testing
browser.executeScript("$('.modal').removeClass('fade');");
// Expect that the .modal-dialog is true
expect(element(by.className('modal-dialog')).isDisplayed()).toBe(true);
});
I have tried all kinds of combinations of various other stackoverflow and github questions, but nothing is working for me so far.
Any light you might be able to shed would be much appreciated!

Turning the comment into an answer.
If adding browser.sleep(5000) before the last expect works then is a timing issue, you may need to incorporate active wait as explained here which is including the waitReady.js script, adding a require('./waitReady.js'); in your onPrepare block then replace the last expect with:
var elm = element(by.className('modal-dialog');
expect(elm.waitReady()).toBeTruthy();
That expect will wait for the element to be present and then will wait for it to be visible.
Using the waitReady.js script will save you from using sleep in those cases.
You may also try another browser.waitForAngular(); right after the browser.executeScript and hope Protractor knows how to wait for that JS injection.

How to select multiple lines in Sublime Text (quickly)

I have a JS file that has over 100000 lines of code, I want to get rid of the first 25000, I've been trying hard but can't figure out how do I select them all at once (holding left mouse button and scrolling down is not an option as it would take forever).
I guess holding SHIFT and arrow DOWN is the way to go, but I have absolutely no idea how to select them all at once anyway. Maybe selecting 25000th line, pressing shift, left arrow and then HOME would help, but I'm working on OS X and have no HOME button my Macbook. Also shortcut for "going to line" (ctrl+q) doesn't seem to work with selection.
How do I do that? Sorry for so dumb question, would've been a second in VIM, but I'm stuck to SE2 now.
Thanks a lot!

go to line 25000: CMD+L, enter 25000
hit CMD+SHIFT+UP ARROW
done

See this forum topic about the "Mark" feature from Sublime Text: https://www.sublimetext.com/forum/viewtopic.php?f=2&t=16844
Ctrl-G to go to the last line you want to select, by number.
Edit > Mark > Set Mark to set your selection-end marker.
Ctrl-G (or Ctrl-Home) to go to the first line you want to select.
Edit > Mark > Select to Mark

Any programming language will do, for example in python:
lines = open('yourfile.txt','r').readlines()
open('yourfile.txt','w').write(lines[24999:100000])

jQuery UI datetimepicker bound to wrong input after DOM element removed

Here's something to bake everyone's noodle. I have a form on a website. You can look at it: My Website. Click book me and select a certain number of days at the top right. Manually remove a few of the form lines from the form using the '-' button. Then try to use the first input on the first line. It's linked to the wrong input. All the inputs have unique ID attributes, and I rebind datetimepicker class after a line is removed. Anyone have the foggiest idea why the datetimepicker pointing the the wrong object? Ironically enough, the timepicker portion, which is not from jQuery UI proper, still points to the correct input, it would seem. It seems that when you delete lines of a lower number, the lines of a higher number are moved and renamed, but the date portion f the datetime picker is still pointing the the line number that it was originally bound to, if that makes any sense.
Help is appreciated because this one has me stumped. I've tried manually releasing the datepicker objects before I remove the form lines, but nothing seems to help.
Thanks
Edit: Is there a way to completely destroy the instances of the datepicker that are bound to the input elements before I remove them?
Edit: Alright, I just had a realization. I am destroying the datepickers on the lines I'm removing, but not the lines that remain, so I'm going to work on this for a minute and see if destroying the datepickers completely when i rebuild the form helps.

No time to analyse all that code but could possible help to call $(elem).datetimepicker('destroy') when you remove a control before any rebinding.

In setAlts()
try removing var fields = $('.date').get();
and just doing:
$('.date').each(function() {
$(this).datetimepicker('destroy'); // From Marcell
$(this).datetimepicker({
minDate: now,
timeFormat: "h:mm tt",
stepMinute: 15,
});
});
If you remove dateCheck() all should be fine.
I assume below is what you are intending with dateCheck() though.
Ok in dateCheck()
change:
target.siblings('.date').datetimepicker('setDate', dateMin);
to:
target.next('.date').datetimepicker('minDate', dateMin);

Alright, so to answer the question: It seems obvious in retrospect, but the datetimepicker addon which is coded in a slightly different, and probably less efficient, manner was throwing me off the trail. At any rate, I'll try to explain what was happening in a clear fashion.
The datepicker object binds to the id of the element when it is created, and it keeps that id until it is destroyed. And apparently, attempting to bind a new datepicker object does nothing if there is already a datepicker object present.
To rememdy the problem, in the setAlts() method, I simply destroyed every single datepicker object, and recreated it. Pretty simple, but it was confusing the hell out of me.
And thanks for setting me on the right path. Otherwise I'd have probably had a chimpout and started smearing my poo on the walls.