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
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() {
<body ng-controller="ChatController">
<br>
<div class="container">
<div class="panel panel-primary" id="container">
<div class="panel-heading">Web Based Firebase Chat Application</div>
<div class="panel-body">
<p ng-repeat="m in messages">{{m.message}} - {{m.date | date:'medium'}}</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Message here..." ng-model="messageText">
</div>
<button type="submit" class="btn btn-default" ng-click="send()">Send</button>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#container").click(function () {
$(this).next('#container').slideToggle("slow");
}); });
</script>
What your code currently says is: "When clicking #container, find the next element #container and toggle it".
That doesn't work, there is no other #container element beside the element with the id "container".
So just remove the .next('#container') part, and clicking the container will slideToggle it.
<body ng-controller="ChatController">
<br>
<div class="container">
<div class="panel panel-primary" id="container">
<div class="panel-heading">Web Based Firebase Chat Application</div>
<div class="panel-body">
<p ng-repeat="m in messages">{{m.message}} - {{m.date | date:'medium'}}</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Message here..." ng-model="messageText">
</div>
<button type="submit" class="btn btn-default" ng-click="send()">Send</button>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#container").click(function () {
$(this).slideToggle("slow");
}); });
</script>
Also keep in mind, when hiding the container, you cant toggle (show it again) it, as its now completely hidden and not clickable at all.
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".
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
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();
});
});