I have form with input field and check box and two buttons , buttons are for add and delete. But i here want to remove add button and want to show next field with just checking the check box.How can i do this?
angular.module('ionicApp',['ionic'])
.controller('myctrl',function($scope){
$scope.data ={
names:[{ name:""}]
};
$scope.addRow = function(index){
var name = {name:""};
if($scope.data.names.length <= index+1 && $scope.data.names.length<10){
$scope.data.names.splice(index+1,0,name);
}
};
$scope.deleteRow = function($event,index){
if($event.which == 1)
$scope.data.names.splice(index,1);
}
})
.button-dark{
margin-top:10px;
}
.button-delete{
display: inline-block;
float: right;
position: relative;
width: 24px;
height: 33px;
top: -36px;
right: 5px;
color: #fff;
background: red;
border: 0;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Multiple input</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="myctrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic app</h1>
</ion-header-bar>
<ion-content>
<form id="valueForm" ng-submit="saveValues(values)">
<div ng-repeat="name in data.names track by $index">
<label class="item item-input" style="width: 92%">
<input type="text" placeholder="Answer" ng-model="data.names[$index].name">
<ion-checkbox ng-model="success.first" ng-disabled="!data.names[$index].name" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
</label>
<button type="button" class=" button-delete" ng-click="deleteRow($event,$index)" ng-disabled="$index == 0"><i class="ion-ios-minus-empty"></i></button>
<input type="button" ng-click="addRow($index)" value="Add" ng-show="$last">
</div>
</div>
<button type="submit" class="button button-dark button-shadow pull-right" style="">Submit</button>
</div>
</form>
</ion-content>
</body>
</html>
Remove the Add Button and add ng-click="addRow($index)" to checkbox.. check below working snippet
angular.module('ionicApp',['ionic'])
.controller('myctrl',function($scope){
$scope.data ={
names:[{ name:""}]
};
$scope.addRow = function(index){
var name = {name:""};
if($scope.data.names.length <= index+1 && $scope.data.names.length<10){
$scope.data.names.splice(index+1,0,name);
}
};
$scope.deleteRow = function($event,index){
if($event.which == 1)
$scope.data.names.splice(index,1);
}
})
.button-dark{
margin-top:10px;
}
.button-delete{
display: inline-block;
float: right;
position: relative;
width: 24px;
height: 33px;
top: -36px;
right: 5px;
color: #fff;
background: red;
border: 0;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Multiple input</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="myctrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic app</h1>
</ion-header-bar>
<ion-content>
<form id="valueForm" ng-submit="saveValues(values)">
<div ng-repeat="name in data.names track by $index">
<label class="item item-input" style="width: 92%">
<input type="text" placeholder="Answer" ng-model="data.names[$index].name">
<ion-checkbox ng-model="success.first" ng-disabled="!data.names[$index].name" style="border: none;padding-left: 30px;" class="checkbox-royal" ng-click="addRow($index)"></ion-checkbox>
</label>
<button type="button" class=" button-delete" ng-click="deleteRow($event,$index)" ng-disabled="$index == 0"><i class="ion-ios-minus-empty"></i></button>
</div>
</div>
<button type="submit" class="button button-dark button-shadow pull-right" style="">Submit</button>
</div>
</form>
</ion-content>
</body>
</html>
Related
I'm trying to get each button to change color on click. However, I want to separate buttons 1-3 from buttons 4-6 so they are independent from each other. I want to be able to click buttons 1-3 and they change color without affecting 4-6 and vice versa. My code is attached. I'm sure this is very simple but my feeble mind can't figure it out :-) Any suggestions?
$(document).ready(function(){
$("button").click(function() {
$(".featuredBtn.active").removeClass("active");
$(this).addClass("active");
});
});
$(document).ready(function(){
$("button").click(function() {
$(".featuredBtn2.active").removeClass("active");
$(this).addClass("active");
});
});
.featuredBtn.active,
.featuredBtn2.active {
background-color: #bf9471;
color: white;
}
.featuredBtn,
.featuredBtn2 {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
.row {
margin-bottom: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
<div class="row2">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
<button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
<button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
</div>
</div>
</body>
</html>
Instead of applying both handlers to all instances of $('button'), specifically target the instances you want. Your current markup separates them by class, so you can use $(".featuredBtn") and $(".featuredBtn2") to identify those elements:
$(document).ready(function(){
$(".featuredBtn").click(function() {
$(".featuredBtn.active").removeClass("active");
$(this).addClass("active");
});
});
$(document).ready(function(){
$(".featuredBtn2").click(function() {
$(".featuredBtn2.active").removeClass("active");
$(this).addClass("active");
});
});
.featuredBtn.active,
.featuredBtn2.active {
background-color: #bf9471;
color: white;
}
.featuredBtn,
.featuredBtn2 {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
.row {
margin-bottom: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
<div class="row2">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
<button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
<button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
</div>
</div>
</body>
</html>
Simple, just use the classes that you have already supplied in the selector.
Also, note that you only need one ready handler, not two.
$(document).ready(function(){
$("button.featuredBtn").click(function() {
$(".featuredBtn.active").removeClass("active");
$(this).addClass("active");
});
$("button.featuredBtn2").click(function() {
$(".featuredBtn2.active").removeClass("active");
$(this).addClass("active");
});
});
.featuredBtn.active,
.featuredBtn2.active {
background-color: #bf9471;
color: white;
}
.featuredBtn,
.featuredBtn2 {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
.row {
margin-bottom: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
<div class="row2">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
<button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
<button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
</div>
</div>
</body>
</html>
Your error is that you add both click handlers to every button instead of only adding the appropriate handler to the appropriate buttons. So every time you push a button, you call both handlers consecutively, rather than just the handlers for that button set.
Replacing the first $("button") with $(".featuredBtn") and the second $("button") with $(".featuredBtn2") achieves what you're tying to achieve.
Note that there's no need to call $(document).ready() twice. You can just call it once combine the code for both handlers in that single call. Technically, this is not an error, but your code is cleaner if you just call $(document).ready() here.
Demo
$(document).ready(function(){
$(".featuredBtn").click(function() {
$(".featuredBtn.active").removeClass("active");
$(this).addClass("active");
});
$(".featuredBtn2").click(function() {
$(".featuredBtn2.active").removeClass("active");
$(this).addClass("active");
});
});
.featuredBtn.active,
.featuredBtn2.active {
background-color: #bf9471;
color: white;
}
.featuredBtn,
.featuredBtn2 {
width: 250px;
height: 50px;
color: #8c8c8c;
font-weight: 700;
background-color: #f4efeb;
border: none;
letter-spacing: 2px;
outline: none;
}
.row {
margin-bottom: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="row">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
<button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
<button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
</div>
</div>
<div class="row2">
<div class="col-lg-12 col-xs-12" style="text-align: center;">
<button type="button" class="featuredBtn2 active" id="btnFour">BUTTON FOUR</button>
<button type="button" class="featuredBtn2" id="btnFive">BUTTON FIVE</button>
<button type="button" class="featuredBtn2" id="btnSix">BUTTON SIX</button>
</div>
</div>
</body>
</html>
When click on save button function myfunc2 will be exceuted which use a for in loop to iterate the minus array. This array conatain all the minus icon. i set style.display = 'none' and expect when i click the save button the icon will disappear, but it didn't work. i dont know what went wrong
const minus = document.getElementsByClassName('minus');
const item = document.getElementsByClassName('item');
const input = document.getElementsByTagName('input');
//right
const save_btn = document.getElementById('save');
save_btn.addEventListener('click',myfunc2);
//delete all minus
function myfunc2() {
for(let x in minus) {
minus[x].style.display = 'none';
}
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<!--d-flex overide item-->
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="submit" class="btn btn-success save">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>
There are 2 things you are doing wrong. First of all,
const save_btn = document.getElementByClassName('save');
should be
const save_btn = document.getElementsByClassName('save');
Secondly, save_btn would now be an array since you have gotten multiple elements by class name (hence the getElementsByClassName) plural form.
The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s). (doc)
So calling save_btn.addEventListener('click',myfunc2); wouldn't work since you are trying to assign this to an array. You either use
save_btn[0].addEventListener('click',myfunc2);
or, a more recommended approach, give the button an id and use getElementById() (doc)
Changed snippet below:
const minus = document.getElementsByClassName('minus');
const item = document.getElementsByClassName('item');
const input = document.getElementsByTagName('input');
//right
const save_btn = document.getElementById('saveBtn');
save_btn.addEventListener('click', myfunc2);
//delete all minus
function myfunc2() {
[].forEach.call(minus, function(m) {
m.style.display = 'none';
});
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<!--d-flex overide item-->
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="button" id="saveBtn" class="btn btn-success save">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>
I choose element div with classname item using property querySelector('.item), and expect this element to disapear when I click element a.
however it didn't work when style.display is set to none. I dont know what went wrong
const minus = document.querySelector('a');
//const item = document.getElementsByClassName('item');
const item = document.querySelector('.item');
const input = document.querySelector('input');
minus.addEventListener('click',myfunc);
function myfunc(){
//return the display property
item.style.display = 'none';
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="submit" class="btn btn-success">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>
.d-flex uses !important which overrides the display: none, It works when you remove it:
const minus = document.querySelector('a');
//const item = document.getElementsByClassName('item');
const item = document.querySelector('.item');
const input = document.querySelector('input');
minus.addEventListener('click',myfunc);
function myfunc(){
//return the display property
item.style.display = 'none';
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<div class="item mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="submit" class="btn btn-success">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>
Or, instead of completely removing it you can set property display: none as !important as well so d-flex won't be able to override it item.style.setProperty("display", "none", "important"):
const minus = document.querySelector('a');
//const item = document.getElementsByClassName('item');
const item = document.querySelector('.item');
const input = document.querySelector('input');
minus.addEventListener('click',myfunc);
function myfunc(){
//return the display property
item.style.setProperty("display", "none", "important");
}
* {
box-sizing: border-box;
}
.fa {
padding: 5px;
border-radius: 50%;
border: 1px solid blue;
}
.item {
gap: 10px;
}
a:hover {
cursor: pointer;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--font awe-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--bs-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!--js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container mt-3">
<h1>Bucket list</h1>
<button type="submit" class="btn btn-primary mb-3">Add item</button>
<form>
<div class="item d-flex mb-3">
<input type="text" class="form-control form-control">
<i class="fa fa-minus"></i>
<i class="fa fa-pencil"></i>
</div>
<button type="submit" class="btn btn-success">Save</button>
<button type="submit" class="btn btn-danger">Edit</button>
</form>
</div>
<script src="js.js"></script>
</body>
</html>
Here is my jquery:
$(".time-block .listgroup").sortable({
connectWith: $(".time-block .listgroup"),
items: "> textarea",
placeholder: "highlight",
//helper: "clone",
update: function(event){
var changeArr= []
$(this).each(function(){
changeArr.push({
text: $(this)
.children()
.find("textarea")
.val()
})
})
// update on localstorage object and save and get on page refresh
saveEvent()
}
})
Here is what the html looks like:
<div class="container">
<!-- Timeblocks go here-->
<div class ="time-block">
<div class ="hour" id="9"> 9 AM</div>
<ul class= "listgroup">
<textarea name="" id="" cols="80" rows="5"></textarea>
</ul>
<button class ="saveBtn"><i class="fas fa-save"></i></button>
</div>
<div class ="time-block">
<div class ="hour" id="10"> 10 AM</div>
<ul class= "listgroup">
<textarea name="" id="" cols="80" rows="5"></textarea>
</ul>
<button class ="saveBtn"><i class="fas fa-save"></i></button>
</div>
I believe I put the appropriate CDNs at the bottom of the body:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-touch-punch#0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="assets/script.js"></script>
</body>
I'm a beginner trying to experiment with different functionalities and I don't really understand what is going wrong here. Appreciate the help in advance.
The jQuery UI Sortable needs to be applied to the parent element that contains the items you want sorted. I think you will get successful results when you create the container in the right place. Application test image, sample codes and references are available below:
$(function () {
$('#container').sortable({
placeholder: "ui-state-highlight",
helper: 'clone'
});
})
#container {
margin-left: 300px;
margin-top: 100px;
position: relative;
}
.newStep {
cursor: pointer;
float: right;
font-size: 10px;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: -12px;
margin-top: 0 !important;
padding: 3px 7px;
width: 80px !important;
}
.step {
border-top-left-radius: 0 !important;
font-family: lucida Grande;
margin: 4px;
}
.stepNumber {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
left: -20px;
padding: 10px;
position: absolute;
top: 3px;
}
.inset {
color: white;
background: none repeat scroll 0 0 #000000;
border-radius: 5px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>
<body>
<div style="float:left; clear:both;" id="container">
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">1</span>
<textarea placeholder="1 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">2</span>
<textarea placeholder="2 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
<div style="position: relative;" class="sortable">
<span class="stepNumber inset">3</span>
<textarea placeholder="3 A.M." name="" id="" cols=100 class="step valid" style="margin-left: 10px;"></textarea>
</div>
</div>
</body>
</html>
References
jQuery Sortable Post
Consider the following based on the Demo: Sortable | jQuery UI | Include / exclude Items.
$(function() {
function toArray(sort) {
var results = [];
$("li", sort).each(function(i, el) {
if ($(el).hasClass("hour")) {
results.push({
hour: $(el).attr("id"),
details: $(el).next().find("textarea").text()
});
}
});
return results;
}
function saveEvent(string) {
//localStorage.setItem("hours", string);
console.log("Saving", string);
}
$(".time-blocks").sortable({
cancel: ".hour",
handle: ".fa-grip-lines-vertical",
update: function(event) {
saveEvent(JSON.stringify(toArray(this)));
}
});
});
.time-blocks {
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
}
.time-blocks .ui-widget-header {
padding-left: 1.5em;
}
.time-blocks textarea {
width: calc(100% - 50px);
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div class="container">
<!-- Timeblocks go here-->
<ul class="time-blocks ui-widget">
<li class="hour" id="9">
<div class="ui-widget-header">9 AM</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 1</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
<li class="hour" id="10">
<div class="ui-widget">
<div class="ui-widget-header">10 AM</div>
</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 2</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
<li class="hour" id="11">
<div class="ui-widget">
<div class="ui-widget-header">11 AM</div>
</div>
</li>
<li class="content">
<div class="ui-widget-content">
<i class="fas fa-grip-lines-vertical"></i>
<textarea rows="5">Details 3</textarea>
<button class="saveBtn"><i class="fas fa-save"></i></button>
</div>
</li>
</ul>
</div>
You have one primary list. Each List Item has either Hours or Details. We exclude (cancel) the Hours and only worry about sorting the details into Hours.
Since this does not align well, we need a function that can combine the data. This combines the relative data so that we get an Array of Object where the Hours relate to the Details.
Sortable may not be best for this since I suspect you7 only want 1 textarea per hour. There is a chance the User may drag one into another.
I'm working on a website as part of a project. The idea is to be able to filter the div tags by their title. For example, if you wanted to search for 'Television' or 'Music', etc.
My idea was to use the ID for each div to search and filter. Any advice on how to do that or any method is greatly appreciated!
Search bar:
<input id="search-bar" class="options-button" type="text" placeholder="Search Categories...">
Div tags to be search:
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
CSS for the divs:
.discover-subscribe, .discover-unsubscribe {
width: calc(100% + 14px);
text-align: center;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
color: white;
background: #63c401;
border: none;
font-size: 14px;
margin: 14px 0 -14px -14px;
padding: 10px 10px;
text-shadow: rgba(0,0,0,0.4) 0 0 6px;
box-shadow: rgba(0,0,0,0.3) 0 0 4px;
transition: background 0.2s ease-in-out;
}
.discover-unsubscribe {
background: #DE1B1B;
}
.discover-subscribe:hover {
background: #52A301;
}
.discover-unsubscribe:hover {
background: #B81616;
}
Try the following way with Array's forEach():
var divEl = document.querySelectorAll('div.discover-tile');
divEl.forEach(function(d){
if(d.getAttribute('id') == 'television'){
console.log(d);
}
});
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
Or you can use filter() like:
var divEl = document.querySelectorAll('div.discover-tile');
var television = Array.prototype.filter.call(divEl, function(d){
return d.getAttribute('id') == 'television';
});
console.log(television);
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
The answers presented don't cover all the gotchas that you will run into. I would suggest you try using list.js to filter - it is very powerful and has a very small footprint.
http://listjs.com/
I've used it on several projects and it is rock solid and easy to setup.
You can do it in the following way:
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList div").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<div class="container">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<h2>
example to filter div content</h2>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<div class="list-group" id="myList">
<div>Label 1</div>
<div>Label 2</div>
<div>asdf 1</div>
<div>asdf 2</div>
</div>
</div>