We Keep Coding

Auto click on child element with random ID

I'm a complete javascript noob and I'm trying to automatically click a button inside a div.
<div id="KB_3383878" class="td button-visible">
<button id="KB_1532704" class="inputsubmit">Search</button>
</div>
The numbers after KB_ are changed randomly each time the button is clicked. I am not able to click based off the inputsubmit class as there are 3 identical buttons, of which 2 are hidden and they rotate which one is visible after x clicks, and the inputsubmit class is also rotated between inputsubmit and enterclass.
So I have to find the child element of the div with the button-visible class.
The JS script I've tried using so far has no effect what so ever:
window.onload = function(){
var parent = document.getElementsByClassName('button-visible');
var children = parent.children[0];
setInterval(function(){
parent.button.click();
},1000);
};

It seems you are referring to the wrong var. parent.button.click() should be referring to children (which I would name firstChild or something).

Hiding and showing divs when the amount of divs is unknown

I have a page with multiple posts divs and have a hidden comment form for each post. What is the best way to utilize JQuery/JavaScript to display only the comment form for that post after a button or link is clicked.
<div class="post">
<p>Some Content</p>
Comment
<div class="commentForm" style="display:none"></div>
<div>

$('.commentButton').on('click', function(){
$(this).next().slideToggle();
});
Delegate the click event to the commentButton which should toggle the commentForm. Inside of the event, move to the next element, and perform a slideToggle(). In this way, clicking on the comment button will both show and hide only the next one.
Further to the point, if you wish to hide all other commentForms so only 1 is open at a time, you can simply add:
$('.commentForm').hide();
before you perform the .slideToggle().

put id in your div
<div class="commentForm" id="myID" style="display:none"></div>
now in script
if(someCondition) {
document.getElementById('myID').style.display = 'hidden';
}else {
document.getElementById('myID').style.display = 'visible';
}

next() might not always be working because many times an element is not after the button (that triggers the action) itself.
If that is the case you can do the following:
$('.commentButton').on('click', function(){
$(this).parents('.post:eq(0)').find('.commentForm(0)').show();
// or: fadeIn(500); / fadeOut(500);
// or: slideToggle(); / slideUp(); / slideDown();
// or: css('display, 'block'); / none
});
This will find it's first parent with the class post and than the element inside it with the class commentForm even if its inside another element or in another etc.
In the example of yours you dont nescesaraly need it, but think of just selecting elements that do not have any classes or IDs :)

hide parent div if 2 child divs are present?

I have a parent div and 2 nested child divs. I want to hide the first child div and the parent div when the second child div doesn't contain any content.I was wondering how this could be done?
The reason I have 2 child divs is because I am creating a responsive website, so one is to fully extend the content, the second one is to centre the content in the middle of the page and the third is to house the content that is contained within.
<div id="portfolio"><!--portfolio-->
<div id="portfolio-works"><!--portfolio-works-->
<div class="portfolio-works-container"><!--portfolio-works-container-->
</div><!--/portfolio-works-container-->
</div><!--/portfolio-works-->
</div><!--/portfoio-->

Try this:
$('.portfolio-works-container').each(function() {
if($(this).find('.portfolio-img').children().length > 0) {
$(this).hide();
}
});

You can check if the element is completely empty using empty selector, but empty means no white space at all. If there's a chance that there will be white space, then you can use $.trim() and check the length of the content; then get the its sibling and hide it.
Demo code:
$('.portfolio-img:empty').siblings('.portfolio-text').hide();
if (!$.trim( $('.portfolio-img').html() ).length){
$('.portfolio-img').siblings('.portfolio-text').hide();
}
Demo: http://jsfiddle.net/Sf8aH/
It will be easier if you can set display:none on the element instead of check its content.

if that will be your HTML structure then it's somewhat easy to achieve:
jQuery(document).ready(function(){
var divGroup = jQuery('.portfolio-works-container > div:nth-child(2)');
if( divGroup.html() == '' ) {
divGroup.parent().toggle();
}
});
jsFiddle Example: http://jsfiddle.net/laelitenetwork/88DMt/2/
Cheers.

Use JQuery to listen for all clicks on the html body Except a specific div and its children

I am trying to use a jQuery listener to listen for a users clicks on the html body and perform a specific function if anywhere on the body has been clicked except for a specific div and the children within that div.
The idea is that the div is a popup type element and instead of having to have a close button that the user can click, they should just be able to click anywhere on the page besides that div and it will automatically close.
I have been using this listener:
var initialClick = false;
$('body').on('click.addPhoneListeners', function(event) {
var target = EventUtility.getTarget(event);
if(initialClick) {
if(target.parentNode.id != clone.id && target.id != '') {
finish();
};
}
initialClick = true;
});
Which listens for all clicks on the body and unless the click comes from within the element I want the user to be able to interact with, it closes. Unfortunately this only works with a div that has only one level of children. As soon as I start getting multiple hierarchies such as this:
<div id="addressContainer">
<div id="address" class="hidden row">
<div class="row">
<div id="address.primary" class="hidden">P</div>
<div id="address.type"></div>
<div id="address.street"></div>
<div id="address.editButton" class="hidden"><a id="addressEditButton">Edit</a></div>
<div id="address.deleteButton" class="hidden"><a id="addressDeleteButton">Delete</a></div>
</div>
<div class="row">
<div id="address.city"></div>
<div id="address.state"></div>
<div id="address.zip"></div>
</div>
<input type="hidden" id="address.id"></input>
</div>
</div>
The target.parentNode.id gives me the objects parent element as opposed to the addressContainer id and thus does not work. Is use the top level parent from within nested elements? Other elements will be using this same code, so it has to work on both divs with just one level and div's with multiple.
UPDATE: Found a few excellent solutions, thanks guys. I do however have one other question. Refer to my code above where I set an initialClick boolean to false, then set it to true. I am doing this because for some reason if I don't, when I go to add the popup div, the initial click from the button used to set that popup fires the listener and closes the popup before I have a chance to do anything. This has been my solution around the problem, but is that the only way? Or am I just setting the listener slightly incorrect?

I usually do something like this:
$(document).click(function(e) {
// hide popup
});
$('#popup_div').click(function(e) {
e.stopPropagation();
});
That way the clicks from your popup never propagate to the document, so the close function never fires.

Replace
if(target.parentNode.id != clone.id)
with
if ($(target).closest("#" + clone.id).length === 0)
(I left the second clause alone since it didn't seem related to your question.)
This tries to find the closest ancestor with ID equal to clone.id. If none is found, an empty jQuery object is returned (i.e. one with length === 0), which is what we test for.
Incidentally: jQuery normalizes event.target, so you can just use that instead of whatever custom monstrosity EventUtility.getTarget(event) embodies.

Easiest way to dyanmically load a DIV on button click?

I have a relatively simple question here.
What I require is this; I need to have a page with 5 buttons at the top and a DIV beneath them (initially hidden). When a button is clicked, it loads content into the DIV (in the form of another DIV)
eg.
[Button 1] [Button 2] [Button 3] [Button 4] [Button 5] //5 buttons or links
<div id="content">
// area for content to be loaded
</div>
<div id="content1">
//could be a table or image
</div>
<div id="content2">
//could be a table or image
</div>
<div id="content3">
//could be a table or image
</div>
<div id="content4">
//could be a table or image
</div>
<div id="content5">
//could be a table or image
</div>
In the above example, when the user loads the page they see 5 buttons. If they press button 5, it loads the "content5" DIV inside of the "content" DIV eg.
<div id="content">
<div id="content5">
</div>
</div>
If another button is selected it loads it's content.
Can be achieved with jQuery or simple JavaScript.
Many thanks

You need to bind a click handler on all of the buttons. Smart way in this particular example would be, to use the index of the elements to determine which div belongs to a button.
$('button').bind('click', function() {
$('div#content').html($('div#content' + ($(this).index()+1)).html());
});
Demo: http://www.jsfiddle.net/8f8jt/
This will add an click event handler to all <button> nodes. On click, it looks for the index of the current clicked button (.index()help) and uses this value to query for the accordant <div> elements id. Once found, use .html()help to get and set the value.

You also can use jQueryUI tabs, but it requires additional script.

Try this
$('#button1').click(function() {
$("#content").html(("#content1").html());
});
$('#button2').click(function() {
$("#content").html(("#content2").html());
});
// etc
This way clears any existing content and copies the correct div into the main #content div.