I am trying to show/hide multiple div's using multiple checkboxes.
i.e. if a checkbox is checked it must target div using id or name and the div contents should be hidden.
Tried the following work but unable to achieve the required goal
<form id="varsection">
<div class="panel box box-primary">
<div id="controlledvariables" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="box-body">
<div class="col-md-9">
<div class="row secrow">Wave</div>
<div class="row secrow">Gender</div>
</div>
<div class="col-md-1">
//if input name="Wave[]" is selected then
<div class="row secrow" style="text-align: center;">
<input type="checkbox" name="Wave[]" value="top">
</div>
<div class="row secrow" style="text-align: center;">
<input type="checkbox" name="Gender[]" value="top">
</div>
</div>
</div>
</div>
</div>
</form>
<form id="filters">
<div>
//show this div
<div class="panel box box-primary">
<div class="box-header with-border">
<h4 class="box-title">
<a data-toggle="collapse" data-parent="#accordion" href="#Wave" aria-expanded="false" class="collapsed">
Wave
</a>
</h4>
</div>
<div id="Wave" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="box-body">
<div class="col-md-8">
</div>
<div class="col-md-4">
//or this one
<ul>
<li><input type="checkbox" name="Wave_fiters[]" value="1">Wave-1</li>
<li><input type="checkbox" name="Wave_fiters[]" value="2">Wave-2</li>
</ul>
</div>
</div>
</div>
</div>
[Other multiple div's]
</div>
</form>
jQuery
jQuery(function() {
var checks = $("[name='_Wave[]']");
checks.click(function() {
if (checks.filter(':checked').length == checks.length) {
$("[name='_Wave[]']").show();
} else {
$("[name='_Wave[]']").hide();
}
}).triggerHandler('click')
})
you have 2 problems with this code:
first the jquery selector is wrong it should be like this:
var checks = $("[name='Wave[]']");
without _
second you need to give the div you want to toggle a unique id or a class name
so your code should be like this
jQuery(function () {
var checks = $("[name='Wave[]']");
checks.click(function () {
if (checks.filter(':checked').length == checks.length) {
$(".waveDiv").show();
} else {
$(".waveDiv").hide();
}
}).triggerHandler('click')
})
and this is your input:
<input type="checkbox" name="Wave[]" value="top">
and your div which will be toggled:
<div class="waveDiv panel box box-primary">
Related
I have a view full of bootstrap collapsible panels. Inside the panels are a list of documents. I have a search box at the top of the page for the user to type in the document name.
What currently happens
When the user types in the name of a document and presses enter.. if a match is found.. the panel that contains the document does not expand, but if I click on it, then it expands and shows me the document that matched... the rest of the panels are still visible but do not open because they don't have any matches.
What I want to happen
What I want to happen is if a match is found then hide the panels and documents that don't have a match. When the clear search button is clicked to bring back all panels and documents (like a page refresh but I do not want a refresh).
Here is my code
Search Box
<div id="Search-Section">
<div class="row">
<div class="col-md-12">
<input type="text" id="SearchLink" class="form-control link-search" placeholder="Document Name..." style="margin-left: 36%;"/>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="submit" value="Search" id="ButtonSearch" class="btn btn-default SearchButtons" style="float: right; margin-right: -2%;"/>
</div>
<div class="col-md-6">
<input type="reset" value="Clear Search" id="ButtonClearSearch" class="btn btn-default SearchButtons" style="margin-left: -69%;"/>
</div>
</div>
</div>
Collapsible Panel Example
<div class="row" style="margin-top: 2%;">
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Panel One</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Test Document 1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Panel Two</a>
</h3>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Test Document 2</li>
<li>Test Document 3</li>
<li>Test Document 4</li>
<li>Test Document 5</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
So when I search for 'Test Document 1'.. then Panel Two should be completely hidden, but when I click 'Clear Search' button then Panel Two should be brought back along with Panel One (even though Panel One wasn't hidden because it contained a document that matched the search).
jQuery
// When user wants to search for document
$("#SearchLink").keyup(function (event) {
if (event.keyCode == 13) {
var textboxValue = $("#SearchLink").val().toLowerCase();
alert(textboxValue);
$('.panel-body').each(function () {
var exist = false;
$(this).find('ul li').each(function () {
if ($(this).find('a').text().toLowerCase().indexOf(textboxValue) !== -1) {
$(this).show();
exist = true;
} else
$(this).hide();
});
if (exist === false) {
$(this).prev('.panel-title').hide();
$(this).hide();
} else {
$(this).prev('.panel-title').show();
}
});
}
});
// When user wants to clear search
$("#ButtonClearSearch").click(function () {
$("#SearchLink").val("");
$('.panel-body').each(function() {
$(this).prev('h4').show();
$(this).children().each(function() {
$('ul li').show();
$('a').show();
});
});
$('#SearchLink').blur(function() {
if ($.trim(this.value) == null) {
$(this).val($(this).attr('Document Search'));
}
});
});
instead of $(this).show(); try to show the parent:
$(this).parents('.collapse').show();
or
$(this).parents('.collapse').addClass('in');
the script will like this:
$(function(){
$("#SearchLink").keyup(function (event) {
if (event.keyCode == 13)
search($(this).val());
});
$('#ButtonSearch').click(function(){
search($("#SearchLink").val());
})
function search(keyword){
var textboxValue = keyword.toLowerCase();
$('.panel-body').each(function () {
var exist = false;
$(this).find('ul li').each(function () {
if ($(this).find('a').text().toLowerCase().indexOf(textboxValue) !== -1) {
exist = true;
}
});
if (exist === false) {
$(this).parent().removeClass('in');
} else {
$(this).parent().addClass('in');
}
});
}
// When user wants to clear search
$("#ButtonClearSearch").click(function () {
$("#SearchLink").val("");
$('.panel-body').each(function() {
$(this).parent().removeClass('in');
});
$('#SearchLink').blur(function() {
if ($.trim(this.value) == null) {
$(this).val($(this).attr('Document Search'));
}
});
});
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="Search-Section">
<div class="row">
<div class="col-md-12">
<input type="text" id="SearchLink" class="form-control link-search" placeholder="Document Name..." />
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="submit" value="Search" id="ButtonSearch" class="btn btn-default SearchButtons" />
</div>
<div class="col-md-6">
<input type="reset" value="Clear Search" id="ButtonClearSearch" class="btn btn-default SearchButtons" />
</div>
</div>
</div>
<div class="row" style="margin-top: 2%;">
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Panel One</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Test Document 1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Panel Two</a>
</h3>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Test Document 2</li>
<li>Test Document 3</li>
<li>Test Document 4</li>
<li>Test Document 5</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
I have an accordion that has a form inside. When a button inside each accordion is clicked, it retrieves title and query contents of the same accordion.
https://jsfiddle.net/rkdrfj4y/3/ this is a demonstration of what I am attempting to do.
The problem is that the first accordion always returns undefined form input value. All the other subsequent accordions return the expected values. I don't understand how this can happen because identical js code is used for each accordion.
HTML
<form>
<div class="form-group">
<label for="exampleTextarea">Global Templates</label>
<div class="panel-group" id="accordion-global">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="title-anchor" data-toggle="collapse"
data-parent="#accordion-global" href="#collapse-global-0">
title</a>
</h4>
</div>
<div id="collapse-global-0" class="panel-collapse collapse">
<div class="panel-body">
<form class="query-form">
<div class="form-group">
<label for="template-title">Template Title</label>
<input type="text" class="form-control template-title" name="template-title" value="title">
</div>
<div class="form-group">
<label for="template-query">Template Query</label>
<textarea class="form-control template-query" name="template-query" onkeyup="textAreaAdjust(this)">query</textarea>
</div>
</form>
<input class="query-id" type="hidden" value="_id">
<button class="btn btn-info apply-template-btn">Save
</button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="title-anchor" data-toggle="collapse"
data-parent="#accordion-global" href="#collapse-global-1">
title</a>
</h4>
</div>
<div id="collapse-global-1" class="panel-collapse collapse">
<div class="panel-body">
<form class="query-form">
<div class="form-group">
<label for="template-title">Template Title</label>
<input type="text" class="form-control template-title" name="template-title" value="title">
</div>
<div class="form-group">
<label for="template-query">Template Query</label>
<textarea class="form-control template-query" name="template-query" onkeyup="textAreaAdjust(this)">query</textarea>
</div>
</form>
<input class="query-id" type="hidden" value="_id">
<button class="btn btn-info apply-template-btn">Save
</button>
</div>
</div>
</div>
</div>
</div>
</form>
JS
$('.apply-template-btn').click(function (e) {
e.preventDefault();
let id = $(this).siblings('.query-id').val();
let title = $(this).siblings('.query-form').find('.template-title').val();
let query = $(this).siblings('.query-form').find('.template-query').val();
console.log([id,title,query])
alert(title) //undefined for first accordion but works for all other subsequent accordions
$.post('/api/database/query_template/update', {id,title,query}, function (data) {
console.log(data)
})
});
Change the below existing lines:
let title = $(this).siblings('.query-form').find('.template-title').val();
let query = $(this).siblings('.query-form').find('.template-query').val();
to
let title = $(this).parent().find(".template-title").val();
let query = $(this).parent().find(".template-query").val();
According to this question: "Twitter Bootstrap 3 collapse when checkbox checked" i've tried this solution, because it is simple and clean.
http://jsfiddle.net/L0h3s7uf/1/
<div class="panel-group driving-license-settings" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div class="checkbox">
<label data-toggle="collapse" data-target="#collapseOne">
<input type="checkbox"/> I have Driver License
</label>
</div>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="driving-license-kind">
<div class="checkbox">
<input type="checkbox" value="">A</div>
<div class="checkbox">
<input type="checkbox" value="">B</div>
<div class="checkbox">
<input type="checkbox" value="">C</div>
<div class="checkbox">
<input type="checkbox" value="">D</div>
<div class="checkbox">
<input type="checkbox" value="">E</div>
</div>
</div>
</div>
</div>
</div>
But with this "solution" you have a problem. If you click the checkbox too fast, the area is collapsed but the checkbox is checked.
How can i prevent this double clicking problem?
I am using:
Bootstrap 3
jQuery 3.1.1
Since there is no double click handling in bootstrap for toggle specially, so I come up with a special work around to make double click in sync.
I just removed data-toggle="collapse" attribute, added #testCheckBox id to checkbox's parent div and I did some custom script which detect if double click or single click then validate the checkbox values and toggle on their bases:
$('.collapse').collapse();
$("#testCheckBox :checkbox").bind('click dblclick', function(evt) {
console.log(evt.type);
if ($(this).is(":checked")) {
$('.collapse').slideDown('fast');
} else {
$('.collapse').slideUp('fast');
}
})
demo: https://jsbin.com/ciloliweto/edit?html,output
Disable the checkbox while collapsing:
http://jsfiddle.net/L0h3s7uf/220/
<input id="license_check_box" type="checkbox"/> I have Driver License
$('.collapse').on('show.bs.collapse hide.bs.collapse', function() {
$('#license_check_box').prop('disabled', true);
}).on('shown.bs.collapse hidden.bs.collapse', function() {
$('#license_check_box').prop('disabled', false);
});
This is a general solution copied from #IanMetten to get all and fix collapsable controls.
$('[data-toggle="collapse"]').each(function() {
var $control=$(this);
var $target=$($control.attr("data-target"));
$target.on('show.bs.collapse hide.bs.collapse', function() {
$control.prop('disabled', true);
}).on('shown.bs.collapse hidden.bs.collapse', function() {
$control.prop('disabled', false);
});
});
I think this will work for You
$('.collapse').collapse()
$("#check").one('click', function (event) {
event.preventDefault();
//do something
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.panel-body {
padding: 4px 50px;
}
</style>
<div class="panel-group driving-license-settings" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div class="checkbox">
<label data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<input type="checkbox" id="check"/> I have Driver License
</label>
</div>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="driving-license-kind">
<div class="checkbox">
<input type="checkbox" value="">A</div>
<div class="checkbox">
<input type="checkbox" value="">B</div>
<div class="checkbox">
<input type="checkbox" value="">C</div>
<div class="checkbox">
<input type="checkbox" value="">D</div>
<div class="checkbox">
<input type="checkbox" value="">E</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
i build a code for comments and replies of them.. i use a #foreachto show all elements in ViewBag which have a list of comments..
every thing works fine in post and get ..
but my problem it's when i try to make "submit"button of replies disable to prevent anyone from pressing it without typing..
so i use javascript but the code didn't work fine ..
first it work only with the last element of #foreach .. after i use the name as "class" instead of "id" it work for all elements
but the problem is .. if i typing in first reply input text for example .. the button didn't enable .. but if i typing at last reply input text .. all buttons enable ..
I want the code work for each reply .. only when some one typing in that input text ..
JavaScript
<script>
var $inputreply = $('.replies');
var $buttonreply = $('.replysubmit');
setInterval(function () {
if ($inputreply.val().length > 0) {
$buttonreply.prop('disabled', false);
}
else {
$buttonreply.prop('disabled', true);
}
}, 100);
</script>
View which have loop #foreachof comments and replies for each comment
<section class="comment-list">
#foreach (var item in ViewBag.CommentsList)
{
<article class="row">
<div class="col-md-10 col-sm-10">
<div class="panel panel-default arrow left">
<div class="panel-body">
<header class="text-left" style="direction:rtl;">
<time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> #item.CommentDateTime</time>
</header>
<div class="comment-post">
<p>#item.Comment</p>
</div>
<p class="text-right"><a class="btn btn-default btn-sm replybtn"><i class="fa fa-reply"></i> reply</a></p>
</div>
</div>
<!--ReplyBox-->
#if (Request.IsAuthenticated)
{
using (Html.BeginForm("Reply", "Home", new { #id = #item.PostID, #commentId = #item.ID }, FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="input-group" style="direction:ltr;">
<input type="text" class="replies form-control" placeholder="" name="replies" />
<span class="input-group-btn">
<button class="replysubmit btn btn-primary" type="submit">Reply</button>
</span>
</div>
}
}
else
{
<div class="form-horizontal">
<div class="alert alert-danger replybox" style="display:none;">
<span>please login to reply</span>
</div>
</div>
}
#foreach (var subitem in ViewBag.Relies)
{
if (#subitem.CommentID == #item.ID)
{
<article class="row">
<div class="col-md-9 col-sm-9">
<div class="panel panel-default arrow left">
<div class="panel-heading left">Reply</div>
<div class="panel-body">
<header class="text-left">
<time class="comment-date" datetime="16-12-2014 01:05"><i class="fa fa-clock-o"></i> #subitem.ReplyDate</time>
</header>
<div class="comment-post">
<p>#subitem.CommentReply</p>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-sm-2 col-md-offset-1 col-sm-offset-0 hidden-xs">
<figure class="thumbnail">
<img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" />
<figcaption class="text-center">#subitem.UserName</figcaption>
</figure>
</div>
</article>
}
}
</div>
<div class="col-md-2 col-sm-2 hidden-xs">
<figure class="thumbnail">
<img class="img-responsive" src="http://www.keita-gaming.com/assets/profile/default-avatar-c5d8ec086224cb6fc4e395f4ba3018c2.jpg" />
<figcaption class="text-center">#item.userName</figcaption>
</figure>
</div>
</article>
<br />
}
</section>
The selector $('.replysubmit') returns all the items with that css class, hence updating the disabled property of all those elements, not just the one closest to the input element.
You should use a relative selector to get the submit button inside the form where the reply input element is.
jQuery closest() and find() methods will be handy
This should work
$(function () {
$('.replysubmit').prop('disabled', true); // Disable all buttons when page loads
// On the keyup event, disable or enable the buttons based on input
$(".replies").keyup(function() {
if ($(this).val().length > 0) {
$(this).closest("form").find(".replysubmit").prop('disabled', false);
} else {
$(this).closest("form").find(".replysubmit").prop('disabled', true);
}
});
});
I have checkbox with its original behaviour. I wanted to add + and - symbols to it while expanding and collapsing those checkbox.
Can any one please tell me how can I achieve this ?
Following is my Code in jade:
.form-group
.checkbox#some-checkbox(style="margin-left: 10px;")
label(data-toggle='collapse', data-target='#collapseOne', aria-expanded='false', aria-controls='collapseOne')
input(type='checkbox')
| My Name
#collapseOne.collapse(aria-expanded='false')
.well1
.row
.col-sm-12.col-lg-12
.nutrition-category
.row.header3.margin-left-10
.row.paragraph
.col-xs-6(style="font-size: 18px;") New Name
Non Jade (HTML) Code:
<div class="form-group">
<div class="checkbox" id="some-checkbox" style="margin-left: 10px">
<label data-toggle="collapse" data-target="#collapseOne" aria-
expanded="false" aria-controls="collapseOne">
<input type="checkbox"/> My Name
</label>
</div>
</div>
<div class="collapse" id="collapseOne" aria-expanded="false">
<div class="well1">
<div class="row">
<div class="col-sm-12 col-lg-12">
<div class="nutrition-category">
<div class="row header3 margin-left-10">
<div class="row paragraph">
<div class="col-xs-6" style="font-size: 18px"> New
Name</div>
</div>
</div>
</div>
</div>
</div>
and here is the javascript that i have used for it:
script(type='text/javascript').
$(document).ready(function() {
$("#some-checkbox").prop("indeterminate", true);
});