Display same div multiple times based upon dynamically generated checkbox - javascript

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

Related

Select and Deselect in Laravel and Javascript

I'm creating a function which allows a user to select and deselect multiple products with Javascript, The problem is it shows only one checkbox instead of each product to have its checkbox .If I have 20 products it shows 1 checkbox for the first product, how can I fix this?
Blade file
<span><a class="Select-Deselect" href="">Select</a></span>
#foreach($products as $product)
<div id="checkBox1" style=" display:none; position:absolute;">
<h1>hello</h1>
</div>
#endforeach
Javascript
<script>
/* Select deselect */
$(".Select-Deselect").click(function(e) {
if ($(this).html() == "Select") {
document.getElementById("checkBox1").style.display="block";
$(this).html('Deselect');
}
else {
$(this).html('Select');
document.getElementById("checkBox1").style.display="none";
}
return false;
});
</script>
In your loop you are again creating multiple divs with the same id attribute. Remove the id attribute and use a class instead, as said, id attributes must be unique in a document.
Change your <a> to select/deselect to a button, that's more suitable:
Since you already use jQuery in your script I also used it to toggle the display style on the elements.
I removed the id="checkBox1" and replaced it with class="checkbox-container". Using a class makes it possible to select more than one element, that's what $(".checkbox-container") does.
Here's a working example:
blade:
<button class="Select-Deselect" type="button">Select</button>
#foreach($products as $product)
<div class="checkbox-container" style="display:none;">
<h1>hello</h1>
</div>
#endforeach
jQuery:
<script>
$(".Select-Deselect").click( function(e) {
if ($(this).html() == "Select") {
$(".checkbox-container").css('display', 'block');
$(this).html('Deselect');
} else {
$(".checkbox-container").css('display', 'none');
$(this).html('Select');
}
return false;
});
</script>

Show/Hide (via Bootstrap's collapse function) divs based on radio button

I'm trying to use Bootstrap's collapse functionality to show/hide divs based on which radio button is checked. I was able to get things to work fine when I don't use Bootstrap's collapse function, however, in order to give a more consistent feel I'd like to take advantage of this function.
Here's a snippet of the HTML in question:
<div class="col-xs-12 form-group">
<label class="radio-inline">
<input type="radio" id="send-now-radio" name="when" value="send-now" checked> <strong>Send Now</strong>
</label>
<label class="radio-inline">
<input type="radio" id="pickup-radio" name="when" value="pickup"> <strong>Hold for pickup</strong>
</label>
<label class="radio-inline">
<input type="radio" id="fax-radio" name="when" value="fax"> <strong>Fax</strong>
</label>
<label class="radio-inline">
<input type="radio" id="email-radio" name="when" value="email"> <strong>Email</strong>
</label>
</div>
<div class="col-xs-12">
<div id="send">Send</div>
<div id="pickup">Pickup</div>
<div id="fax">Fax</div>
<div id="email">Email</div>
</div>
And here's my javascript code:
$(document).ready(function()
{
// Hide all but one method div (since all are shown in case the user has JS disabled)
$('#send').show();
$('#pickup').hide();
$('#fax').hide();
$('#email').hide();
// Attach to the radio buttons when they change
$('#send-now-radio, #pickup-radio, #fax-radio, #email-radio').on('change', function () {
// Make sure that this change is because a radio button has been checked
if (!this.checked) return
// Check which radio button has changed
if (this.id == 'send-now-radio') {
$('#send').collapse('show');
$('#pickup').collapse('hide');
$('#fax').collapse('hide');
$('#email').collapse('hide');
} else if (this.id == 'pickup-radio') {
$('#send').collapse('hide');
$('#pickup').collapse('show');
$('#fax').collapse('hide');
$('#email').collapse('hide');
} else if (this.id == 'fax-radio') {
$('#send').collapse('hide');
$('#pickup').collapse('hide');
$('#fax').collapse('show');
$('#email').collapse('hide');
} else // if (this.id == 'email-radio') {
$('#send').collapse('hide');
$('#pickup').collapse('hide');
$('#fax').collapse('hide');
$('#email').collapse('show');
}
});
};
Here's a link to a JS fiddle with all of this: http://jsfiddle.net/DTcHh/156/
Unfortunately I'm missing something, cause the behavior is weird and not what I would expect.
First of all, excellent question. You provided code, made it clear what you tried, etc. Love it.
I forked your JSFiddle, and came up with this:
http://jsfiddle.net/emptywalls/EgVF9/
Here's the Javascript:
$('input[type=radio]').on('change', function () {
if (!this.checked) return
$('.collapse').not($('div.' + $(this).attr('class'))).slideUp();
$('.collapse.' + $(this).attr('class')).slideDown();
});
I wouldn't recommend using the collapse functionality from Bootstrap, it relies on a very different DOM structure from what you need. My fiddle uses just jQuery to accomplish what you need. My approach was to pair the radio buttons and divs with classes, so you can DRY up your code.
As #emptywalls mentioned, the Bootstrap collapse function won't work. I tried it and it almost does, except that it is based on clicking the source element, not it's state. A radio button needs to pay attention to it's state.
But I wanted something that allowed me to mark up the element with data tags and have it inherit the functionality, as the bootstrap collapse does. So I came up with this:
<input data-target="#send" data-toggle="radio-collapse" id="send_now_radio" name="when" type="radio" value="send-now">
<div id="send" class="collapse">Send</div>
And then have this included once in your site and it will apply to all such buttons.
$('input[type=radio][data-toggle=radio-collapse]').each(function(index, item) {
var $item = $(item);
var $target = $($item.data('target'));
$('input[type=radio][name="' + item.name + '"]').on('change', function() {
if($item.is(':checked')) {
$target.collapse('show');
} else {
$target.collapse('hide');
}
});
});
This uses the collapse function of Bootstrap for the animation. You could just as easily use jQuery hide() and show().
Unless I'm mistaken, #jwadsack code won't work if you have another group of radio buttons with a different name attribute.
That's because the $item and $target variables are declared globally. The $item variable will be overidded by the last group and only this one will hide/show the collaspe.
Adding var before the variable definition seems to fix the problem.
The code is then
$('input[type=radio][data-toggle=radio-collapse]').each(function(index, item) {
var $item = $(item);
var $target = $($item.data('target'));
$('input[type=radio][name="' + item.name + '"]').on('change', function() {
if($item.is(':checked')) {
$target.collapse('show');
} else {
$target.collapse('hide');
}
});
});

How get the class of the div on clicking the select option inside that div?

I have two divs which show the product details content inside them, something like this:
<div class="product-style-odd">
<select>
<option value="active" onClick="changeStatus(<?php echo $productid;?>,0)">Activate</option>
<option value="inactive" onClick="changeStatus(<?php echo $productid;?>,1)">Deactivate</option>
</select>
</div>
<div class="product-style-even">
<select>
<option value="active" onClick="changeStatus(<?php echo $productid;?>,0)">Activate</option>
<option value="inactive" onClick="changeStatus(<?php echo $productid;?>",1)>Deactivate</option>
</select>
</div>
<script>
function changeStatus(productid, status){
//Now what I want to reference and hide that div in which changeStatus function was invoked
}
</script>
Now little explanation of above code. Both of these odd and even style divs are inside a loop so they are repeated depending upon the number of iterations in the loop.
Now what I want to achieve is that when the user clicks on inactive option from select menu then that particular div should fadeOut and I change the status of that product via Ajax.
I don't know how to get class of that particular div which was clicked.
And sorry for poor indentation of the code, I am not much familiar with SO editor.
EDIT:
Problem is still not solved.
The reason is the structure of that page is very complex. First I have body and then a div and then several divs and then comes a div with class product-style-even or product-style-odd. Now if I put the code to select the parent div then it selects the div after body.
$('select').click(function(){
var divClass=$(this).parent('div').attr('class');
});
How about something like this?
$("select").change(function () {
var selectVal;
$("select option:selected").each(function () {
selectVal = $(this).val();
});
if (selectVal == 'inactive') {
var selectParentDiv = $(this).parents('div');
selectParentDiv.fadeOut();
console.log(selectParentDiv.attr('class'));
}
});
Example: http://jsfiddle.net/rjngr/3/
With jQuery:
$(this).parents('div:first').hide();
in body of function changeStatus(productid, status)

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>

how to pass multiple jquery objects to a js function?

Actually, I have more than 8-inputs w/ 8 different id's in HTML & i wanted to pass the jquery objects to a onlblur event function so I don't need to create 8-repetitive functions & only make 1 script function.
I've been trying really hard for hours in searching Stack overflow but couldn't find the answer to my questions or perhaps I am just new to jquery. Hope you can help me & thanks in advance...
function fill(t,xx,zz) {
$(xx).val(t);
setTimeout("$(zz).hide();", 200);
}
<input type="text" id="inputString" size="50" value="" onkeyup="lookup(this.value);" onblur="fill(this.value,'#inputString','#suggestions');" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
To give you a better understanding of the code, this it the original one that really works & is only good for 1-input html tag. I'm planning to use only ONE function on 8-input html tags.
<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
function lookup(xString) {
if(xString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("db_rpc.php", {queryString: ""+xString+""}, function(data){
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
} // lookup
function fill(t) {
$('#inputString').val(t);
setTimeout("$('#suggestions').hide();", 200);
}
Make all your elements share the same class.
<div id="idOne" class="toBlur" />
<div id="idTwo" class="toBlur" />
<div id="idThree" class="toBlur" />
Tell jQuery that you want to apply the same function to each item with the class when the blur event is fired.
$(".toBlur").blur(function() {
// Do whatever.
});
Also, if you're going to use jQuery (it's in your question tags), you shouldn't assign your callbacks in the HTML like you have.
You do that with event handlers and classes:
<input type="text" class="inputString" />
<div class="suggestionsBox" id="suggestions" style="display: none;">
JS
$('.inputString').on({
keyup: function() {
lookup(this.value);
},
blur: function() {
var self = this;
setTimeout(function() {
$(self).next('.suggestionsBox').hide()
},200);
}
});
i made it work used using 1set of function for 8-input tags by passing arguments to both functions. I placed a switch statement to determine the input tag id as seen on function fill. I also added another POST variable on function lookup. Below is my modified code:
function lookup(inputString,nn) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else
{
$.post("db_rpc.php", {queryString: ""+inputString+"",nns: ""+nn+""}, function(data)
{ //nns added a new post variable nns for php mysqli
if(data.length >0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}
});
}
}; // lookup
function fill(xx,n) {
switch(n) {
case 1:
$('#namedetails').val(xx); // input id
break;
case 2:
$('#catdetails').val(xx);
break;
}
setTimeout("$('#suggestions').hide();", 200);
};
<td class="absy"><input name="namedetails" type="text" id="namedetails" size="50" value="" onkeyup="lookup(this.value,1);" onblur="fill(this.value,1);"/>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
I just wanna thank everyone who made the effort of answering my question... Still I learned things from your suggestions. Maybe my question was a bit vague to you guys, probably because im still new to jquery & just cameback coding after a longbreak. thanks again...

Categories

Resources