get div with specific class before form input - javascript

I have:
<div class="col-md-3 col-centered survey-kind-border">
<a class="lv-item" href="#">
<div class="media">
<label for="no" class="pull-left">
<div class="survey_kind_choice">
1.5
</div>
<input checked="checked" class="survey_kind_input" id="no" type="radio" value="no">
</label>
<div class="media-body">
<div class="lv-title">
No
</div>
<small class="lv-small">
I will Not
</small>
</div>
</div>
</a>
</div>
<div class="col-md-3 col-centered ">
<a class="lv-item" href="#">
<div class="media">
<label for="yes" class="pull-left">
<div class="survey_kind_choice">
2.5
</div>
<input class="survey_kind_input" id="yes" type="radio" value="yes">
</label>
<div class="media-body">
<div class="lv-title">
Yes
</div>
<small class="lv-small">
I will
</small>
</div>
</div>
</a>
</div>
When someone goes to this page, one of the radio buttons will usually already be selected. If the button is selected, I want to grab the div that is associated with that form element and has the class "survey_kind_choice" and add a class to it. I am trying to do that with this code:
if($('.survey_kind_input').is(':checked')){
alert('there is a checked element');
$(this).prev('.survey_kind_choice').addClass('current_choice');
}
The alert is working, but I can't get the class to be added. What am I doing wrong and how do I fix it?

No if statement needed, just execute the selector on the checked input with:
$('.survey_kind_input:checked').prev('.survey_kind_choice').addClass('current_choice');
jsFiddle example

Related

Vue js watch vue pretty checkbox values

I am using vue pretty checkbox to display a checkbox. However, based on if one of the checkboxes is checked or not my content has to change! So, I need something like a listener on those vue pretty checkbox components.
However, because vue pretty checkbox is a package I cannot modify the code. My question now is, how can I listen on those checkboxes if they have changed from another component.
Because the products-manager component gets the values. So, whenever the values of the checkboxes of the p-check inside the product-filter changes, I need to pass that to the products-manager component in order to reload the data!
Any ideas on how I can do this? I have already tried this and this but those aren't working for me...
Very important: The number of checkboxes is dynamically as you can see below. The first two checkboxes are always there but the checkbox below gets genereated by a v-for!
This is my sourcecode so far (home template):
<div id="home" class="row">
<div class="col-xl-12" id="product-sort-and-filter">
<products-filter ref="productsFilter" :product-types-prop="{{ json_encode($productTypes) }}"></products-filter>
</div>
<div class="col-xl-9">
<div class="products">
<products-manager ref="productsManager" :products-prop="{{ json_encode($products) }}" auth="{{ \Illuminate\Support\Facades\Auth::check() }}" :userprop="{{ json_encode(\Illuminate\Support\Facades\Auth::user()) }}" route="{{ route('product.index') }}"></products-manager>
</div>
</div>
<div class="col-xl-3">
<sidebar-manager ref="SidebarManager" :top-products-today-prop="{{ json_encode($products) }}" :top-products-week-prop="{{ json_encode($products) }}" :top-products-month-prop="{{ json_encode($products) }}"></sidebar-manager>
</div>
</div>
products filter component:
<template>
<div class="product-sort-and-filter-wrapper d-flex">
<div class="col-xl-9 product-sorting no-padding">
<ul class="list-inline">
<li class="list-inline-item">Highlights</li>
<li class="list-inline-item">Aktuell</li>
<li class="list-inline-item">Diskutiert</li>
</ul>
</div>
<div class="col-xl-3 product-filter no-padding text-right">
<div class="dropdown d-inline-flex">
<i class="fas fa-filter"></i>FILTERN
<div class="dropdown-menu" style="margin-top: 0px">
<div class="productTypesBoxes dropdown-item pretty-checkbox-wrapper">
<p-check name="productExpiredCheckbox" class="p-svg p-plain p-bigger p-smooth" ref="showExpired" toggle true-value false-value>
<span class="checkbox-label on rubik-medium">Abgelaufene anzeigen</span>
<label slot="off-label"><span class="checkbox-label off rubik-medium">Abgelaufene anzeigen</span></label>
<span slot="extra" class="svg"><i data-feather="check-square"></i></span>
<span slot="off-extra" class="svg"><i data-feather="square"></i></span>
</p-check>
</div>
<div class="dropdown-divider"></div>
<div class="productTypesBoxes dropdown-item pretty-checkbox-wrapper">
<p-check name="productTypeCheckbox" class="p-svg p-plain p-bigger p-smooth" ref="showAllProductTypes" toggle true-value false-value checked>
<span class="checkbox-label on rubik-medium">Alle anzeigen</span>
<label slot="off-label"><span class="checkbox-label off rubik-medium">Alle anzeigen</span></label>
<span slot="extra" class="svg"><i data-feather="check-square"></i></span>
<span slot="off-extra" class="svg"><i data-feather="square"></i></span>
</p-check>
</div>
<div class="productTypesBoxes sub dropdown-item pretty-checkbox-wrapper" v-for="productType in productTypes">
<p-check name="productTypeCheckbox" :value="productType.id" class="p-svg p-plain p-bigger p-smooth" :ref="'productType' + productType.id" toggle>
<span class="checkbox-label on ">{{ productType.label }}</span>
<label slot="off-label"><span class="checkbox-label off ">{{ productType.label }}</span></label>
<span slot="extra" class="svg"><i data-feather="check-square"></i></span>
<span slot="off-extra" class="svg"><i data-feather="square"></i></span>
</p-check>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ProductsFilter",
props: ['productTypesProp'],
data() {
return {
highlights: true,
aktuell: false,
diskutiert: false,
showExipredDeals: false,
productTypes: this.productTypesProp
}
}
}
</script>
<style scoped>
</style>

Why by submitting a form with a link does not change the input text values?

I have a form with some hidden input fields. Additional I have a link, which has a reset function, by clicking on it, it sets the hidden fields a "0" as value and submits the form.
It works fine, except by output the POST array, I still see the old values. How can I change that ?
Here is the HTML form:
<form method="POST" action="http://localhost" accept-charset="UTF-8" id="filter_form">
<input name="_token" type="hidden" value="mWIbgqI6sXZTyZpaW3Z3x1QqxZpwnl0BdmJtDmRY">
<input type="hidden" id="select_finance" name="select_finance" value="0">
<input type="hidden" id="filter_finance" name="filter_finance" value="60">
<div class="row " style="margin-top: 5px; display: none;" id="finance_filters">
<div class="col-md-12">
<div class="owl-carousel col-md-12">
<div class="item">
<div class="top_sub_link">
COPPER
</div>
</div>
<div class="item">
<div class="top_sub_link">
WHEAT
</div>
</div>
<div class="item">
<div class="top_sub_link">
SILVER
</div>
</div>
<div class="item">
<div class="top_sub_link">
GOLD
</div>
</div>
<div class="item">
<div class="top_sub_link activemediasublink">
GAS <i class="close_filter"></i>
</div>
</div>
</div>
<div class="owl-nav"></div>
</div>
</div>
</form>
Here is the Javascript code:
$(document).ready(function() {
$(".close_filter").on('click', function() {
$('#filter_finance').val('0');
$('#select_finance').val('0');
$("#filter_form").submit();
});
});
The element on which you're attaching the onClick event is not the whole link but a tag inside the link. Thus, the clickable area is too small -maybe not even visible.
In your JavaScript, replace this:
$(".close_filter").on('click', function() {
With this:
$(".close_ink").on('click', function() {

close toggle in javascript by default

I have this code
$(".filter-tag-group .tag-group .show_filter_content").on('click', function() {
var $icon = $(this).find('i').toggleClass('fa-plus fa-minus');
var $group = $icon.closest('.tag-group');
$group.find('.filter-title').toggleClass('active');
$group.find('.filter-content').toggle();
});
which the result is:
As you see all my groups are open by default, I want them to be closed when page loads (default).
HTML
<div class="collection-leftsidebar sidebar col-sm-3 clearfix">
<div class="sidebar-block filter-block">
<div class="sidebar-title">
<span>{{ __('Advanced Search') }}</span>
<i class="fa fa-caret-down show_sidebar_content" aria-hidden="true"></i>
</div>
<div id="tags-filter-content" class="sidebar-content">
<div class="filter-tag-group">
//this is the part that looping (need to be closed)
<div class="tag-group">
<p class="title">
<span class="filter-title show_filter_content">{{ __('Price Range') }} <span class="pull-right"><i class="fa fa-minus"></i></span></span>
</p>
<div class="row filter-content">
<div class="col-md-6">
<div class="form-group">
<label for="min_price" hidden>{{ __('Min') }}</label>
<input type="text" name="min_price" class="form-control" placeholder="Rp Min">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="max_price" hidden>{{ __('Max') }}</label>
<input type="text" name="max_price" class="form-control" placeholder="Rp Max">
</div>
</div>
</div>
</div>
</div>
</div>
which part of my script should I change to achieve that?
How about hide it by css. coz css will load first than javascript/jquery. So in your case you want to hide it by default so you must done it by css.
.[class-name here] {
display: none;
}
.[class-name here].active {
display: block;
}

JS: Expand position:absolute parent when dynamically adding relative divs

I am using absolutely positioned containers to slide screens left and right on "Next" and "Back". You can see this here: http://opencdesign.herokuapp.com/offer
Click "Got it" to move to 2nd screen, which is where the problem lies. If you click "Add item or category" enough times, the inputs will expand past the footer.
What is the simplest way to expand the height of the window as I add inputs? I'm also open to an alternative method of sliding screens left and right than using absolute positioning.
HTML
<div id="offer-2">
<div class="row one-margin-bottom">
<div class="small-12 medium-11 small-centered columns">
<h5 class="">What share of purchases will you accept in Currents?</h5>
<!-- <a class="offer-info-popup_open"><i class="half-margin-right fa fa-lg fa-question-circle"></i>How it works</a> -->
</div>
</div>
<div class="row left">
<div class="small-12 medium-6 small-centered columns">
<div class="row">
<div class="input-left small-3 columns">
<p><strong><img class="" src="{% static 'img/symbol-navy.svg' %}"/> share</strong></p>
</div>
<div class="input-right small-9 columns">
<p id="item-title"><strong>Item or category</strong></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 medium-6 small-centered columns">
<div id="item-1" class="row collapse">
<div class="input-left small-3 columns">
<div class="relative">
<input name="discount-amount-1" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/>
<span class="input-icon-right">%</span>
</div>
<!-- <span class="input-sizer"><select name="discount-type-1">
<option selected>% of</option>
<option>$ of</option>
</select></span> -->
</div>
<div class="input-right small-9 columns">
<div class="fit-left half-margin-top one-margin-right one-margin-left">of</div>
<div class="relative input-sizer">
<input name="item-name-1" type="text" placeholder="Item or category name" value="All products" class="good-cat" />
<i class="remove-input alert fa fa-times"></i>
</div>
</div>
</div>
<div id="item-2" class="row collapse">
<div class="input-left small-3 columns">
<div class="relative">
<input name="discount-amount-2" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/>
<span class="input-icon-right">%</span>
</div>
<!-- <span class="input-sizer"><select name="discount-type-1">
<option selected>% of</option>
<option>$ of</option>
</select></span> -->
</div>
<div class="input-right small-9 columns">
<div class="fit-left half-margin-top one-margin-right one-margin-left">of</div>
<div class="relative input-sizer">
<input name="item-name-2" type="text" placeholder="Item or category name" value="All services" class="good-cat" />
<i class="remove-input alert fa fa-times"></i>
</div>
</div>
</div>
<a id="add-item" class=""><i class="half-margin-top fa fa-plus-circle half-margin-right"></i>Add item or category</a>
<div class="row one-margin-top">
<a class="prev-offer button round secondary">Back</a>
<a class="next-offer button round">Next</a>
</div>
</div>
</div>
</div>
JS
var id = 3
$('#add-item').click(function(){
$(this).before('<div id="item-'+id+'" class="row collapse hidden"><div class="input-left small-3 columns"><div class="relative"><input name="discount-amount-'+id+'" type="number" class="fit-left qtr-margin-right" placeholder="20" value="20"/><span class="input-icon-right">%</span></div></div><div class="input-right small-9 columns"><div class="fit-left half-margin-top one-margin-right one-margin-left">of</div><div class="relative input-sizer"><input name="item-name-'+id+'" type="text" placeholder="Item or category name" /><i class="remove-input alert fa fa-times"></i></div></div></div>');
$('#item-'+id+'').slideDown();
id ++
});
I think you could potentially target the div with a CSS rule and handle its overflow-y with scroll (or increase its size, if you want to expand it). For a quick example, using jQuery, you could have a condition followed by $('#mydiv').css("overflow-y", "scroll"); (though it doesn't look like that div currently has an ID or custom Classname, so feel free to change that to whatever works best).
Alternatively, you could use a second, hidden div which is a parent to this one, and expand the hidden div. By using a relative size, you'd be able to fill into the invisible parent =)
It looks good, though!

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");
}
});

Categories