I'm trying to create a little Sortable JS project where I can clone items from the left side into the right, and can delete items from the right side. I tried creating a button where on click it deletes the parent list item but it's not working properly
I was wondering if someone could look at my codepen (code also below) and see what I'm doing incorrectly? The delete buttons only work sometimes??? [If you delete an item on the right side, once you drag any more in they can no longer be deleted!]
Ideally I'd like to have NO delete button on the left side and only have the ability to delete once its been dragged on the right side but I'm not sure how to implement this.
Please advise, thank you!!
$("#sortable1").sortable({
connectWith: ".builder-stage",
helper: function(event, el) {
copyHelper = el.clone().insertAfter(el);
return el.clone();
},
stop: function() {
copyHelper && copyHelper.remove();
}
});
$(".builder-stage").sortable({
receive: function(event, ui) {
copyHelper = null;
}
});
$(".delete").click(function() {
$(this).parent().remove();
});
.widgets-panel {
float: left;
height: 500px;
width: 300px;
border-right: 1px solid #000;
padding: 15px;
.rows-widget-list {
list-style: none;
padding: 0;
margin: 0;
> li {
display: block;
padding: 10px 15px;
border: 1px solid #ddd;
margin-bottom: 5px;
background-color: #fff;
}
}
.ui-sortable-placeholder {
position: absolute;
}
}
.stage {
padding: 15px;
float: left;
width: calc(100% - 300px);
.connectedSortable {
list-style: none;
padding: 0;
margin: 0;
> li {
display: block;
padding: 10px 15px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
}
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
}
button:hover {
color: #CF2323;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pagebuilder clearfix">
<div class="widgets-panel">
<ul id="sortable1" class="connectedSortable rows-widget-list">
<li class="ib-row row-widget-list-item">
<select>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
</select>
<button class="delete">Delete</button>
</li>
<li class="ib-row row-widget-list-item">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button class="delete">Delete</button>
</li>
</ul>
</div>
<div class="stage">
<ul id="sortable2" class="builder-stage connectedSortable">
<li class="ui-state-default">An item
<button class="delete">Delete</button>
</li>
</ul>
</div>
</div>
Instead of:
$(".delete").click(function() {
$(this).parent().remove();
});
Put:
$("#sortable2").on('click', '.delete', function() {
$(this).parent().remove();
});
Since you are dynamically dropping html elements you need to dynamically attach events to them.
Related
I have 2 optgroup in my select list (category and subcategory)
and i am trying to show optgroup and hide other on selection of subcategory.
for example if I choose in the category (sport, music)
in the subcategory I display only the sport and music
I tried with the following code but it doesn't work
Thanks
$("#custom_form_names_category").on("change", function() {
var selectedVal = $(this).find("option:selected").text();
console.log(selectedVal);
$('#custom_form_names_subcategorie > [aria-label="' + selectedVal + '"]')
.show()
.siblings("optgroup")
.css("display", "none");
});
$(".js-select2").select2({
closeOnSelect: false,
allowClear: true,
tags: true,
dropdownCssClass: "beforecheckbox"
});
.select2.select2-container {
width: 100% !important;
}
.select2-container .select2-selection__rendered {
padding: 5px 15px 0 15px;
text-transform: uppercase;
font-size: 13px;
box-shadow: none;
background-image: none;
text-transform: uppercase;
font-size: 13px;
}
.select2-container .select2-selection--single {
height: 100% !important;
border-radius: 15px !important;
}
.beforecheckbox .select2-results__option[aria-selected=true]:before {
content: "";
color: #fff;
background: url(../images/svg/check_active.png);
border: 0;
display: inline-block;
padding-left: 3px;
}
.beforecheckbox .select2-results__option[aria-selected=true]:before {
content: "";
display: inline-block;
position: relative;
width: 1.5rem;
height: 1.5rem;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
right: 0;
float: right;
}
.beforecheckbox .select2-results__option[aria-selected=false]:before {
content: "";
display: inline-block;
position: relative;
width: 1.5rem;
height: 1.5rem;
border: #b7b9cc solid 2px;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
right: 0;
float: right;
}
.beforecheckbox .select2-results__option[aria-selected=true]:before {
background: red;
}
#custom_form_names_category {
margin-bottom: 50px !important;
}
.select2.select2-container {
margin-bottom: 50px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<select id="custom_form_names_category" multiple class="js-select2 small-select addplaceholderslect select2-hidden-accessible" tabindex="-1" aria-hidden="true">
<option value="1" data-select2-id="25">Sport</option>
<option value="17" data-select2-id="26">Volley</option>
<option value="18" data-select2-id="27">Musci</option>
<option value="29" data-select2-id="28">film</option>
<option value="35" data-select2-id="29">Englich</option>
</select>
<select id="custom_form_names_subcategorie" multiple class="js-select2 small-select addplaceholderslect select2-hidden-accessible">
<optgroup label="Sport" data-select2-id="33">
<option value="2" data-select2-id="34">Dance </option>
</optgroup>
<optgroup label="Musci" data-select2-id="35">
<option value="3" data-select2-id="36">Catégorie 4</option>
<option value="4" data-select2-id="37">Rap</option>
</optgroup>
<optgroup label="Volley" data-select2-id="38">
<option value="5" data-select2-id="39">Catégorie 4</option>
</optgroup>
<optgroup label="film" data-select2-id="40">
<option value="7" data-select2-id="41">Catégorie 5</option>
</optgroup>
</select>
You cannot interact with the option groups, You can only disable them, but with the rendered result of select2.
test:
$('#custom_form_names_subcategorie').on('select2:open', function (e) {
//var first = $('#custom_form_names_category').find(':selected');
//console.log(first);
setTimeout(function(){
$('[aria-label]').hide();
$('#custom_form_names_category').find(':selected').each(function( index ) {
var selected = $( this ).text();
console.log( index + ": " + selected );
$('[aria-label="' + selected + '"]').show();
console.log($('[aria-label="' + selected + '"]'));
});
},100);
//$('[aria-label="' + selectedVal + '"]').show().siblings("li").css('display', 'none');
});
This also works when you select more than one. I had to put a setTimeout because in the on open event, of the version of select2 you used, in reality the select is not yet drawn. try to change version. However this works.
Alternatively you should fill the second select dynamically as defined in this link:
Add, select, or clear items
Post Edited: Using MutationObserver instead of DOMSubtreeModified
I have a div where I am using .each to go through every label and get their text, but I'd like to add an additional ifelse statement where if the label includes a select child, add the selected option to the text string
$("#droppable").on('click', '.delete', function() {
$(this).parent().remove(); // changed - missed "()"
});
var target = document.querySelector('#droppable')
var observer = new MutationObserver(function(mutations) {
var str = "";
$('#droppable label').each(function(){
str += $(this).text() + "<br>";
document.getElementById("inside_drop_zone").innerHTML = str
});
})
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
#droppable {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
#droppable.ui-droppable-hover {
background: #bad4ed;
}
#droppable select {
margin: 5px;
}
.drop_area {
border: 1px solid lightgray;
padding: 3px;
margin-bottom: 3px;
width: 100%;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
#inside_drop_zone {
height: 100px;
width: 100%;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="droppable">
<div class="form-group drop_area">
<label class="control-label" for="one">ONE</label><select id="one-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option></select>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="chg">THREE</label>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="two">TWO</label><select id="two-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option></select>
<button class="delete">Delete</button>
</div>
</div>
<div id="inside_drop_zone"></div>
Desired Output
label OR label : selected option
ONE + ":" + week 1
THREE
TWO + ":" + week 3
I'm pretty new to JQuery so thank you for any help/tips!
Look for lines marked // changed
$("#droppable").on('click', '.delete', function() {
$(this).parent().remove(); // changed - missed "()"
});
$("body").on('DOMSubtreeModified', "#droppable", function() {
var str = "";
$('#droppable label').each(function() {
const txt = $(this).text() // changed
const val = $(this).parent().find("select").children("option:selected").val() // changed - the main idea is to get parent() of $(this) and then search for <select>
str += txt + (val ? ":" + val : "") + "<br>"; // changed
})
document.getElementById("inside_drop_zone").innerHTML = str
});
#droppable {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}
#droppable.ui-droppable-hover {
background: #bad4ed;
}
#droppable select {
margin: 5px;
}
.drop_area {
border: 1px solid lightgray;
padding: 3px;
margin-bottom: 3px;
width: 100%;
}
.delete {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 0px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
float: right;
display: inline-block;
}
button:hover {
color: #CF2323;
}
#inside_drop_zone {
height: 100px;
width: 100%;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="droppable">
<div class="form-group drop_area">
<label class="control-label" for="one">ONE</label>
<select id="one-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option>
</select>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="chg">THREE</label>
<button class="delete">Delete</button>
</div>
<div class="form-group drop_area">
<label class="control-label" for="two">TWO</label>
<select id="two-select">
<option value="week1" selected>Week 1</option>
<option value="week2">Week 2</option>
<option value="week3">Week 3</option>
<option value="week4">Week 4</option>
</select>
<button class="delete">Delete</button>
</div>
</div>
<div id="inside_drop_zone"></div>
I wish to make my own select.
Actually my select looks like this :
JS Fiddle
and is it coded like this :
<p>Title</p>
<form>
<input type="color" onchange="colorisPanneau(value);pageSuivante();" name="coloris_panneau" list="liste_color3" id="coloris_panneau" value="#C5B9A9" class="formc" style="height:24px;width:202px;">
<datalist id="liste_color3">
<option value="#FFFFFF">
<option value="#999999">
<option value="#000000">
<option value="#582810">
</datalist>
</form>
And i want to make it look like that :
How can i do this ?
What do i need to do to be able to personalize the interface in my combobox ?
Where can i find documentation to be able to do so ?
Thank you very much :)
The datalist cannot be modified with css, even if you could with some css-magic, you could never get multiple items inside of the datalist options. The only solution is to create a select box from scratch.
I was bored so I made you something you can start with:
$('html').on("click", function(e) {
$('.color-picker').removeClass('open');
});
$(document).on("click", ".color-value", function(e) {
e.stopPropagation();
if ($('.color-picker').hasClass('open')) {
$('.color-picker').removeClass('open');
} else {
$('.color-picker').addClass('open');
}
});
$(document).on("click", ".list-item", function() {
var color = $(this).data('color');
$('#color-input').val(color);
$('.color-value').html($(this).html());
//This is now the value of your hidden input field
$('#value').html(color);
});
* {
box-sizing: border-box;
}
.color-picker {
height: 30px;
width: 150px;
overflow: hidden;
color: #666;
background: #FFF;
}
.open {
overflow: visible;
;
}
.list {
border: 1px solid #CCC;
border-top: none;
background: #FFF;
}
.list-item {
padding: 5px;
cursor: pointer;
}
.list-item:hover {
background: #f1f1f1;
}
.list-item>span {
display: inline-block;
vertical-align: middle;
height: 20px;
line-height: 20px;
}
.list-item>span:first-child {
width: 20px;
margin-right: 5px;
}
.color-value {
height: 30px;
line-height: 30px;
padding: 0 5px;
width: 100%;
cursor: pointer;
border: 1px solid #CCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="color-picker">
<input id="color-input" type="hidden" name="coloris_panneau" value="" />
<div class="color-value list-item">Select your color</div>
<div class="list">
<div class="list-item" data-color="#edae0e">
<span style="background:#edae0e;"></span>
<span>Yellow</span>
</div>
<div class="list-item" data-color="#ff0000">
<span style="background:#ff0000;"></span>
<span>Red</span>
</div>
<div class="list-item" data-color="#336699">
<span style="background:#336699;"></span>
<span>Blue</span>
</div>
</div>
</div>
I have a list control and at run time when I bind data to the control I want to append a delete icon or a button to each row in jquery, so that I can delete a row if I want to. Here is the code that I am using to bind data to the control.
$(response.aaData).each(function (index, val) {
$("#multiselectSubCat")
.append($('<option></option>').val(val.SubCategoryId).html(val.SubCategoryName));
});
Rendered
<select name="from" id="multiselectSubCat" multiple="multiple" style="width: 300px; top: 100px">
<option value="9">Category1</option>
<option value="10">Category2</option>
<option value="11">Category3</option>
<option value="12">Category4</option>
<option value="13">Category5</option>
<option value="22">Category6</option>
</select>
I want to know whether you want input button or image to show user that you can delete particular record?
I have made an example where I am adding background.
.select-box {
height: 400px;
}
.select-box option {
background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/minus-sign-16.png) 1px -1px no-repeat;
padding-left: 25px;
cursor: pointer;
}
.select-box option:hover {
background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/minus-sign-16.png) 1px -1px no-repeat #eee;
}
<select name="from" id="multiselectSubCat" multiple="multiple" class="select-box" style="width: 300px; top: 100px">
<option value="9">Category1</option>
<option value="10">Category2</option>
<option value="11">Category3</option>
<option value="12">Category4</option>
<option value="13">Category5</option>
<option value="22">Category6</option>
</select>
Building on this
How can I use <ul> list instead of <select> dropdown for the languages switcher?
have a go at this:
var nav = $('#nav');
var selection = $('.select');
var select = selection.find('li');
nav.click(function(event) {
if (nav.hasClass('active')) {
nav.removeClass('active');
selection.stop().slideUp(200);
} else {
nav.addClass('active');
selection.stop().slideDown(200);
}
event.preventDefault();
});
select.click(function(event) {
// updated code to select the current language
select.removeClass('active');
$(this).addClass('active');
alert ("location.href = 'index.php?lang=" + $(this).attr('data-value'));
});
$(".del").on("click",function(e) {
e.preventDefault();
$(this).parent().remove();
});
h2 {
width: 200px;
background: #222;
color: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
ol
{
list-style-type: none;
}
ol.select {
display: none;
}
ol.select > li {
width: 200px;
background: #eee;
line-height: 25px;
font-size: 14px;
padding: 0 10px;
cursor: pointer;
}
ol.select > li:hover {
background: #aaa;
}
.select a { text-decoration:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2 id="nav">Choose Language</h2>
<ol class="select">
<li data-value="en"><a class="del" href="#">X</a> English</li>
<li data-value="de"><a class="del" href="#">X</a> Deutsch</li>
</ol>
U did the right thing just little changes required
<a href="http://jsfiddle.net/ajaymalhotra15/2tmntdft/" > click here to see code </a>
I am trying to display select box values in 4 columns. How can i do this. I am going to use it on local server.
I have got images to show you what i am trying to do.
this is what i have got just now.
1 http://www.thewebdesign.org/1a.png
I am trying to turn into
2 http://www.thewebdesign.org/2a.png
this is the code i am using
<style type="text/css">
<!--
.myselectbox {
font-family: Tahoma;
font-size: 18px;
background-color: #F5F5F5;
}
option {
font-family: Tahoma;
font-size: 18px;
background-color: #fef5e6;
padding:8px;
margin:5px;
border-top: 1px solid #ebdac0;
border-bottom: 1px solid #ebdac0;
border-right: 1px solid #d6bb86;
border-left: 1px solid #d6bb86;
}
-->
</style>
</head>
<body>
<center>
<select name="amount_no1" class="myselectbox" id="amount_no1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</center>
</body>
That is not possible. You'll have to use javascript to customize the select box. Here are a list of jQuery plugins you can browse through:
jQuery SelectBox Plugins
If that is the standart select element (not some kind of a plugin), I'm afraid it is not possible.
JS code:
document.getElementById("amount_no1").value = 4
Here is a quick attempt to modify your code. Not optimal, but I ran out of time
<style type="text/css">
.myselectbox {
font-family: Tahoma;
font-size: 18px;
background-color: #F5F5F5;
}
ul {
float: left;
width: 12em;
margin: 0;
padding: 0;
list-style: none;
}
li {
float: left;
width: 6em;
font-family: Tahoma;
font-size: 18px;
background-color: #fef5e6;
padding:8px;
margin:5px;
border-top: 1px solid #ebdac0;
border-bottom: 1px solid #ebdac0;
border-right: 1px solid #d6bb86;
border-left: 1px solid #d6bb86;
}
</style>
</head>
<body>
<div>
<select name="amount_no1" class="myselectbox" id="amount_no1" onclick="document.getElementById('ul1').style.display='block'">
<option value="1">1</option>
</select>
<ul id="ul1" style="display:none">
<li onclick="document.getElementById('amount_no1').options[0].text = 2;
document.getElementById('ul1').style.display='none'">2</li>
<li value="3">3</li>
<li value="4">4</li>
<li value="5">5</li>
<li value="6">6</li>
<li value="7">7</li>
<li value="8">8</li>
</ul>
</div>
</body>
I use this plugin (http://www.marghoobsuleman.com/jquery-image-dropdown) for styled dropdown boxes, because it is not possible to style the standart dropdown box. The plugin contains a css file where you can specify your own styles if you want.