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>
Related
I have one page website, with three forms. The first form has class active and the rest are hidden. All forms have buttons with same class .all-pages.
When I click on next button I want the first page to get class hidden, and second get active. When I'm on the second form click on the SAME button NEXT I want the second page to get class hidden, and the third page get active. Please HELP ME :)
And please just JavaScript.
I have 3 forms like this:
<div class="container-fluid"> <!-- first page container -->
<div class="row">
<div class="col-lg-5 col-lg-offset-3">
<form class="well margin-form-top form-color-bg page1">
<div class="row"> <!-- webpage name -->
<div class="col-lg-4 col-lg-offset-4">
<h2>Book a Room</h2>
</div>
</div>
<div class="row"> <!-- information about webpage -->
<div class="col-lg-7 col-lg-offset-2 h4">
<p>This information will let us know more about you.</p>
</div>
</div>
<div class="row"> <!-- navigation -->
<div class="col-lg-12 button-padding-zero">
<ul class="nav nav-pills nav-justified btn-group">
<button type="button" class="btn btn-danger btn-default btn-lg button-width navigation-font-size border-r grey-bg all-pages red active" data-page="0">
<b>ACCOUT</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l-r grey-bg all-pages red" data-page="1">
<b>ROOM TYPE</b>
</button>
<button type="button" class="btn btn-default btn-default btn-lg button-width navigation-font-size border-l grey-bg all-pages red" data-page="2">
<b>EXTRA DETAILS</b>
</button>
</ul>
</div>
</div>
<br>
<div class="row"> <!-- let's start -->
<div class="col-lg-5 col-lg-offset-4 h4">
<p>Let's start with the basic details.</p>
</div>
</div>
<br>
<div class="row"> <!-- first row email and country -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="email" class="input-sm btn input-width text-left" placeholder="Your Email">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Country</option>
<option>Serbia</option>
<option>Russia</option>
<option>Brazil</option>
</select>
</div>
</div>
<br>
<div class="row"> <!-- 2nd row password and budget -->
<div class="col-lg-5 col-lg-offset-0">
<div class="input-group">
<input type="password" class="input-sm btn input-width text-left" placeholder="Your Password">
</div>
</div>
<div class="col-lg-6 col-lg-offset-1 button-padding-zero">
<select class="form-control input-sm btn input-width">
<option value="" selected>Daily Budget</option>
<option>100$</option>
<option>200$</option>
<option>300$</option>
</select>
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-lg-3 col-lg-offset-9">
<button type="button" id="next-button" class="btn btn-default btn-danger btn-lg button-next-width all-pages" data-page="0">NEXT</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');
var page3 = document.querySelector('.page3');
var emptyArrey = [];
var nextButtons = document.querySelectorAll('.all-pages');
function nextFunction(event) {
// debugger;
var allButtons = document.querySelectorAll('.all-pages');
for (var i = 0; i < allButtons.length; i++) {
var oneButton = allButtons[i].dataset.page;
if (allButtons[i].dataset.page === '0') {
page1.classList.add('hidden');
page2.classList.remove('hidden');
return;
debugger;
} else {
page2.classList.add('hidden');
page3.classList.remove('hidden');
}
}
}
for (var nextButton of nextButtons){
nextButton.addEventListener('click', nextFunction);
}
You could use the button's attribute data-page to keep track of which form you're currently on, and then show the appropriate form.
// give your button the id "next-button"
var currentPage = document.getElementByID("next-button").getAttribute("data-page");
Once you know what form you're on, then you can hide the others as needed
If I understood your question, here is possible solution.
const nextButtons = document.querySelectorAll('.all-pages');
const pages = document.querySelectorAll('.page');
nextButtons.forEach(btn => {
btn.addEventListener('click', () => {
pages.forEach(page => {
page.hidden = true;
});
const pageActive = document.querySelector(`.page-${btn.dataset.page}`);
pageActive.hidden = false;
})
})
<div class="page page-1">
<button class="all-pages" data-page="2">NEXT 2</button>
</div>
<div class="page page-2" hidden=true>
<button class="all-pages" data-page="3">NEXT 3</button>
</div>
<div class="page page-3" hidden=true>
<button class="all-pages" data-page="1">NEXT 1</button>
</div>
I have the following snippets:
My HTML Page which uses 4 buttons to show/hide four divs, each will have their own content.
var otherDivs = ["addCustomer", "searchCustomer", "addItem", "searchItem"];
function show(target) {
var index = otherDivs.indexOf(target);
for (i = 0; i < otherDivs.length; i++) {
if (i != index) {
$(document.getElementById(otherDivs[i].toString())).hide();
} else {
$(document.getElementById(otherDivs[i].toString())).show();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
...
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
...
</div>
<div class="row trigger" name="addItem" id="addItem">
...
</div>
<div class="row trigger" name="searchItem" id="searchItem">
...
</div>
</div>
The problem is, only the fist button and div (addCustomer) works correctly. I have tried split methods but I would prefer to keep the single method. Any help is appreciated.
Use jQuery fully when you have it.
Although with your HTML and inline script this would work:
function show(target) {
$('.trigger').hide();
$("#"+ target).show();
}
As could this (but it would not work as a radio button more like a checkbox):
function show(target) {
$("#"+ target).toggle();
}
I strongly suggest you use unobtrusive code and move the script out of the HTML
$(function() {
$(".redButton").on("click",function() { // any button
$(".trigger").hide(); // hide the divs
$("#"+$(this).data("id")).show(); // show the relevant div
});
});
.trigger { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button type="button" class="redButton" data-id="addCustomer">Add Customer</button>
<button type="button" class="redButton" data-id="searchCustomer">Search Customers</button>
<button type="button" class="redButton" data-id="addItem">Add Item</button>
<button type="button" class="redButton" data-id="searchItem">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
Search Customer
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
Add Customer
</div>
<div class="row trigger" name="addItem" id="addItem">
Add Item
</div>
<div class="row trigger" name="searchItem" id="searchItem">
Search Item
</div>
</div>
Actually your code working properly but the thing is that you cannot specfiy which div is opened now because all divs have the same content, so when you add numbers or a different content you can know which one is opened now
var otherDivs = ["addCustomer", "searchCustomer", "addItem", "searchItem"];
function show(target) {
var index = otherDivs.indexOf(target);
for (i = 0; i < otherDivs.length; i++) {
if (i != index) {
$(document.getElementById(otherDivs[i].toString())).hide();
} else {
$(document.getElementById(otherDivs[i].toString())).show();
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
.11..
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
.22..
</div>
<div class="row trigger" name="addItem" id="addItem">
.33..
</div>
<div class="row trigger" name="searchItem" id="searchItem">
.44..
</div>
</div>
Simpy use the JQuery toggle function like so
function show(target) {
$('#'+target).toggle();
}
You could replace your entire JS in the snippet to just these LOC. HTML remains the same.
function show(target) {
$('#'+target).toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer">
...
</div>
<div class="row trigger" name="addCustomer" id="addCustomer">
...
</div>
<div class="row trigger" name="addItem" id="addItem">
...
</div>
<div class="row trigger" name="searchItem" id="searchItem">
...
</div>
</div>
Updated answer
function show(target) {
$("#Display").html( $('#' + target).html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
<div class="row" name="tabs">
<button class="redButton" onclick="show('addCustomer')">Add Customer</button>
<button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
<button class="redButton" onclick="show('addItem')">Add Item</button>
<button class="redButton" onclick="show('searchItem')">Search Item</button>
</div>
<div class="row trigger" name="searchCustomer" id="searchCustomer" hidden>
Searching Customers
</div>
<div class="row trigger" name="addCustomer" id="addCustomer" hidden>
Customers added
</div>
<div class="row trigger" name="addItem" id="addItem" hidden>
Items added
</div>
<div class="row trigger" name="searchItem" id="searchItem" hidden>
Searching Items
</div>
<div id="Display">
</div>
</div>
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>
I'm going mad here.
I have a search icon. If the user clicks on it, a dropdown is opened. If he/she clicks outside of the element, it closes the dropdown. My problem is that I want to close it if the user clicks again on the icon, but this part doesn't work. I guess the problem is the event.stopPropagation.
I have the following js code:
$('.mobile-search').on('click', function(event){
$('.oe_searchview').show().css('margin-bottom', '15px');
if ($('.oe-right-toolbar').length) {
viewOptions.hide();
}
event.preventDefault();
event.stopPropagation() // stops bubbling
// hide search if user clicks outside of the search button
$('html').on('click.search', function (ev) {
if (!$(ev.target).parents('.oe_searchview').length && !$(ev.target).parents('.oe-search-options').length) { // if the click's parent has no .oe_searchview class then hide
$('html').off('click.search');
searchField.hide();
} else if ($(ev.target).parents('.mobile-search').length) {
searchField.hide();
}
});
});
HTML code is:
<div class="col-md-4 col-sm-6 col-xs-12 active-app-title">
<h2 class="hidden-xs">OPPORTUNITIES</h2>
<div class="btn btn-primary"><div class="ripple" style="width: 100%; height=100%;">Create</div> </div>
<span>or</span>
<div class="btn btn-primary"><div class="ripple" style="width: 100%; height=100%;">Add new column</div></div>
<div class="mobile-search">
<img src="/website/static/src/img/search-icon.png" alt="Search Again" class="search-icon"/>
</div>
<div class="mobile-views">
<a class="flaticon-pause45" href="#"></a>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 search">
<div class="oe_searchview form-control input-sm active">
<div class="oe_searchview_search" title="Search Again">
<img src="/website/static/src/img/search-icon.png" alt="Search Again" class="search-icon"/>
</div>
<div class="oe_searchview_facets">
<div class="oe_searchview_input" contenteditable="true" tabindex="0"></div>
</div>
<div class="oe_searchview_unfold_drawer" title="Advanced Search...">
<img src="/website/static/src/img/arrow-down.png" alt="Search Again" class="arrow-down-icon"/>
</div>
</div>
<div class="oe-search-options btn-group">
<div class="btn-group btn-group-sm">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Filters</button>
</div>
<div class="btn-group btn-group-sm oe-groupby-menu">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Group By</button>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Favorites</button>
</div>
</div>
<div class="oe-right-toolbar">
<div class="oe-view-manager-switch btn-group btn-group-sm">
<span class="flaticon-pause45"></span>
<span class="flaticon-list91"></span>
<span class="flaticon-statistical"></span>
<span class="flaticon-calendar160"></span>
</div>
</div>
</div>
I'm novice in js so every help would be appreciated.
This is how I would approach it
// one behaviour for the search button
// this checks to see if the search button is visible, and if so,
$('.mobile-search').on('click', function(event){
event.preventDefault();
event.stopPropagation() // stops bubbling
if($('.oe_searchview').is(":visible")){
// hide the search view
$('.oe_searchview').hide();
}
else
{
// show the search view
$('.oe_searchview').show().css('margin-bottom', '15px');
if ($('.oe-right-toolbar').length) {
viewOptions.hide();
}
}
});
// this second behaviour happens only
// hide search if user clicks outside of the search button
$('html').on('click', function (ev) {
if (!$(ev.target).parents('.oe_searchview').length && !$(ev.target).parents('.oe-search-options').length) { // if the click's parent has no .oe_searchview class then hide
$('.oe_searchview').hide();
}
});
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"));
}