Why this jquery code is not working - javascript

I have the following code
Html markup
<div>
<div class="col-md-6">
<button type="button" class="adddate">Add Date</button>
</div>
<div class="col-md-12 form-group">
<div class="datesaccordion panel-group">
</div>
</div>
</div>
<div>
<div class="col-md-6">
<button type="button" class="adddate">Add Date</button>
</div>
<div class="col-md-12 form-group">
<div class="datesaccordion panel-group">
</div>
</div>
</div>
<div>
<div class="col-md-6">
<button type="button" class="adddate">Add Date</button>
</div>
<div class="col-md-12 form-group">
<div class="datesaccordion panel-group">
</div>
</div>
</div>
Jquery Code
$(document.body).on("click", ".adddate", addDate);
function addDate(e) {
$(e.target).closest(".datesaccordion").append($("<p />").html("test"));
}
Here i am trying to insert the DHTML on .adddate button click. And i want to inter the DHTML in the closest .datesaccordion div from .adddate button. But the jquery code
(above mentioned) is not working.
Can anybody please tell me what i am missing??

It should be
$(document).on("click", ".adddate", addDate);
function addDate(e) {
$(this).parent().next().find(".datesaccordion").append($("<p />").html("test"));
}
Demo: Fiddle
The datesaccordion element is not a ancestor of the button, it is a descdendant of the next sibling of the buttons's parent, so you cannot use .closest() here

Try:
$(document).on("click", ".adddate", addDate);
instead of:
$(document.body).on("click", ".adddate", addDate);
as well as changing your addDate() function to this:
function addDate(e) {
$(this).parent().siblings('.col-md-12').find('.datesaccordion').append($("<p />").html("test"));
}

Related

How do I stop JavaScript element clearing everything on click

The first delete produced works fine when clicked on "add more" but del element produced after that deletes everything present on the page. Can someone please help me, maybe something is wrong with ele, I don't have much experience with JS
Steps to reproduce :
Click on add more and then the next add more which got created on click the previous add more.
click on the last del
It deletes everything rather than deleting that very DIV
$(function() {
$(".btn-copy").on('click', function() {
var ele = $(this).closest('.example-2').clone(true);
ele.find('input').val('')
if (ele.find('button').length<2) {
let btn = document.createElement("button");
btn.innerHTML = "Delete";
btn.onclick = (e) => {
e.preventDefault()
ele.remove()
}
ele[0].appendChild(btn);
}
$(this).closest('.example-2').after(ele);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h5 class="card-title">Add Class</h5>
</div>
<div class="card-body">
<form action="#">
<div class="example-2 form-group row">
<!--<label class="col-form-label col-md-2">Input Addons</label>-->
<div class="col-xs-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Class Name</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<button class="btn-copy btn btn-primary" type="button">Add More</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2">
<button class="btn btn-primary" type="button">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
The problem was in the use of .clone()
You where cloning the latest cloned element which forced you to create an if statement to prevent creating more than one delete button. But that also did not allow you to execute what was inside the if statement after a certain number of nodes cloned.
You also could not use the btn variable outside that if statement.
The solution is to clone always the first example-2element so we can jump the use of the if statement and allow the btn variable to be used freely.
I added an extra div #wrapper to use find('div').first() so the same example-2 element can be copied every time.
Snippet
$(function() {
$(".btn-copy").on('click', function() {
var ele = $('#wrapper').find('div').first().clone(true);
ele.find('input').val('');
let btn = document.createElement("button");
btn.innerHTML = "Delete";
ele[0].appendChild(btn);
btn.onclick = (e) => { ele.remove() };
$(this).closest('.example-2').after(ele);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="example-2 form-group row" style="margin-top:15px">
<div class="col-xs-2">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Class Name</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<button class="btn-copy btn btn-primary" type="button">Add More</button>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-xs-2">
<button class="btn btn-primary" type="button" style="margin-top:30px">Submit</button>
</div>
</div>
</div>

I can't use slidetoggle

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

Jquery toggleclass and click not working

I have a button
<button id="expansion" class="btn btn-block btn-primary">
stuff
</button>
and when i click it, i want this to either appear or disappear
<div class="container-fluid" >
<div class="row">
<div class="col-md-12">
<div style="padding:0 7%;line-height:30px;text-align:justify;" id="expandable" class="dis">
<p>lol</p>
</div>
</div>
</div>
and this is my jquery function. but when i click the button, nothing happens.
$("#expansion").click(function(){
$("#expandable").toggleClass("dis");
});
class "dis" is just display:none;
You miss the . in declaration of class and use toggle instead of toggleClass
Here is working fiddle for you.
HTML
<button id="expansion" class="btn btn-block btn-primary">
stuff
</button>
<div class="container-fluid" >
<div class="row">
<div class="col-md-12">
<div style="padding:0 7%;line-height:30px;text-align:justify;" id="expandable" class="dis">
<p>lol</p>
</div>
</div>
</div>
JS
$("#expansion").click(function(){
$("#expandable").toggle(".dis");
});
CSS
.dis{
display:none;
}
You need to assing a height to the element you want to click cuz it seems invisible.
Try this fiddle: https://jsfiddle.net/g72nr1sp/
HTML
<div class="container-fluid" >
<div class="row">
<div class="col-md-12" id="expansion" style="height:20px;">
<div style="padding:0 7%;line-height:30px;text-align:justify;" id="expandable" class="dis">
<p>lol</p>
</div>
</div>
</div>
</div>
CSS
.dis {
display:none;
}
#expansion{
background-color:lime;
height:20px;
}
Javascript
$(document).ready(function(){
$("#expansion").click(function(){
$("#expandable").toggleClass("dis");
});
});
include jquery and toggle all are working fine after that you can hide and show
$(document).ready(function(){$("#expansion").click(function(){
$("#expandable").toggle();});});

Jquery select button by name

I don't understand how to select by name with Jquery the button "g_list".
<div class="col-sm-4 sezione-na">
<div class="titolo-sezione-na">Title:</div>
<div class="form-group">
<div class="col-sm-12"><button name="g_list" type="button" class="btn btn-primary btn-block">Generate list</button></div>
</div>
I wrote this Jquery code, but it doesn't work:
$("input[name='g_list']").click(function(){
alert( "ready!" );});
In your code input[name='g_list'] will be search input element with that name, instead you need to search for button so use button[name='g_list'] for that.
$("button[name='g_list']").click(function() {
//--^------ change here
alert("ready!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 sezione-na">
<div class="titolo-sezione-na">Title:</div>
<div class="form-group">
<div class="col-sm-12">
<button name="g_list" type="button" class="btn btn-primary btn-block">Generate list</button>
</div>
</div>

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

Categories