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 does HTML pagination work without a link or script?

Consider the following link:
https://www.officeworks.com.au/shop/officeworks/c/technology/monitors-digital-signage/27--monitors
The "View 100 per page" link does not change the url, nor does it have an onclick() attribute, yet it does reload the page and show up to 100 items. What variable has changed here, and how is it stored? Is it possible to get the HTML of the page with 100 items directly, without having to click the link or reload? Or get the page with 100 items programatically? (eg in Python)

One answer is the Ajax and Event system un Javascript.
You can have one HTML item like
<button id="but1">Show 100 items</button>
and add a "click" event on it from Javascript (example with JQuery)
$("#but1").click(function_but1_click);
This will launch the function_but1_click() function when the HTML button is clicked by the user.
After it, you can ask this function to perform an Ajax request to bring more data to the page (Example with JQuery)
function_but1_click()
{
$.get('myDataLoader.php',function(data){
items = JSON.parse(data)
draw_my_items(items)
});
}
And then implement the draw_my_items() function to display your new item on the screen.

The content is loaded dynamicly, an example of such feature is jQuery Ajax
http://api.jquery.com/jquery.ajax/
There is no need to add a link, or onclick. You can bind event handlers to html tags / classes / IDs ...
https://api.jquery.com/click/
I think the storage happend on the server side, session side. Because i was not able to find a related cookie.
Good luck!

Do something with the particular element even though click event is fired on class name

I have a scenario where a dropdown launcher menu should appear on every row in a list page. I have tweaked the code here.
I want the popover (open) behavior be restricted for the click on the particular launcher-icon, though close action is perfect here.
the problem is when any icon is clicked, it shows all menus. My page has rows inflated from a database and every row has three such launcher icons.
I guess this block of code needs some tweaks:
// Click event handler to toggle dropdown
$(".button").click(function(event){
event.stopPropagation();
// How can I call toggle for the specific div element?
$(".app-launcher").toggle();
});
How can it be done?

You need to traverse the DOM to find the .app-launcher instance which is related to the clicked .button element, to do that use closest() and find(), like this:
$(".button").click(function(event){
event.stopPropagation();
$(this).closest('.launcher').find(".app-launcher").toggle();
});
Updated CodePen
I would also suggest looking in to using a single instance of .app-launcher and moving it around the DOM as required to DRY up your HTML code.

Change content on click of button in jquery

So my scenario goes like this:
I have 3 kind on item to show in div. There are three buttons on top of div and when user click any of the button items corresponding to that items are shown.
Items comes from backend and I am getting all the items loaded on page load as I also need them some where else also within same context.
Currently I am following show hide approach for the same .What I want to know is can there be any other approach that can be better then this in terms of code optimisation. User can also edit /add./remove item?
Here is my fiddle
$(document).ready(function(){
console.log($('.toggleItems'));
$('.toggleItems').click(function(){
$('.containers').hide();
var identifier = $(this).data('identifier');
console.log(identifier);
$('#'+identifier).show();
});
})

First order by items then use accordion jquery

jQueryMobile Dynamic Pages - Events triggered multiple times

I'm working on a jQueryMobile website that let people order products. There are dynamic pages (such as product page) and I have some events in there (that calculates the total, refreshes the ingredient list, etc).
The first time you enter a product page everything works fine, however after you add the product in the cart and get back to another product, everything triggers once again. So for example if you add 10 items in the cart, for the 10th item, everything (including ajax calls) is triggered 10 times.
I recorded a video here: http://www.screenr.com/Ew5H so you can see exactly the issue.
The website url is: http://m2.pizzaboy.y11.in/
The JS file is here: http://m2.pizzaboy.y11.in/assets/js/main.js
I'm using:
$( document ).delegate("#page-product", "pageinit", function() {
//stuff here
});
to trigger all actions on the product page.
I tried all kind of solutions to fix this (delete the page elements that are no longer active, using flags, etc) but nothing worked.
Thanks for you help

The solution was indeed unbinding the events (using .off), however .off is not working (at least for me) if you provide multiple selectors.
Example:
// This is NOT WORKING because multiple elements are used
$(document).off('change', '.class1, .class2, #idelement');
// This WORKS
$(document).off('change','#idelement');
$(document).off('change','.class1');
// and so on...
// You can add a class to all elements that you want to
// unbind, and then just call it once
$(document).off('event','.classForUnbind')
// If you want to unbind all elements
$(document).off('change');
Hope this helps