I am using a database to create divs and then naming them from a field in a database.
Within this div is a "delete" link that I'd like to be able to create a div below the original div with a message such as "are you sure you want to delete this?"
But my issue comes to when the database has to generate more than one of these original divs, meaning that the "delete" link will be used more than once in different places or the different divs.
I am unsure on how to create a Javascript/jQuery script where it would:
1. check what the ID of the parent div is (div#parent -> ul -> li -> a).
2. generate a new div below the parent div (not inside).
3. once an option is selected, remove the generated div.
Heres an example of the layout that I'd like to work with:
link to image
As you can see, the generated jQuery div would be outside of the parent div it also has the id of the parent div with "_delete" added onto the end. The functions are there as an example for naming the functions...
Would this be possible?
EDIT - I have gotten it somewhat working, now the issue is when it creates the extra div it doesn't stop you from making more than one... How can I limit this?
What I have done so far
function action() {
var visable = false;
if(visable==false) {
$("#foo").append('
<div id="action_foo" class="action-warn center">
Are you sure you want to delete "<span>foo</span>"?
Yes / No
</div>
')
visable = true;
} else if(visable==true) {}
}
Yes it is possible.
$('#foo_delete').sibling('#parent') will allow you to select "parent".
http://api.jquery.com/siblings/
Try using insertAfter.
http://api.jquery.com/insertafter/
You can remove generated div also with sibling.
Try calling $('#parent').sibling('#foo_delete').remove() on parent's delete anchor.
Try this:
$(document).ready(function(){
$('#foo ul li.right').click(function(){
var _parent = $(this).parent(), // gets immediate parent which is ul
_gparent = _parent.parent(); // gets grandparent which is #foo
$('<div id="foo_delete" class="action-warn center">-Delete Warning Text-</div>').insertAfter(_gparent); // insertAfter(); puts the content right after _gparent.
});
$('#foo_delete a').click(function(){
$('#foo_delete').remove();
});
});
Related
So I have a comment system with one deep nesting. I'm using bootstraps javascript file, but only the collapse and animate css styling. So I don't use nav-tab and such
A button exists on all comments that have a reply. The number 1 refers to the ID of the parent (replies of comment with the id of 1).
<a class="btn" type="button" data-toggle="collapse" href="#replies_1">X replies</a>
Then I have a div, that is the container for all children of the parent comment
<div class="collapse" id="replies_1">
When I click on the anchor, as you would guess, this div gets appended the class in and transitions nicely to open and show the comments children.
I have tried one thing that worked, except for the scrolling part
$(document).ready(function(){
if(window.location.hash != "") {
$('a[href="' + window.location.hash + '"]').click();
}
});
This opens up the correct tab, which is great. However, since the tab has the class collapse which has the css rule display:none; and adds the inline rule display: none;
Now, my script doesn't manage to scroll to the correct location, because the collapsed element has those rules.
Though, I don't really need to scroll to the replies, but the parent.
So what I really need is to scroll to another anchor id that has the same suffix ID, but a different prefix, but still open the replies tab as I do with the code above
Since the children are inside a tab with an id of replies_{id}, I could scroll to the parent which is a ul item with the id of comment_{id}
The ul looks like this: <ul class="comment__item" id="comment_{id}">
Try this way,
$(document).ready(function(){
if(window.location.hash != "") {
var end_id = window.location.hash.split('__')[1];
$("html,body").animate({scrollTop: $("[id$='__"+ end_id +"'").offset().top},"slow");
}
});
I think this will work, If I understood your question correctly.
Actually you can get the hashtag from that url and find the id from your hash #replies__{id} then collect that {id} from it and prefix the required text of another id #comment__{id} so you are ready to perform the same.
for example
//consider this event after hash is collected
hashValue = "replies__1232" //assuming the default value
oldId = hashValue.split("__")[1] // collect id
//now append id to required prefix
$("#comment__" + oldId).click(function(){
//required stuff here
}) ;
I'm using Facebook social plugin and everything works fine. I want to hide the div of my "chat bubble"
if
<span class="fb-comments-count" data-href="[article URL]"></span>
is zero for each article loaded on my homepage and ofcourse keep the not zero ones.
Also additional information, I'm using a "show more" button to load other articles using ajax as well.
I already tried using http://graph.facebook.com/ to get the information whether the address contains comments and it worked, but because I needed to ping http://graph.facebook.com/ for each article, my page loading times was abysmal so I removed that.
Create a function iterate over span having "fb-comments-count" class. And find if the text of this span is zero or not. If it's zero, get the parent of this class(Article DIV) and hide the bubble DIV using hide() method.
https://api.jquery.com/each/
//for iterating .fb-comments-count
http://api.jquery.com/text/
//for getting get count from span
https://api.jquery.com/parent/
//to get the parent DIV by class or ID of span
http://api.jquery.com/hide/
//to hide the perticular div by class or ID.
Call this function every time you fetch the articles using AJAX.
e.g.
function yourCustomFunction() {
$('span.fb-comments-count').each(function(index) {
var count=$(this).text();
if(count==0) {
var parentDiv=$(this).parent('article.yourParentDivClass');
parentDiv.find('.bubbleDiv').hide();
}
});
}
The span is given the class 'fb_comments_count_zero' if there are no comments, so you can set that class to be display:none in your styleshet
I have a div that looks like this:
<td id="monday">
<p class="outter">whatever here</p>
<p class="hidden" style="display:none">Some content I want to get</p>
</td>
Now the problem is - the td id will change (this is just one of many).
So what I'm trying to do, is when a user clicks on the .outter (it'll always be called outter), I want to find the td id, in order to then get access to the p class (which will always be 'hidden').
So I've tried this (document.body is to get round a dynamic loading problem I had):
$(document.body).on('click', '.outter', function() {
var info = $(this).parent("td").$(".hidden").text();
$("#rightBox").css("width", "200px");
$("#rightBox").css("background", "#f0f0f0");
$("#rightBox").empty();
$("#rightBox").append(info);
});
The issue I am having is in the very first line, getting the variable.
I want to say this particular .outter class, find it's parent, then find the hidden class within it. Then get the text within that hidden class. Then take that variable and dump it into #rightBox;
Can anybody help?
The line var info = $(this).parent("td").$(".hidden").text(); throws an error, you should use find or children method, as the target element is a next direct sibling of the clicked element, you can use next method, you don't need the ID of the parent element.
$(document.body).on('click', '.outter', function() {
// var info = $(this).closest('td').find('.hidden').text();
var info = $(this).next('.hidden').text();
$("#rightBox").css({"width": "200px", "background": "#f0f0f0"})
.html(info);
});
Note that you can also create a class and use addClass method instead of css method, this makes your code a little cleaner.
You can do like this:
$(document.body).on('click', '.outter', function() {
var info = $(this).next().text();
$("#rightBox").css("width", "200px");
$("#rightBox").css("background", "#f0f0f0");
$("#rightBox").empty();
$("#rightBox").append(info);
});
Demo: http://jsfiddle.net/eMzcx/
Hello I have some HTML that looks like this,
<div id="music_interests">
<ul class="interests">
<li >
<div class="interest inline">
<img src=""/>
<div class="interest_popup">
1 users have this interest.
Remove interest </div>
</div>
</li>
</ul>
When users clicks the remove button I need to select the parent div (in this case music_interests). How would I go about that?
I have tried doing the following,
$(this).parent().parent().parent().parent() but is there a more elegant way?
To complicate things futher I will not actually no the parents ID when in the app as the remove button occurs in 4 or 5 different areas on the page.
you should use closest()
$(this).closest('div#music_interests');
//find the nearest div with id "music_interests"
//if i omitted the id, it retrieves the div with class "interest_popup"
or parents()
$(this).parents('div:eq(1)');
//get ALL the ancestor divs (until it reaches root tag)
//since music_interests is just 2 levels up, use :eq(1)
If the ID of the DIV you want to remove is static you should only use the ID selector (not something like $("div#music_interests")) as the ID selector is directly mapped to the DOM function document.getElementsById which is pretty fast:
$("#music_interests").remove();
If the ID isn't static you could get the UL just like that:
$(function(){ //execute when page has been loaded
$(".remove").click(function(){ //attach click handler
var removeDiv = $(this).closest("ul").parent().remove(); //get next UL -> DIV is its parent
return false; //stop further processing of "click" event
});
});
if remove button always exist in ul tag (in all your 4 or 5 different areas) then you can use the following code.
$(this).closest("ul").parent()
in this case u don't even need to give id to DIV tags
i want to read all links in ".vm-video-title"-divs and post them each in the same div. So i made this script:
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("div.vm-video-title>a").text());//add to div the link
});
but i have the problem that it reads ALL the links of all divs and put them in one div.
example:
<div class="vm-video-title">Text1</div>
<div class="vm-video-title">Text2</div>
<div class="vm-video-title">Text3</div>
output:
Text1Text1Text2Text3
Text2Text1Text2Text3
Text3Text1Text2Text3
wanted output:
Text1Text1
Text2Text2
Text3Text3
You can select the <a> elements directly, and use the after()[docs] method to append the content of each after each one respectively.
$("div.vm-video-title > a").after(function() { return $(this).text(); });
This doesn't do a "destroy then recreate" of the existing elements like the html()[docs] method will.
Working example: http://jsfiddle.net/CCr9C/
This should do the job for you,
you need to find the div inside current element in the loop (el).
$('.vm-video-title').each(function(i, el) {
el = $(el);
el.html(el.html()+el.find("a").text());
});
in your code you are adding text() of all matching "a" tags in your divs (i.e. Text1Text2Text3)
You were almost there. Instead of : $("div.vm-video-title").text(), which gives you text inside any div with class vm-video-title, you need to find a tag inside current div and get text from it. We pass this as context for selecting a inside current div jQuery( selector, [context] )
$('.vm-video-title').each(function(i) {//all divs
$(this).html($(this).html()+$("a", this).text());
});