We Keep Coding

How do I print only the selection from my list group item?

I searched how to and I am not able to find an answer.
I have 3 list group boxes like this in my Web page
Containers
I am trying to write get the selection using jQuery/javascript for my right Container to print in my bottom container.
**My HTML**
<div class="col-6">
<div class="card ">
<div class="card-header py-2">LEFT CONTAINER</div>
<div id="leftContainer" class="list-group" style="height:425px; overflow-y: scroll">
<!-- POPULATED BY JINJA -->
{% for campaign in campaign_histories %}
{{forloop.counter}}. {{ campaign }}
{% endfor %}
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-header py-2">RIGHT CONTAINER</div>
<div id="rightContainer" class="list-group" style="height:425px; overflow-y: scroll">
<!-- POPULATED BY AJAX BELOW -->
</div>
</div>
</div>
<div class="col-12" >
<div class="card mt-4" id="BOTTOM CONTAINER">
<div class="card-header py-2">BOTTOM CONTAINER</div>
<div id="bottonContainer" class="list-group" style="height:190px;">
</div>
</div>
</div>
<p id = "DEBUG"></p> <!-- FOR DEBUG PRINT ONLY, REMOVE LATER-->
My jQuery/AJAX:
<script>
$("#leftContainer> a").click(function(event){
event.preventDefault();
$("#leftContainer > a").removeClass("active");
$(this).addClass("active");
$.ajax({
type:'POST',
url:"view_results/onclick/",
data:{
idx:index,
csrfmiddlewaretoken:"{{ csrf_token }}"
},
dataType:"text json",
success: function(resp){
// console.log(resp.model_list);
$("#rightContainer > a").removeClass("active");
$("#rightContainer > a").hide();
$("#rightContainer ").empty()
success_flag =1;
for(i=0; i<resp.model_list.length; i++){
$("#rightContainer ").append(''+resp.model_list[i]+'');
}
},
})
});
</script>
I added THIS below to my scripts to debug print it to my <p id = "DEBUG"> in my HTML. But it is printing the whole list. I do not know how to get the selection from my RIGHT CONTAINER to print. I need both the text and the index. :
$("#rightContainer").on('click',function(){
event.preventDefault();
$("#rightContainer > a").removeClass("active");
$(this).toggleClass("active");
document.getElementById("debug").innerHTML = $(this).children().attr("id")
});
My NEED is:
I only want to print to my BOTTOMCONTAINER ONLY the selection from my RIGHTCONTAINER instead of the whole list . I also need to add a button to the end of item printed in the bottom container. I am using bootstrap 4.
Can you help? My project is Django/Python in the backend.

What you can do is after your loop that appends all the links to the right container, you can add an on click listener on all the links you added (with a special class name to be specific).
Then in the function that handles the click event, you can use the this keyword to access the properties of the clicked link and use them to create your next element to append to the bottom container. Here is an example:
First you should add a class name for all the links in the right container so we know we are only targeting those. Notice below I only added rightContainerLink to the classes.
for(i=0; i<resp.model_list.length; i++){
$("#rightContainer ").append(''+resp.model_list[i]+'');
}
Then you can go ahead and use that class selector to be sure you only run handleLinkClick when a rightContainer link is clicked.
$(".rightContainerLink").on("click", handleLinkClick);
function handleLinkClick() {
let index = $(this).attr("id");
let text = $(this).text();
let elem = `<span>index is: ${index} text is: ${text}</span>`;
elem += "<button> I am a button</button> <br/>";
$("#bottomContainer").append(elem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rightContainer">
model 1
model 2
model 3
<!-- This link will not add to the bottom div because it doesn't have rightContainerLink class -->
I will not be added to bottom 4
</div>
<hr/>
<div id="bottomContainer">
</div>

I need to sort Bootstrap grid rows by title

I have a table that I have created in bootstrap 3 using the grid and NOT tables.
The website is for booking busses.
The table HTML structure looks something like this:
<div class="row">
<div class="col-lg-3"><h3>Bus Company</h3></div>
<div class="col-lg-3"><h3>Bus Features</h3></div>
<div class="col-lg-3"><h3>Departure Time</h3></div>
<div class="col-lg-3"><h3>Book Now</h3></div>
</div>
And then there's a loop that gets all the relevant search results...one of the iterations looks like this:
<div class="row busses">
<div class="col-lg-3"><p>Bus Company One</p></div>
<div class="col-lg-3"><p>Water, Toilet</p></div>
<div class="col-lg-3"><p>6:45 pm</p></div>
<div class="col-lg-3"><p>Book Now</p></div>
</div>
And that will repeat for every bus that matches the search criteria.
I would like to be able to click on any of the titles in the first row and then that sorts the results accordingly...or maybe just departure time and bus company (column 1 and column 3).
I have searched far and wide and ideally would just like a javascript plugin that I can use but everything I find seems to need to use an actual html <table> and I do not want to use that.
If anyone does know of a plugin it also needs to be able to sort by time as in...see that 2pm is later than 11am if you get what I mean.
Thanks in advance!
Matt

This could be achieved with something like this:
function sortBusses(byDatum, reverse) {
var busses = $('.busses').detach().toArray();
busses = busses.sort(function(a,b) {
var aVal = $(a).find('[data-target-attr='+byDatum+']').text();
var bVal = $(b).find('[data-target-attr='+byDatum+']').text();
// looks reversed because we use append later, not prepend
var returnVal = bVal < aVal ? 1 : -1;
if (reverse) returnVal = -returnVal;
return returnVal;
});
$(busses).appendTo('.busses-container');
}
$(document).ready(function() {
$('.busses-heading div').click(function() {
if ($(this).attr('data-target-attr')) {
var isReversed = $(this).attr('data-reversed');
reverse = (isReversed && isReversed==='false') ? true : false;
sortBusses($(this).attr('data-target-attr'), reverse);
$(this).attr('data-reversed', reverse);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="busses-container">
<div class="row busses-heading">
<div class="col-lg-3" data-target-attr="company"><h3>Bus Company</h3></div>
<div class="col-lg-3" data-target-attr="features"><h3>Bus Features</h3></div>
<div class="col-lg-3" data-target-attr="time"><h3>Departure Time</h3></div>
<div class="col-lg-3"><h3>Book Now</h3></div>
</div>
<div class="row busses">
<div class="col-lg-3"><p data-target-attr="company">Bus Company One</p></div>
<div class="col-lg-3"><p data-target-attr="time">6:45 pm</p></div>
<div class="col-lg-3"><p data-target-attr="features">Seats</p></div>
<div class="col-lg-3"><p>Book Now</p></div>
</div>
<div class="row busses">
<div class="col-lg-3"><p data-target-attr="company">Bus Company Two</p></div>
<div class="col-lg-3"><p data-target-attr="time">7:45 pm</p></div>
<div class="col-lg-3"><p data-target-attr="features">Water, Toilet</p></div>
<div class="col-lg-3"><p>Book Now</p></div>
</div>
<div class="row busses">
<div class="col-lg-3"><p data-target-attr="company">Bus Company Three</p></div>
<div class="col-lg-3"><p data-target-attr="time">8:45 pm</p></div>
<div class="col-lg-3"><p data-target-attr="features">Toilet</p></div>
<div class="col-lg-3"><p>Book Now</p></div>
</div>
</div>
However, since your data is tabular in nature, it would be advisable to go ahead and use a table

Thanks for that answer...that code looks pretty good but I actually ended up finding this little script which ended up doing everything for me quite nicely...and its jQuery independant too!
http://tinysort.sjeiti.com/

JQuery loop through div and build multi-line string based on data attribute

I have two questions:
1.) As you can see I have multiple divs and I have onclick things going on when the callout panel notes div is clicked. It accesses the data-category attribute. I'm using
$(this).parent().parent().siblings().first().data("category");
To access it, which works, but it seems messy. I tried parents().last().data(...) but that never worked. I feel like there's a more efficient way. So any opinions would be appreciated.
2.) My next question I can't figure out. Some of the divs have the selected class (after I click on the div). Later I'm going to hit a button to grab the selected stuff, and send it through some ajax stuff. There are 5 other "categories" so I need the .selected content to be associated with the data-category="a", ie, I need to make sure it only loops withing the that category. Can anyone help me loop through the data-category="a" and build a multi-line string with the data-response-text of the .selected classes?
The html is below:
<div class="row responses panel">
<div class="small-12 column" data-category="a">
<h3>Responses</h3>
</div>
<div class="small-12 column">
<div class="callout panel notes" data-response-text="Info 1">
Info 1
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 2">
Info 2
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 3">
Info 3
</div>
</div>
<div class="small-12 column">
<div class="callout panel notes selected" data-response-text="Info 4">
<div class="remove-response"></div>
Info 4
</div>
</div>
<div class="small-12 column">
<div class="add-new-box">
<div class="add-new">
Add Response
</div>
<div class="add-new-text">
<input class="text-response" type="text" placeholder="Response">
</div>
</div>
</div>
</div>
<div><span class="button">Submit</span></div>

For the first part you can do:
$(this).closest('.row.responses').children(':first').data('category');
If either .row or .responses are unique to that level elements, you can use that solely then.
For the second part, I assume "content to be associated with the data-category a" means elements insides .row.responses which firs element has data-category="a". If so then you can do:
var str = "";
var sls = $('[data-category="a"]').parent().find('.selected');
sls.each(function() {
str += $(this).data('response-text') + "\n";
});

First question: I would select the panel like so:
$(this).find('[data-category]').data();
I would then create a function that's called on each of the panels and then returns an array of the data you require from .selected
function getData(panel) {
var $selected = $(panel).find('.selected');
var dataArr = [];
for (var i = 0; i < $selected.length; i++) {
dataArr.push($selected.eq(i).data().responseText);
}
return dataArr;
}
var panelData = getData($('the-panel-in-question'));

Index/position of dynamic jquery ui sortable blocks?

Unfortunately, I am not able to get this working in jsfiddle but maybe I overlooked something (http://jsfiddle.net/bJpyU/46/). I have blocks dynamically created and need to save the order that they are placed. Because of the dynamic fashion that this is set up, I am not able to get the index (it's always 0, and the block starting first always shows as first index wise regardless of where it is dragged). toArray and serialize are showing up as blank. I've even tried counting nth-child. Any idea how to get the order?
HTML
<div class="tab-pane active col-lg-12" id="portlet_tab_Graphs">
<div class="row padLR sortable_portlets" id="sortable_portlet_Graphs">
<div class="col-lg-4 sortable sortable_portlet_Graphs_column ui-sortable" id="102">
<div class="portlet box yellow">
<div class="portlet-title">Monthly License Revenue</div>
</div>
<div class="portlet-body clearfix pad">
<div id="h1_sortable_portlet_Graphs_102"></div>
<div id="sortable_portlet_Graphs_102">
<div class="col-lg-12 nPad">
<div class="btn-group chartToggle inline">Graph Data</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 sortable sortable_portlet_Graphs_column ui-sortable" id="103">
<div class="portlet box blue">
<div class="portlet-title">Yearly License Revenue</div>
</div>
<div class="portlet-body clearfix pad">
<div id="h1_sortable_portlet_Graphs_102"></div>
<div id="sortable_portlet_Graphs_102">
<div class="col-lg-12 nPad">
<div class="btn-group chartToggle inline">Graph Data</div>
</div>
</div>
</div>
</div>
</div>
</div>
JQUERY
var sortdiv = "Graphs"
var blockClasses = "col-lg-4";
$(".sortable_portlet_" + sortdiv[2] + "_column").sortable({
connectWith: ".sortable_portlet_" + sortdiv[2] + "_column",
handle: ".portlet-title",
//placeholder: "dragColumn",
forceHelperSize: true,
forcePlaceholderSize: true,
start: function (e, ui) {
ui.placeholder.height(ui.helper.outerHeight());
ui.placeholder.width(ui.helper.outerWidth());
// get original block size
blockClasses = ui.item.parent().attr('class');
},
stop: function (e, ui) {
var parent = ui.item.parent();
blockWidth = blockClasses.split(" ");
parent.attr('class', function (i, c) {
return c.replace(/(^|\s)col-lg-\S+/g, blockWidth[0]);
});
//console.log(ui.position)
SavePortletDrop(sortdiv[2]);
}
});

I think the error is actually from attaching sortable to each individual item that you're sorting. It should be attached to a container div.
So, even though it looked like it was working, you were actually moving around a bunch of 1-item lists, which are always at index 0.
I got it to work like I think you want it by attaching sortable to the #sortable_portlet_Graphs. This makes ui.item.index() return the number you'd expect in the stop function.
http://jsfiddle.net/bJpyU/47/

Jquery slideToggle particular div

Respected ppl ...
This is my markup :
<div class="row-fluid">
<div class="span12 card card-even">
<div>
<h3>Case 1</h3>
Hide the subsection
</div>
<div class = "timeline">
<div class= "circle circle-green " data-toggle="tooltip" title="Task 2 ">
<span></span>
</div>
<div class="rect-fixed"></div>
</div>
<div class="subsection"><span>Panther a</span></div>
</div> <!-- end of card 1-->
</div>
<div class="row-fluid">
<div class="span12 card card-odd">
<div>
<h3>Case 1</h3>
Hide the subsection
</div>
<div class = "timeline">
<div class= "circle circle-green " data-toggle="tooltip" title="Task 2 ">
<span></span>
</div>
<div class="rect-fixed"></div>
</div>
<div class="subsection"><span>Panther b</span></div>
</div> <!-- end of card 2-->
</div>
I have an app which generates multiple alternating cards(row-fluids) which are even/odd with a button "hiderBUTTON" to hide the div with the class=subsection
But im unable to link the button of a particular row with its corresponding subsection ....
How do i use the this keyword correctly and target a button's subsection for a given row ...
Thanks very much ....
Regards

Like this?
$('.hiderBUTTON').click(function(e){
e.preventDefault();
$(this).closest('.card').find('.subsection').toggle();
});
Use .closest() to get to the its root parent of each subsection and button parent i.e .card and the use find to get the subsection and use toggle to switch it or just use .hide() to hide it.
Demo
With text toggling b/w show/hide
$('.hiderBUTTON').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.closest('.card').find('.subsection').toggle();
$this.text(function(_, text){
return text == "Hide the subsection" ? "Show the subsection" : "Hide the subsection";
})
});
Demo