Develop Reference

Changing background color of a bootstrap panel

I am trying to change the background color of a panel using javascript to emulate "selected" functionality.
So, on click I get hold of the div by ID and change its background color.
It works fine but only momentarily and again resets the background color, and I have no idea why?
DJANGO HTML Template
<div class="panel-group">
{% if articles %}
{% for article in articles %}
<div class="panel panel-success" id="aid_{{ article.articleId }}">
<div class="panel-body">
<b>{{ article.title }}</b><br/>
<span style="color:darkgrey; font-size:.9em; font-family:sans-serif; font-style:italic">{{ article.source }} - {{ article.date }}</span><br/>
{{ article.sentences }}
</div>
</div>
{% endfor %}
{% else %}
NO ARTICLES PRESENT
{% endif %}
</div>
Javascript
function populateArticle(aid) {
document.getElementById('aid_'+aid).style.backgroundColor="#DEF1DE";
}
Also here is a link to a gif I recorded that shows the behavior: http://g.recordit.co/fSoTieo5Qn.gif (copy-paste the link in a new tab in case if it gives error).
Any ideas why this is happening?

You are not preventing default <a> tag behavior, so Your page refreshes.
onclick="populateArticle({{ article.articleId }});return false;"
Should fix it.

No idea why that may be happening, I personally would try this:
<script>
$(document).ready(function () {
$(".panel-body a").on("click", function (e) {
e.preventDefault();
var id = "#aid_" + $(this).attr("data-articleID");
$(id).css("background-color", "#DEF1DE");
});
});
</script>
After your jQuery script and lose the onClick in your HTML (Bad practice) instead pass the id reference by adding a data-articleID attribute. Like this:
<b>article title</b>
If your issue still persists you'd have to check for any other JavaScript changing the background back to original colors.

Jquery cannot get id from django generated element

I am trying to retrieve an elements ID on click. The element is a div generated by django:
{% for artist in artists %}
<div class="band_box_inner" id='artist_{{artist.id}}' style="background-image: url({{artist.pic_primary.url}})">
</div>
{% endfor %}
The element is correctly displayed on the page. I am trying to retrieve the elements ID when it is clicked:
$('html').on('click', '.band_box_container', function() {
alert($(this).attr('id'));
});
However, every time this function alerts "undefined".
When I use:
$('html').on('click', '.band_box_container', function() {
alert($(this).html());
});
I correctly get the html of the element, including the id.
Why is my jquery selector not picking up the django generated template tag elements.attributes?

Looks like your Ids do not match.
band_box_inner vers band_box_container

Infinite scroll for static page with jQuery

I have coded a paginated comment section,
even if you never used symfony2 its very simple to understand
It just loops through 100 comments and then uses a "next" button for the next comment page to show.
{% for comment in pagination %}
<div class="comment-container">
<div class="bubble">
<div class="cmt-avatar"></div>
{{ comment.text }}
</div>
</div>
{% endfor %}
this method is working perfectly so far.
But it makes the design look terrible, specially with a giant scroll bar on the right side of the page.
What I'd need is a way to make it 'look' like the comment-container is being loaded while the user scrolls.It's obviously just a static page, it just needs to look like its infinite scroll.
What I've tried so far:
I found this on this page, it didn't work though, no errors, but does nothing.
{% for comment in pagination %}
<div class="scrollable-data'">
<div class="comment-container">
<div class="bubble">
<div class="cmt-avatar"></div>
{{ comment.text }}
</div>
</div>
</div>
{% endfor %}
... script
var $doc=$(document);
var $win=$(window);
// hide everything that is out of bound
$('.scrollable-data').filter(function(index){
return ($(this).scrollTop() > $doc.height());
}).hide();
var DATA_INCREMENT=5;
$(window).scroll(function(){
// test if at the bottom
if ($doc.height()-$win.height()-$(this).scrollTop() == 0) {
// show the <DATA_INCREMENT> (5) next hidden data tags
$('.scrollable-data:hidden:lt('+DATA_INCREMENT+')').show();
}
});

Your routine is script intricated.
This is how I would implement this:
A routine that shows only elmenets contained "within the current scrollbar" (sorry, no better words for it):
function rescroll(){
//show all
$('.scrollable-data').show();
// hide everything that is out of bound
$('.scrollable-data').filter(function(index){
console.log($(this).position().top, $(window).height()+$(window).scrollTop());
return ($(this).position().top > $(window).height()+$(window).scrollTop());
}).hide();
}
Then call this routine every time the user perform a scroll:
$(window).scroll(function(){
rescroll();
});
Then call also rescroll() at the page loading.
Working example: http://jsfiddle.net/5WtTU/
Some considerations:
Usually infinite scroll works so that, when the user scrolls 'till a certain comment, then, if he/she scrolls back these comments are not hidden again!
So you should save somewhere the maximum of the scroll of a user, and always hide untill this point. In this way you wont re-hide things if the user scrolls up.

jquery toggle in a for loop using Jinga2 template

I am trying to hide/show a div that is within a for loop using jquery's toggle. When I click the button to toggle, the div slides out for a quick moment, but then hides again. When this happens, the toggle button almost seems disabled for the next click...then works again with the same problematic div display. I used the {{email.sender}} template value because when I clicked on the toggle button, all the items in the list would be activated instead of just that one. The below code is inserted into a tab with Jquery (this part is working). Thanks for any advice you can give on this-
<div id="email_received_list">
{% for email in email_received_list %}
<p>
<input type="button" id="{{email.sender}}" value="Show Message"> {{email.sender}}: {{ email.subject }}
</p>
<script>
$(document).ready(function(){
$('#{{email.sender}}').click(function() {
$('.{{email.sender}}').slideToggle('fast');
return false;
});
});
</script>
<div class="{{email.sender}}" style="display:none; background-color:#4CF;width:100%;height:100%;"></div>
{% else %}
(You have not received any messages yet.)
{% endfor %}

Ok, I feel stupid on this one - but once I added some actual content to the div (not just trying to color a square) it worked fine. I guess since it was in a loop, it was trying to size the div match the content. When there was no content, the div just hid itself again. If you know something different on this, please let me know -thanks.

Why is this "this + sibling" call failing?

I am having some trouble with what I thought should be a simple sibling selector in jQuery.
The problem generates no error message, of course, it simply fails to select properly. Inside a document(ready) function() I have the following simple code to first hide all of the popups, then wait for a person to click an image which will show the sibling pop-up:
//hide all the charm pop ups
$(".charm_pop").hide();
$(".charm > img").click(function() {
$("this + .charm_pop").show();
})
My HTML is being generated by a Django for loop, so there will be many iterations of this simple image/popup combo markup:
{% for ch in charms %}
<div class="charm">
<img src="{{ MEDIA_URL }}images/charms/{{ ch.image }}" alt="{{ ch.name }}" />
<div class="charm_pop">
<p id="charm_name">{{ ch.name }}</p>
<p id="charm_desc">{{ ch.description }}</p>
<p id="charm_price">${{ ch.price }}</p>
<form method="post" action="." class="cart">{% csrf_token %}
<p>**some inputs and what not</p>
</form>
</div>
</div>
{% endfor %}
As you can see, I simply wait for an image to be clicked, and when it is I select it's sibling and reveal that corresponding pop-up. Yet when I click an image, nothing happens. If I replace $("this + .charm_pop").show(); with $(".charm_pop").show(); it does indeed show all of the pop-ups, so the click function is working, the selector is just wonky.
Am I misunderstanding how this is working in this context?

When writing jQuery selectors the string "this" simply means "an HTML element <this>", so $("this + .charm_pop") will certainly not work.
Concatenating the string representation of an object with something else is also not meaningful here, so $(this + " .charm_pop") will also not work.
You should be using appropriate traversal functions instead, starting from $(this):
$(this).next(".charm_pop").show();
There is a number of different ways to go from the clicked image to its sibling .charm_pop, but .next() is fastest and also semantically identical to the adjacent-sibling selector + that you are trying to utilize.

Your code is basically using the + css selector
$("this + .charm_pop").show();
element+.class which says "Selects all the .class elements that are placed immediately after element
In your case it is looking for an element named this. I doubt you have any elements with the tag name of <this>.
Your code needs to be
$(this).siblings(".charm_pop").show();
or
$(this).next(".charm_pop").show();

You can do this :
$(this).find(".charm_pop").show();