I have many form in my angular app like this
<form ng-submit="" ng-repeat="app in apps">
<div class="container">
<div id="single-app" >
<div class="checkbox">
<label><input type="checkbox" id="check-app">{{app.name}}</label>
</div>
<img src="{{app.url}}" height="140" width="140">
<div id="description">
<textarea></textarea>
</div>
</div>
</div>
</form>
I want all text area hidden default and specific show text area when i checked box
I tried this jquery code but doesn't work
$(document).ready(function(){
$("#description").hide();
$('#check-app').click(function(){
$('#description').fadeToggle();
})
});
It is not the angular way to solve it, still to make your script to work
ID of an element must be unique, use class to group similar elemets
<form ng-submit="" ng-repeat="app in apps">
<div class="container">
<div class="single-app" >
<div class="checkbox">
<label><input type="checkbox" class="check-app"/>{{app.name}}</label>
</div>
<img src="{{app.url}}" height="140" width="140"/>
<div class="description">
<textarea></textarea>
</div>
</div>
</div>
</form>
then
$(document).ready(function () {
$(".description").hide();
$(document).on('click', '.check-app', function () {
$(this).closest('.single-app').find('.description').stop(true, true).fadeToggle();
})
});
Demo: Fiddle
One easy solution using ng-way(without slide animation)
<form ng-submit="" ng-repeat="app in apps">
<div class="container">
<div class="single-app" >
<div class="checkbox">
<label><input type="checkbox" class="check-app" ng-model="visible"/>{{app.name}}</label>
</div>
<img src="{{app.url}}" height="140" width="140"/>
<div class="description" ng-show="visible">
<textarea></textarea>
</div>
</div>
</div>
</form>
Demo: Fiddle
Related
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() {
I am trying to hide div with class="input" only when hidden-span is equal to i-am-secret.
I've tried different approaches using .each(function) or .next() but could not get my head around it. In order to illustrate the example I've added the code bellow.
Please note that I can not add any id's or classes and the order of the rows may vary.
(function($) {
$('.basket__item-row').each(function() {
if ($('.hidden-span').is(":contains('i-am-secret')")) {
$(this).next().hide();
}
});
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am extra div
<span class="hidden-span">i-am-secret</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
<span class="hidden-span">another class</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
I would do a traversal this way...
$('.hidden-span') // Target all the hidden spans.
.filter(function () { // Filter all the span that contains the text.
return $(this).text().indexOf("i-am-secret") !== false;
})
.closest(".image") // Get the parent `.image`.
.next(".input") // Get the `.input` which is its sibling.
.hide(); // Hide it.
(function($) {
$('.hidden-span').filter(function () {
return $(this).text().indexOf("i-am-secret") !== false;
}).closest(".image").next(".input").hide();
})(jQuery)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am extra div
<span class="hidden-span">i-am-secret</span>
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
<div class="basket__item-row">
<div class="image">
<div>
I am normal div
</div>
</div>
<div class="input">
Please hide me
</div>
</div>
Please correct the syntax errors. It should be class="basket__item-row".
When I'm trying to add dynamically a div after click on a "reply" class, it is just repeat for my first div.
I want to add that div after each div but it is just works for the first one.
Here is my code:
$(function () {
$(".repetable").hide();
$(".reply").bind("click", function () {
$(".repetable").hide();
$(".repetable").slideDown("slow")
$("#nazar").slideUp("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<!--div 1-->
<div class="comment1">
<p>YOUR COMMENT</p>
<div class="reply">
reply
</div>
</div>
<!--End div 1-->
<div class="repetable">
<form class="formnazar-user">
<input type="text" />
</form>
</div>
<!--div 2-->
<div class="comment1">
<p>YOUR COMMENT2</p>
<div class="reply">
reply
</div>
</div>
<!--End div 2-->
<div class="repetable">
<form class="formnazar-user">
<input type="text" />
</form>
</div>
</div>
If I understand correctly the problem, after .reply click the both of the .repetable did the slidedown() animation.
So, you just need to do this only on the .repetable that come after the comment. So, you need to use the parents() function,
Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector.
like this:
$(function () {
$(".repetable").hide();
$(".reply").bind("click", function () {
// $(".repetable").hide(); - You don't need it
// You want to do this only for the next div after the sepecific comment
$(this).parents('.comment1').next().slideDown("slow");
//$(".repetable").slideDown("slow")
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<!--div 1-->
<div class="comment1">
<p>YOUR COMMENT</p>
<div class="reply">
reply
</div>
</div>
<!--End div 1-->
<div class="repetable">
<form class="formnazar-user">
<input type="text" />
</form>
</div>
<!--div 2-->
<div class="comment1">
<p>YOUR COMMENT2</p>
<div class="reply">
reply
</div>
</div>
<!--End div 2-->
<div class="repetable">
<form class="formnazar-user">
<input type="text" />
</form>
</div>
</div>
The problem here is that you select by the same class. All your "repetable" divs will be affected by your
$(".repetable").hide();
$(".repetable").slideDown("slow")
To solve this, you can make the HTML to look more like this. Note the replay input is inside the comment where it actually belongs. (or you can use a different parent to group the comment div with the comment replay input)
<div class="main">
<!--div 1-->
<div class="comment">
<p>YOUR COMMENT</p>
<div class="reply">
reply
</div>
<div class="repetable">
<form class="formnazar-user">
<input type="textbox" />
</form>
</div>
</div>
<!--End div 1-->
<!--div 2-->
<div class="comment">
<p>YOUR COMMENT2</p>
<div class="reply">
reply
</div>
<div class="repetable">
<form class="formnazar-user">
<input type="textbox" />
</form>
</div>
</div>
<!--End div 2-->
</div>
After that, you can use a js event handler like this, to dynamically select the replay input related to the replay button that the user just clicked:
$(".repetable").hide();
$(".reply").bind("click", function(e) {
var target = $(e.target);
var targetRepeatable = target.parents('.comment').find('.repetable');
targetRepeatable.hide();
targetRepeatable.slideDown("slow")
$("#nazar").slideUp("slow");
});
You can see it in action here: https://jsfiddle.net/hm1zxy5b/
Thanks
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
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();
});
});