jquery toggle in a for loop using Jinga2 template - javascript

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.

Related

django with basic Jquery not responding

I have a django project which I implemented a jquery function to toggle a link but it is not working. the link does not display the hidden contect i want it to display on toggle. my code is written below.
REP
<div class="comment-reply" style="display: None;">
{% for child_comment in comment.children%}
{{ child_comment.timestamp|timesince }
{% endfor %}
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".comment-reply-btn").click(function(event){
event.preventDefault();
$(this).parent().next("comment-reply").fadeToggle();
})
})
</script>
You're navigating to the wrong DOM element. next() finds the next matching sibling, but you've put parent() first - so you are looking for the next sibling of that parent. Drop that parent call.
$(this).next("comment-reply").fadeToggle();

load the div ng-click

I have the div section which is used to show the form in reply comment
<div class="box-body showmycomments"></div>
<div class="box-footer showmycomments"></div>
I have reply comment anchor tag in another div
<a ng-click="add(data)" style="cursor:pointer;" > Reply Comments</a>
Now I want to load 'showmycomments' div for each and every reply comment on ng-click.
My module has multiple comments with reply comment option which is in ng-repeat I need to load the div 'showmycomment' for each and every replay comment.
comment is displayed as shown in image.If i click Show comments as it show the form as shown in 2nd image.I want to load the form bellow reply comment if I click the anchor tag.
image 2
In my opinion your approach is wrong.
Instead of creating a div and duplicating it (possible though messy), you should use ng-include to inject a whole html wherever you need.
This would look like this:
index.html (or the html you have the ng-repeat on
<div ng-repeat="comment in comments">
<div ng-include="'comment.html'"></div>
</div>
comment.html - here you can use the comment from above.
<div class="comment-container">
{{ comment.text }}
</div>
So for every item, you duplicate the comment.html and fill it with whatever you want.

Id=' ' within id=' ' with javascript and onmouseover="this.click();" function

I am a beginner in Javascript and I am not absolutely sure how to put together the function what I try to achieve.
So, I have a HTML5 page and I must stick to my ID structure as different functions are tied to IDs.
My problem is I have an id within an id (It must stay an ID, it cannot be swapped with class)
E.G.
<div id="outterid">
CLICK ME
<div id="innerid">
<p>Hello World</p>
</div>
</div
Where, <div id=outterid"> pops up as a tooltip (My other javascript takes care of that function. And within that the link CLICK ME and the hidden <div id=innerid">.
So when you click CLICK ME, <div id=innerid">becomes visible. (Note: <div id="outterid"> is visible, while you are clicking)
So I need to achieve the href="#innerid" through javascript, because at the moment simply href=""
E.G.
CLICK ME
does not work, because the #innerid within the #outterid.
Also, the 'CLICK ME' link has to be triggered by onmouseover="this.click();". So, the link clicked when the mouse hovers over it.
I hope I managed to clearly explain what is my problem and what result I am looking for.
Thanks for your help in advance.
Are you talking here about scrolling to the relevant div (e.g. #innerid)? In which case I don't think your problem has anything to do with javascript, but rather you've missed the a off of <href="#innerid">CLICK ME</a>... I've tried replicating your problem in JSFiddle and with CLICK ME it scrolls to the correct div regardless of if it's in a nested outer div or not.
It's not clear exactly what you're after here but i've had a shot. This example will display the #innerid div when you click on the anchor tag. Hopefully this will help you.
function myFunction(href) {
var id = href.split('#')[1];
document.getElementById(id).style.display = 'block';
}
#innerid { display:none; }
<a onclick="myFunction(this.href)" href="#innerid">CLICK ME</a>
<div id="outterid">
<div id="innerid">
<p>Hello World</p>
</div>
</div

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.

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();

Categories

Resources