We Keep Coding

Count the number of checked check-boxes in multiple panels and show the relevant number in the correct panel using jQuery/JavaScript

I have multiple panels (class="panel-section) and I was to count the number of checked check-boxes in each and display this number in each panel, and have this number update when there is a check-box change.
This is my HTML code:
<div class="panel-section">
<!-- Layer Group Heading -->
<div class="panel-section-top">
<a href="javascript:;" class="expand-toggle">Group 1
<span id="layer_group_1_count_checkboxes" class="badge"></span></a>
</div> <!-- end (Group Name) -->
<div class="panel-section-main" id="layer_group_1">
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible10">
<input type="checkbox" name="layer_10" class="visible" id="visible10">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 1</h4>
</div>
</div> <!-- end .layer -->
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible11">
<input type="checkbox" name="layer_11" class="visible" id="visible11">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 2</h4>
</div>
</div> <!-- end .layer -->
</div> <!-- end .layer-main -->
</div> <!-- end .panel-section layer_group_1 -->
<div class="panel-section">
<!-- Layer Group Heading -->
<div class="panel-section-top">
<a href="javascript:;" class="expand-toggle">Group 2
<span id="layer_group_2_count_checkboxes" class="badge"></span></a>
</div> <!-- end (Group Name) -->
<div class="panel-section-main" id="layer_group_2">
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible20">
<input type="checkbox" name="layer_20" class="visible" id="visible20">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 1</h4>
</div>
</div> <!-- end .layer -->
<!-- Layer -->
<div class="layer">
<div class="list-group" style="margin-bottom: 0px;">
<label class="checkbox-inline switch-button" for="visible11">
<input type="checkbox" name="layer_21" class="visible" id="visible21">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 2</h4>
</div>
</div> <!-- end .layer -->
</div> <!-- end .layer-main -->
</div> <!-- end .panel-section layer_group_2 -->
And I can get the number of total check-boxes that are active using the following:
//Get the number of total layers active
$(document).ready(function () {
$("input[type=checkbox]").each(function () {
$(this).change(updateCount);
});
updateCount();
function updateCount () {
var count = $("input[type=checkbox]:checked").size();
$("#count_checkboxes").text(count);
$("#status").toggle(count > 0);
};
});
But instead of just "#count_checkboxes" I want the id from the panel-section-main div to join with it so I can pass the number to the right section (eg "#layer_group_1_count_checkboxes").
I may not be going about this the best way so also open to better ideas people may have.
This is an example of the output I want:

When trying to genericise content, aka. DRY (Don't Repeat Yourself) it up, you should avoid id attributes as they are the opposite of what you need. Instead target elements by their classes so you can deal with them by their behaviour instead of targeting them directly.
As such you can achieve what you need when a checkbox is changed by looping through all the panels and finding the number of checked checkboxes and updating the .badge within that panel.
Also note that size() has been removed from the latest versions of jQuery. I'd suggest updating to jQuery 3.4 and using the length property instead. Try this:
jQuery(function($) {
$("input[type=checkbox]").on('change', updateCount);
updateCount();
function updateCount() {
$('.panel-section').each(function() {
var $panel = $(this);
var count = $panel.find(':checkbox:checked').length;
$panel.find('.badge').text(count);
});
};
});
.panel-section-main {
border: 1px solid #CCC;
}
a {
text-decoration: none;
}
.badge {
background-color: #C00;
border-radius: 50%;
padding: 5px 9px;
color: #FFF;
}
.panel-section-main .layer .list-group {
margin-bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="panel-section">
<div class="panel-section-top">
<a href="#" class="expand-toggle">
Group 1
<span class="badge"></span>
</a>
</div>
<div class="panel-section-main">
<div class="layer">
<div class="list-group">
<label class="checkbox-inline switch-button">
<input type="checkbox" name="layer_10" class="visible" id="visible10">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 1</h4>
</div>
</div>
<div class="layer">
<div class="list-group">
<label class="checkbox-inline switch-button">
<input type="checkbox" name="layer_11" class="visible" id="visible11">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 2</h4>
</div>
</div>
</div>
</div>
<div class="panel-section">
<div class="panel-section-top">
<a href="#" class="expand-toggle">
Group 2
<span class="badge"></span>
</a>
</div>
<div class="panel-section-main">
<div class="layer">
<div class="list-group">
<label class="checkbox-inline switch-button" for="visible20">
<input type="checkbox" name="layer_20" class="visible" id="visible20">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 1</h4>
</div>
</div>
<div class="layer">
<div class="list-group">
<label class="checkbox-inline switch-button">
<input type="checkbox" name="layer_21" class="visible" id="visible21">
<div class="switch-button-background">
<div class="switch-button-button"></div>
</div>
</label>
<h4>Layer 2</h4>
</div>
</div>
</div>
</div>

Dropzone isn't working on Modal Showing through ajax

Dropzone and Javascript isn't working on bootstrap Modal i'm calling Modal through ajax.Because i have hundreds of records i don't want to place Modal in foreach so i used ajax on button click controller method hits and return a new view and that view i'm calling and main view where modal will be displayed. Modal is working fine but i have used dropzone plugin which isn't working and even no other js code is working neither css.
MainView.blade.php
On button Click the following script hits
this the my main view where i am calling Bootstrap Modal
<div class="modal" id="Edit-SpecsModal-products">
<div class="modal-dialog modal-max ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body text-center">
<span class="f-24 black bold">Edit Product</span>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body p0">
<div class="product_details" id="product_details"></div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn-bg2" data-dismiss="modal">Cancel</button>
<input type="button" class="btn-bg1" data-dismiss="modal" onclick="submitForms()">Add to Project</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.edit_product_model').click(function(){
var product_id = $(this).attr("id");
$.ajax({
url:"{{url('architecture-edit-product')}}/" + product_id ,
method:"post",
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
},
data:{product_id:product_id},
success:function(data){
$('#product_details').html(data.html);
$('#Edit-SpecsModal-products').modal("show");
}
});
});
});
</script>
Controller
public function editArchitectureProductSave(Request $request, $id){
$data['products'] = Product::with('productImages')->where('id',$id)->get();
$returnHTML = view('manufacturer::projects.includes.ajaxhtmlviews.edit-product-Bootstrap-modal', $data)->render();
return response()->json( ['html'=> $returnHTML], 200);
edit-product-Bootstrap-modal.blade.php
<div class="max-wid">
<div class="pl-3 pr-3 mb-5 p0">
<div class="">
<div class=" f-column in">
<div class="">
<ul class="nav nav-tabs nav-border-producttab">
<li class="nav-item ">
<a class="nav-link active" data-toggle="tab" href="#add_new_products2">Add New Product</a>
</li>
</ul>
</div>
<div class="">
<div >
<div class=" mt-3">
<!-- Nav tabs -->
<!-- Tab panes -->
<div class="tab-content model-hit">
<div id="add_new_products2" class="container tab-pane active">
<br>
<div class=" row">
<div class="col-sm-6">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">
Product Documents
<div class="clearfix"></div>
<div class="gry f-13">(Specs, CHPS Certificate, Product Data Sheet)</div>
</div>
<div class="my-form1 text-center" id="my-for2">
<?php echo Form::open(array('route' => 'architecture-product-file-save', 'files' => true, 'method' => 'PUT', 'id' => 'product-file-form', 'class' => 'dropzone', 'name' => 'formName')); ?>
<input type="hidden" name="last_product_inserted_id" id="last_product_inserted_id" value="">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div id="preview-template" style="display: none;">
<div class="dz-preview dz-file-preview" style="width: 20% ;">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-file-type">
<br />
<select name="file_type" class="dz-file-type-select" id="file_type">
<option value="">Select File Type</option>
<option value="datasheet_file">Datasheet</option>
<option value="cad_file">CAD file</option>
<option value="bim_file">BIM file</option>
<option value="leed_file">LEED Statement</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">Product Images</div>
<div class="my-form1 text-center" id="my-for3">
<input form="product-form" id="file-input" name="product_images[]" type="file" multiple>
<div id="preview"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<?php echo Form::open(array('route' => 'architecture-product-save', 'files' => true, 'id' => 'product-form')) ?>
<input type="hidden" name="method_type" value="PUT">
<input type="hidden" name="id" value="{{$products['0']->id}}">
<div class="col-sm-12 p-0 mrg_modal_produt">
<input name="name" type="text" class="form-control input_product_modal" value="{{$products['0']->name}}">
<input name="" type="text" class="form-control input_product_modal" value="Manufacturer Name">
<input type="hidden" name="project_slug" value="{{Request::segment(2)}}">
<textarea name="description" class="form-control input_product_modal" cols="" rows="">{{$products['0']->description}}</textarea>
<input name="leed_file_url" type="text" class="form-control input_product_modal" value="{{$products['0']->leed_file_url}}">
</div>
<div id="product_images_div"></div>
<input type="submit" class="btn btn-info" value="Save" id="save-product-form-submit" style="display:hidden;">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code is working fine modal is calling but problem is only when modal from edit-product-Bootstrap-modal.blade.php is called through the script used in mainView.blade.php for Bootstrap Modal is not working

Check if you have disabled autoDiscvoer for dropzone.js on Dropzone.autoDiscover
if its false set its value as true (Dropzone.autoDiscover = true;).
If thats also not working try manually initializing the dropzone by attaching it to the model.
myDropDown = new Dropzone('#product_details', {<options>})

I had a similar problem with modals, where my datepicker.js input field wouldn't work when I click it, but id didn't show any errors. I did some digging, and apparently, modals don't properly load scripts defined in your view (or wherever). I managed to do this, by initializing the same script again, but with another name, in my app.js, something like this:
$(document).ready(function () {
$('.datepickerCustom').datepicker({
//datepicker logic
}).on('changeDate', function (e) {
$(this).parent().find('.datePickerInput').val(e);
});
});
After compiling my views again (webpack), date picker was working fine. There's also another solution. Seems like sometimes js scripts "hide" behind the modal, so you need to set their z-index the modal's z-index which is 1050. This could be done inside your modal view:
<style>
.datepicker {
z-index: 1600 !important; /* has to be larger than 1050 */
}
</style>
If this still doesn't work, there's actually one more solution, where you need to initiate the date picker on the Modal shown event, something like this:
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
Hope that any of those solutions can solve your problem. Good luck.

Show/Hide Multiple Div using multiple checkbox when checked

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">

twitter bootstrap btn-group to drive tab content

Hi I am trying to implement tabbed content using bootstraps btn-group. I have some working code, but am not sure it is the best way to go about it.
HTML:
<section class="section" id="tabContent">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="btn-group btn-group-sm btn-group-justified" data-toggle="buttons">
<div class="btn btn-inverse active tabber" id="submission-div">
<label for="submission">Submission</label>
<input type="radio" checked="" id="submission">
</div>
<div class="btn btn-inverse tabber" id="rules-div">
<label for="rules">Rules</label>
<input type="radio" checked="" id="rules">
</div>
</div>
</div>
</div>
<div id="submission-content">
<h1>Submission content</h1>
</div>
<div id="rules-content" class="hide">
<h1>Rules</h1>
</div>
</div>
</section>
CSS:
.hide {
display: none;
}
JQuery:
$(document).on('click','.tabber',function(e){
if ($("#submission-div").hasClass("active")) {
$("#submission-content").addClass("hide");
$("#rules-content").removeClass("hide");
}else if ($("#rules-div").hasClass("active")){
$("#rules-content").addClass("hide");
$("#submission-content").removeClass("hide");
}
});
This JQuery onClick callback works, doesn't make sense when you read it. I think this is because this FXN is fired off before the active class has been updated in the markup.
I was hoping for a better way to accomplish tab content, hopefully with out changing the markup too much cause the styling is correct for the markup.
Any suggestions would be appreciated.
Thanks!
A

Why don't you use the Bootstrap Tabs with data-toggle="tab" and data-target= attributes? (no jQuery needed)..
Demo: http://www.bootply.com/ZueoFI9iFC
<section class="section" id="tabContent">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="btn-group btn-group-sm btn-group-justified"
data-toggle="buttons">
<div class="btn btn-inverse active tabber" id="submission-div"
data-toggle="tab" data-target="#submission-content">
<label for="submission">Submission</label>
<input type="radio" checked="" id="submission"/>
</div>
<div class="btn btn-inverse tabber" id="rules-div"
data-toggle="tab" data-target="#rules-content">
<label for="rules">Rules</label>
<input type="radio" checked="" id="rules"/>
</div>
</div>
</div>
</div>
<div class="tab-content">
<div id="submission-content" class="tab-pane active">
<h1>Submission content</h1>
</div>
<div id="rules-content" class="tab-pane">
<h1>Rules</h1>
</div>
</div>
</div>
</section>

I feel like there's likely a cleaner overall solution, but if you're wanting to just have your JQ make sense and change as little as possible, you can do this:
$(".tabber").click(function(){
if ($(this).is("#submission-div")) {
$("#submission-content").removeClass("hide");
$("#rules-content").addClass("hide");
}else if ($(this).is("#rules-div")){
$("#rules-content").removeClass("hide");
$("#submission-content").addClass("hide");
}
});

Twitter bootstrap : Expand with span12 on button click

I am using bootstrap for my project.
It is the structure i am following to design layout-
<div class="row-fluid">
<div class="expand-this">
<div class="span8">
<div class="row-fluid">
<div class="span6 pull-left">
<b>Display Name</b>
</div>
<div class="span6 pull-right">
<input type="text"/>
</div>
</div>
</div>
</div>
<div class="hide-accordion">
<div class="span4">
<div class="block">
...some information..
</div>
</div>
</div>
<button class="button-hiding"></button>
Here you can see i am aligning two block in a row. Second span in row-fluid with span4 Is taking dynamic values.
So i am trying to hide it with button.
jQuery-
$('.hide-accordion').hide();
$(function () {
$('.button-hiding').click(function () {
$('.hide-accordion').toggle(this);
});
});
This is what working fine.
I am hiding this accordion on window load.
What i want-
I want span8 to take full width with span12 when accordion is hidden and as soon as i click on button, accordion appears. then it should be taking original span8 width.
I tried this too with jQuery-
$('.hide-accordion').hide();
$(function () {
$('.button-hiding').click(function () {
$('.hide-accordion').toggle(this);
$('.Expand-this>div .span8').removeClass('span8');
$(this).addClass('span12');
});
});
But no luck, help?

Try with this,
HTML:-
<div class="row-fluid">
<div class="span8 expand-this">
<div class="row-fluid">
<div class="span6 pull-left">
<b>Display Name</b>
</div>
<div class="span6 pull-right">
<input type="text"/>
</div>
</div>
</div>
<div class="span4 hide-accordion">
<div class="block">
...some information..
</div>
</div>
<div>
<button class="button-hiding"></button>
And Jquery:-
$(function () {
$('.hide-accordion').hide();
$(".expand-this").removeClass("span8").addClass("span12")
$('.button-hiding').click(function () {
if($(".expand-this").hasClass('span8')){
$(".expand-this").removeClass("span8").addClass("span12")
}else{
$(".expand-this").removeClass("span12").addClass("span8")
}
$('.hide-accordion').toggle();
});
});