Bootstrap 4, How to show list-group items in container 2 upon selection from container 1

Question

I am using bootstrap 4, and I have two list-groups in containers side by side. I am trying to show items in container 2 upon selection of a list item from container 1. How do I populate this?

Each row in my right container, determine how many items my second container should populate. We can use values for now.

<div class="col-6">
  <div class="card ">
      <div class="card-header py-2">Group Name</div>
      <div class="list-group">
          <a href="#" class="list-group-item py-0 list-group-item-action">Container Left 7 items</a>
          <a href="#" class="list-group-item py-0 list-group-item-action">Cras justo odio 10 items</a>
          <a href="#" class="list-group-item py-0 list-group-item-action">Dapibus ac facilisis 17 items</a>
          <a href="#" class="list-group-item py-0 list-group-item-action">Morbi leo risus 12 items</a>                            
      </div>
  </div>
</div>
<div class="col-6">
  <div class="card">
      <div class="card-header py-2">Items</div>
      <div class="list-group">
          <a href="#" class="list-group-item py-0 list-group-item-action">Container Right</a>
          <a href="#" class="list-group-item py-0 list-group-item-action">Cras justo odio</a>
          <a href="#" class="list-group-item py-0 list-group-item-action">Dapibus ac facilisis in</a>
          <a href="#" class="list-group-item py-0 list-group-item-action">Morbi leo risus</a>                            
      </div>
  </div><!--class="card"-->
</div><!--class="col-6"-->

I have this plnkr example

Can you help? Also, I will need a vertical scroll bar after 9 items or long. And want selection to remain highlighted in blue. Container 2 is to update when items from container 1 is selected, otherwise remain empty.

Just noticed your comment up there, sorry was away during holidays. I have used the method suggested below and I have given some updates. To answer your question, I am not very familiar, I usually google for what I need and try to use them. — YouGotA.BigEgo, Nov 27 '18 at 19:40

score 1 · Accepted Answer · answered Nov 21 '18 at 08:22

The following answer is the simplest solution just to give you the idea, of course there are other better solutions.

In this answer, I used simple Jquery code and some tiny html adjustments to the code you posted in Plunker, you can adjust it to what ever syntax you need.

Regarding the container selection, you can add a data-set attribute in each anchor you are using in both containers. The value of data-set in the left container represents the number of items the right side must contain. The value of data-set in the right container represents a number of items.

Here is the html

<div class="col-6">
  <div class="card ">
    <div class="card-header py-2">Container Left</div>
    <div id="leftContainer" class="list-group">
      <a href="#" data-set="2" class="list-group-item py-0 list-group-item-action">Container Left 7 items</a>
      <a href="#" data-set="4" class="list-group-item py-0 list-group-item-action">Cras justo odio 10 items</a>
      <a href="#" data-set="3" class="list-group-item py-0 list-group-item-action">Dapibus ac facilisis 17 items</a>
      <a href="#" data-set="5" class="list-group-item py-0 list-group-item-action">Morbi leo risus 12 items</a>                            
    </div>
  </div>
</div>
<div class="col-6">
  <div class="card">
    <div class="card-header py-2">Container Right</div>
    <div id="rightContainer" class="list-group" style="height:225px; overflow-y: scroll">
      <a href="#" data-set="1" class="list-group-item py-0 list-group-item-action">1</a>
      <a href="#" data-set="2" class="list-group-item py-0 list-group-item-action">2</a>
      <a href="#" data-set="3" class="list-group-item py-0 list-group-item-action">3</a>
      <a href="#" data-set="4" class="list-group-item py-0 list-group-item-action">4</a>                            
      <a href="#" data-set="5" class="list-group-item py-0 list-group-item-action">5</a>
      <a href="#" data-set="6" class="list-group-item py-0 list-group-item-action">6</a>
      <a href="#" data-set="7" class="list-group-item py-0 list-group-item-action">7</a>
      <a href="#" data-set="8" class="list-group-item py-0 list-group-item-action">8</a>
      <a href="#" data-set="9" class="list-group-item py-0 list-group-item-action">9</a>
      <a href="#" data-set="10" class="list-group-item py-0 list-group-item-action">10</a>
      <a href="#" data-set="11" class="list-group-item py-0 list-group-item-action">11</a>
      <a href="#" data-set="12" class="list-group-item py-0 list-group-item-action">12</a>
      <a href="#" data-set="13" class="list-group-item py-0 list-group-item-action">13</a>
      <a href="#" data-set="14" class="list-group-item py-0 list-group-item-action">14</a>
    </div>
  </div><!--class="card"-->
</div><!--class="col-6"-->

Note the rightContainer div styling, this will solve the vertical scroll (second part of your question), but of course you will need to adjust it to height of each item after finishing it styling.

Here is the Jquery event function that will do the selection trick

$("#leftContainer > a").click(function(event){
  event.preventDefault();
  $("#leftContainer > a").removeClass("active");
  $(this).addClass("active");
  var leftDataSet = parseInt($(this).attr("data-set"));
  $("#rightContainer > a").removeClass("active");
  $("#rightContainer > a").hide();
  $("#rightContainer > a").each(function(){
    if(leftDataSet >= parseInt($(this).attr("data-set"))){
      $(this).show();
    }
  });
});

Note that I used the active bootstrap class for the selection highlight. And for the third part of your question the highlight part you can use this

$("#rightContainer > a").click(function(event){
  event.preventDefault();
  $(this).toggleClass("active");
});

For the last part of your question you can either add a d-none class to all anchors in the html at the beginning or you can add the following line at the beginning of your javascript file before the events above

$("#rightContainer > a").hide();

Hope it was helpful

Very helpful. I was able to use your method to make my page, but I worked myself into a corner here. I like how value of data-set in the left container represents the number of items the right side must contain. But this quickly punched a hole in what I wanted to do. The data-set value for each row in left container is different. And I was populating my left container's tag fields using a for loop. Please see the Plnkr link. I am using Django, and Python backend, and so I am able to pass values to front end/HTML using Jinja2 http://plnkr.co/edit/RmplTo1XJ4A1HINHhZkV?p=catalogue . — YouGotA.BigEgo, Nov 27 '18 at 18:53
I also tried without giving any data-set parameter, but it didn't populate anything for the right container. Since I have a Jinja2 for loop trying to populate the field inside the div for left and right container, I am afraid I may not be able to use data-set. The content inside both containers, left and right are not fixed as they change, so they are populated dynamically. — YouGotA.BigEgo, Nov 27 '18 at 18:58
When the 'campaign' in campaign_histories list changes, the 'test_history' list also changes for each 'campaign' at the backend which feeds these to the front end HTML. Some 'campaign' have 50 items in 'test_history' list, and some others may have only 5. So my original need is still there, just that data-set method and script have to change. Any suggestions. — YouGotA.BigEgo, Nov 27 '18 at 19:05
Ideally I thought I could specify the length of the array for data-set using Jinja2 notation this way, `data-set="{{ test_history|length }}"` , but that doesn't seem to work for me. — YouGotA.BigEgo, Nov 27 '18 at 22:30
If I understood you right, you can make `campaign_histories` array of objects where each object will contain text and items. It will lead you to this `{{forloop.counter}}. {{ campaign.text }}` — Hossam, Nov 28 '18 at 08:16
How do I send an AJAX data on click to the back end? I realized that I need to send back my selection of my Left container back to the Python backend in order to populate the correct array for my Right container. I wrote a small AJAX code on your JS script, but I am not sure if it will accomplish what I want. I want to send the selection the user made on left container upon a click. When user selects one item in left container, the AJAX should be able to send it to the backend without a submit button. I have updated my Plnkr here : http://plnkr.co/edit/piQLQQGYZCz2elNRdygO?p=preview — YouGotA.BigEgo, Nov 30 '18 at 01:29
For my implementation code, I have Django/Python as a backend. That looks like this Plnkr with for loops to populate the container: http://plnkr.co/edit/LKgye3LyXCRHyz3xfz9X?p=catalogue — YouGotA.BigEgo, Nov 30 '18 at 01:35
This solved the problem @Hossam , I am now able to send back to the back end using this updated AJAX. Plnkr here: http://plnkr.co/edit/IizE3Y9K9AyT7HmbGZfc?p=catalogue — YouGotA.BigEgo, Nov 30 '18 at 04:03
I don't know why, but by adding this line above the script was able to send the AJAX despite me having the jquery from Bootstrap4 given in my header which you have seen in my other examples. I don't know why the jQuery link mentioned in my header didn't allow me to send AJAX back to back end despite being newer version. This is the new line I had to add: — YouGotA.BigEgo, Nov 30 '18 at 04:05
the last Plnkr url not working [your Plnkr](http://plnkr.co/edit/IizE3Y9K9AyT7HmbGZfc?p=catalogue) — Hossam, Nov 30 '18 at 11:21
The last Plnkr url is not working because it only shows the script section of how I modified the script to be able to send the data as an AJAX request. But I have a more detailed Plnkr here in this question: https://stackoverflow.com/questions/53561723/do-i-have-to-re-render-my-page-after-updating-template-data — YouGotA.BigEgo, Nov 30 '18 at 16:55

Bootstrap 4, How to show list-group items in container 2 upon selection from container 1

1 Answers1