Develop Reference

Display same div multiple times based upon dynamically generated checkbox

I am currently tackling some JQuery and Javascript and I have encountered a small problem that I can't for the life of me figure out how to solve.
I have a form which dynamically loads information from a json file which re-uses a "wpTemplate" and populates a select list. This form compromises something of the following;
<div class="wp" id="wpTemplate" >
<input type="checkbox" id="wpCheck" name="" class="wp" value="">
<label id="wpLabel" class="wpLabel"></label>
<div class="uc" id="uc">
<select class="ucSelect" id="ucSelect" name="case" multiple>
<option id="option" class="option"></option>
</select>
</div>
</div>
In essence, there could be multiple div "wpTemplate". My aim is to somehow have the ability to select either one or many "wpCheck" checkbox and for the "uc" div to display depending on the specific checkbox being selected.
I tried adding style="display: none;" to the "uc" class and a simple if-else statement with the show/hide functionality but to no avail.
$('.wp').each(function() {
if($(this).is(":checked")) {
$('.uc').show();
} else {
$('.uc').hide();
}
});
I'm new to JQuery so any help or alternative ways would be much appreciative.

How about:
$('.wpCheck').on('change', function () {
var $uc = $(this).closest('.wpTemplate').find('.uc')
if ($(this).prop('checked')) {
$uc.show()
} else {
$uc.hide()
}
})
Here's a working fiddle

Here is another way:
$( document ).ready(function() {
$('input.wp').change(function() {
var $this = $(this);
if ($this.is(":checked"))
{
$this.siblings('div.uc').show();
}
else
{
$this.siblings('div.uc').hide();
}
});
});
fiddle

back button callback function failing, or not firing, under particular condition

I'm trying to manipulate the anchor element (#backButton), so that it fires a JS function on click. It works as it should except in the instance of clicking through the following element chain: #openShow > #openDetailsFromShow > #backButton > #backButton
On this final #backButton click the expected JS function ( closeShowProvider() ) does not fire, but instead #backButton reverts to its default behaviour.
I've tried searching for a solution to this, but I'm afraid my understanding of the issue is limiting my ability to resolve it. I suspect it may have something to do with closures, but I could be very wrong...
JSFiddle of the (not quite) working code https://jsfiddle.net/timothyvictor/u1dv83a1/2/
I'm really stuck on this and would very grateful for any help and/or pointers. Many thanks in advance,
TV
HTML:
<div class="container">
<a id="backButton" href="#link">Back Button</a>
<input type="text" id="link">
<br>
<button onclick="openShowProvider('id', 'searchProviders.php')" id="openShow">Open Show Provider</button>
<br>
<button onclick="openProviderDetails('NEW', 'searchProviders.php')" id="openDetailsDirect">Open Provider Details Direct</button>
<br>
<button onclick="openProviderDetails('NEW', 'showProvider.php')" style="display:none" id="openDetailsFromShow"> Open Provider Details from Show Provider</button>
<br>
<div id="showProvider" style="display: none;">
<h1 class="text-center">Show Provider is OPEN!!!!</h1>
</div>
<div class="alert alert-success" id="providerDetails" style="display: none;">
<h1 class="text-center">Provider Details is OPEN!!!!</h1>
</div>
Here is the JS:
function backButton (backFunc, param) {
$('#backButton').unbind().click(function(e){ //using unblind to clear backFunc before binding new event?
e.preventDefault();
backFunc(param);
$(this).unbind('click');
});
}
function openShowProvider(id, return_page){
if (return_page === 'searchProviders.php') {
$('#showProvider, #openDetailsFromShow').show();
$('#openShow, #openDetailsDirect').hide();
}
backButton(closeShowProvider, return_page);
}
function openProviderDetails(id, return_page) {
if (return_page === 'searchProviders.php') {
$('#openShow, #openDetailsDirect').hide();
}
if (return_page === 'showProvider.php') {
$('#showProvider, #openDetailsFromShow').hide();
}
$('#providerDetails').show();
backButton(closeProviderDetails, return_page);
}
function closeShowProvider(return_page){
if (return_page === 'searchProviders.php' || return_page === 'providerDetails.php'){
$('#showProvider, #openDetailsFromShow').hide();
$('#openShow, #openDetailsDirect').show();
}
}
function closeProviderDetails(return_page) {
$('#providerDetails').hide();
if (return_page === 'searchProviders.php'){
$('#openShow, #openDetailsDirect').show();
}
if (return_page === 'showProvider.php') {
$('#showProvider, #openDetailsFromShow').show();
backButton(closeShowProvider, 'providerDetails.php');
}
}

Hi Hope it will solve your problem, there was some error while attaching and removing the click event
jsfiddle.net/u1dv83a1/3/
In this i have used the same code what you have used, but just changed the backButton pressed function in that

Dynamic elements with the same class

I'm having some issues regarding dynamically created elements. I'm trying to creating a page for my site which will display a list of users(which has been passed into my view from the controller). For each user i've created a div holder, and inside each div I have two h3 tags displaying both the ID and Name of the user. Each user div also contains a button, which allows a user to be hidden, or shown.
<div class="single-user" id="#user.Hidden.ToString()">
<h3>ID: #user.Id</h3>
<h3>Name: #user.Forename #user.Surname</h3>
<span><input type="submit" class="sub-btn" /></span>
</div>
along with then 'name' and 'id' property I also pass in a 'hidden bool property. This is used to check if a user has been hidden. The problem i'm having is that because the elements have been created dynamically, they all share the same classe's and id's, so i'm unable to check if a user is hidden or not. I looked online and found a possible solutions, however, it's still not working. Here is my javascript code.
<script type="text/javascript">
$('.single-user').on('click', '.sub-btn', function () {
if ($('.single-user').has('#True')) {
console.log("true");
}
else {
console.log("false");
}
});
</script>
Any help would be greatly appreciated.

<div class="single-user" data-visible="#user.Hidden.ToString()">
<h3>ID: #user.Id</h3>
<h3>Name: #user.Forename #user.Surname</h3>
<span><input type="submit" class="sub-btn" /></span>
</div>
<script type="text/javascript">
$(document).on('click', '.sub-btn', function () {
if ($(this).closest('.single-user').attr('data-visible')=="True") {
console.log("true");
}
else {
console.log("false");
}
});
</script>

Smooth Transition on fieldset using radio button selection

I have searched all over the web, but I can't seem to find a solution that suits my needs. I'm fairly new to jquery/javascript, but I think what I'm trying to do is pretty simple.
I have 2 radio buttons that the user can select, based on the selection, additional input fields (contained in a fieldset) are displayed. This works fine, but I would like to "pretty it up" by making it appear with a smooth transition.
Currently, this is what I'm doing
HTML:
<label for='student_type'>Freshman or Transfer Student</label><br />
<input type="radio" name="student_type" value="freshman" onclick="show_hs();">Freshman
<input type="radio" name="student_type" value="transfer" onclick="show_college();">Transfer Student<br />
<fieldset id="hs_fields" style="display: none;">
<!--MY INPUTS-->
</fieldset>
<fieldset id="college_fields" style="display: none;">
<!--MY INPUTS-->
</fieldset>
JavaScript:
<script>
function show_hs()
{
document.getElementById('hs_fields').style.display = 'block';
hide_college();
}
function hide_hs()
{
document.getElementById('hs_fields').style.display = 'none';
}
function show_college()
{
document.getElementById('college_fields').style.display = 'block';
hide_hs();
}
function hide_college()
{
document.getElementById('college_fields').style.display = 'none';
}
</script>
I will be very happy to elaborate on anything that isn't clear.
Your time is much appreciated, Thanks!

Perhaps you're looking for something like jQuery UI's effects?
http://jqueryui.com/show/
Example:
$("#hs_fields").show("blind", {}, 500);

input:radio click function isn't triggering in IE / Firefox

I have a form with multiple inputs / radio buttons.
I also have a series of Yes & No radio buttons. When the "Yes" radio button is checked, I have some data slide down beneath.
HTML:
<div class="item seperator first clearfix">
<label>test</label>
<div class="radioWrap">
<label class="yes">
<input class="homepageContent" name="homepageContent" type="radio" value="yes" />
</label>
<label class="no">
<input class="homepageContent" name="homepageContent" type="radio" value="no" checked />
</label>
</div>
</div>
<div class="extrasInner">
<div class="item clearfix">
<label for="theContent">Your Content:</label>
<textarea id="theContent" name="theContent"></textarea>
</div>
</div>
<div class="extrasOuter hide clearfix">
Make Changes
<span>Click "Make Changes" to update.</span>
</div>
The jQuery:
$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
var value = $(this).val();
if (value == 'yes') {
$(this).parent().parent().parent().next().slideDown();
$(this).parent().parent().parent().next().next().slideDown();
} else {
$(this).parent().parent().parent().next().slideUp();
$(this).parent().parent().parent().next().next().slideUp();
}
});
Question 1) This works absolutely fine in Google Chrome, but not in Firefox and IE. It doesn't seem to recognise the click function?
Solved: I had a function within one of my files that removes the value from input fields on focus and this was stripping the value of the radio buttons as well in IE / Firefox (but not chrome!).
Question 2) Is my DOM traversing for the slideUp / slideDown an acceptable way of achieving what I'm trying to do? Are there any disadvantages to how I'm doing it and can it be improved?

Answer to #1
As Anthony Grist pointed out, there doesn't seem to be an issue with the click function.
Answer to #2
Your DOM traversal seem a bit unnecessary. In fact, your DOM structure is in need of rearrangement.
Using a checkbox instead of radio buttons. A checkbox only accepts two values: true or false, or in your case, yes or no. It seems more suitable.
Encapsulate your extras inner and extras outer divs inside your item div instead of having it next to the checkbox. This way, you make it easier to traverse within the item.
Also, you should read up on the different types of traverse functions JQuery has:
.parent() / .parents()
.children()
.closest()
.next()
.prev()
.siblings()
.find()
and many more.
Knowing all of these traverse functions, you'll most likely never ever do parent().parent().parent()... again. :)
Here's a JSFiddle example | Code
HTML
<ul>
<li class='item'>
<label>
<input class="homepageContent" name="homepageContent" type="checkbox" value="yes" />
Item 1
</label>
<div class='extras'>
<div class='inner'>
<label>
Your Content:<textarea name="content"></textarea>
</label>
</div>
<div class='outer'>
Make Changes
<span>Click "Make Changes" to update.</span>
</div>
</div>
</li>
</ul>
Javascript
$("input:checkbox").click(function() {
var $this = $(this),
$item = $(this).closest(".item");
if($this.is(':checked')){
$(".extras", $item).slideDown();
}else{
$(".extras", $item).slideUp();
}
});
CSS
.extras{
display: none;
}

Value of the radio button will always be same, no matter it is checked or not. If you want to know the particular radio button is checked or not then use this code. Based on the status of the radio button do your stuff.
var value = $(this).attr('checked')

That is working for me in FF (jsfiddle), although the DOM looks a little convoluted (I'm guessing because it's missing a lot of your other CSS/resources).
I think you can simplify the jQuery selectors a lot. Generally, using simple ID or class selectors will make the your page much more performant (and simpler!)
$('.homepageContent').click(function() {
var value = $(this).val();
if (value == 'yes') {
$('.extrasInner').slideDown();
$('.extrasOuter').slideDown();
} else {
$('.extrasInner').slideUp();
$('.extrasOuter').slideUp();
}
});
Hopefully doing something like this makes it work cross browser better too.

try this way
$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
var value = $(this).val();
if (value == 'yes') {
$(this).parents('.seperator').next().slideDown();
$(this).parents('.seperator').next().next().slideDown();
} else {
$(this).parents('.seperator').next().slideUp();
$(this).parents('.seperator').next().next().slideUp();
}
});
EDIT
​
and also a point
wrap your code inside
$(document).ready(function(){});
like this
$(document).ready(function(){
$("input:radio[name=homepageContent], input:radio[name=addSocialIcons], input:radio[name=addTracking]").click(function() {
var value = $(this).val();
if (value == 'yes') {
$(this).parents('.seperator').next().slideDown();
$(this).parents('.seperator').next().next().slideDown();
} else {
$(this).parents('.seperator').next().slideUp();
$(this).parents('.seperator').next().next().slideUp();
}
});
});