how can i add items to selected append list jquery - javascript

i want to add list among selected list group.. i appended list from add button, from added list groups, if i click on any list of div,a modal window will be opened, from there i have to add list to selected list group only, but in my code the list was appending to all list groups.. how can i add list to only selected list group.. please help me from this issue..
DEMO
$(document).ready(function(){
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
$("#add_list").on('click',function(){
$("#list_group").append("<div class="+'opener'+"><h2>List (//click)</h2><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol></div>");
});
$( "#dialog" ).dialog({
autoOpen: false,
});
$(document).on('click','.opener',function() {
$( "#dialog" ).dialog( "open" );
});
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="add_list">add list</button>
<div id="dialog" title="Add List">
<h2>List items</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn2">Append list items</button>
</div>
<div id="list_group">
<div class="opener">
<h2>List (//click)</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</div>

Try this :)
$(document).ready(function(){
var $appendItemsToList;
$("#btn2").click(function(){
$("ol", $appendItemsToList).append("<li>Appended item</li>");
$("#dialog ol").append("<li>Appended item</li>");
});
$("#add_list").on('click',function(){
$("#list_group").append("<div class="+'opener'+"><h2>List (//click)</h2><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol></div>");
});
$( "#dialog" ).dialog({
autoOpen: false,
});
$(document).on('click','.opener',function() {
$appendItemsToList = $(this);
$( "#dialog" ).dialog( "open" );
$( "#dialog ol" ).html($('ol', $appendItemsToList).html());
});
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="add_list">add list</button>
<div id="dialog" title="Add List">
<h2>List items</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn2">Append list items</button>
</div>
<div id="list_group">
<div class="opener">
<h2>List (//click)</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</div>

Related

How to make manually scroll list using jquery?

I want to manually scroll a UL list with two button.
First time 4 items will show and when user click on up or down button list will scroll 1 item a time.
$(document).ready(function() {
$(".down").on("click", function() {
$(".scroll").scrollTop(
$(".listitem:nth-child(4)").offset().top -
$(".listitem:nth-child(3)").offset().top
);
});
});
.scroll {
height: 100px;
width: 200px;
overflow-y: hidden;
overflow-x: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container"><div class="row">
<div class="col-md-12">
<ul class="scroll">
<li class="listitem">List Item 1</li>
<li class="listitem">List Item 2</li>
<li class="listitem">List Item 3</li>
<li class="listitem">List Item 4</li>
<li class="listitem">List Item 5</li>
<li class="listitem">List Item 6</li>
<li class="listitem">List Item 7</li>
<li class="listitem">List Item 8</li>
</ul>
<button class="btn up">Up</button>
<button class="btn down">Down</button>
</div></div>
Now i am stuck i don't how i can dynamically pass the next and previous li to make it work . i want to do it exactly like that as i show in down button list scroll to next item.
You can use scrollIntoView() method to scrolls the element into the visible area. Note that :not(:nth-last-child(3)) would be the n - 1 visible list.
$(document).ready(function() {
$(".down").on("click", function() {
var $active = $(".listitem.active");
var $target = $active.next();
if ($target.get(0) && $target.is(':not(:nth-last-child(3))')) {
$active.removeClass('active');
$target.addClass('active').get(0).scrollIntoView({
behavior: 'instant',
block: 'start',
inline: 'nearest',
});
}
});
$(".up").on("click", function() {
var $active = $(".listitem.active");
var $target = $active.prev();
if ($target.get(0)) {
$active.removeClass('active');
$target.addClass('active').get(0).scrollIntoView({
behavior: 'instant',
block: 'start',
inline: 'nearest',
});
}
});
});
.scroll {
height: 100px;
width: 200px;
overflow-y: hidden;
overflow-x: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="scroll">
<li class="listitem active">List Item 1</li>
<li class="listitem">List Item 2</li>
<li class="listitem">List Item 3</li>
<li class="listitem">List Item 4</li>
<li class="listitem">List Item 5</li>
<li class="listitem">List Item 6</li>
<li class="listitem">List Item 7</li>
<li class="listitem">List Item 8</li>
</ul>
<button class="btn up">Up</button>
<button class="btn down">Down</button>
</div>
</div>
</div>

Convert a list into accordion

I want to convert my list items in an accordion. But, when I use following code, it seems jQuery is being removed and replaced the link (href) even for a list item which doesn't have any children. For Example - list item 2 and 5. Can anyone help me with this?
$(function() {
var count = 1;
var lisize = $( "ul > li" ).length;
$( "ul > li" ).each(function(){
if (count <= lisize) {
$( "ul > li:nth-child(" + count + ") > a" ).attr ("href", ".collapse"+count);
$( "ul > li:nth-child(" + count + ") > a" ).attr ("data-toggle", "collapse");
$( "ul > li:nth-child(" + count + ") > ul" ).addClass( "collapse collapse"+count );
count++;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<ul>
<li>
List Item 1
<ul class="children">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>List Item 2</li>
<li>
List Item 3
<ul class="children">
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
</ul>
</li>
<li>
List Item 4
<ul class="children">
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
</ul>
</li>
<li>List Item 5</li>
</ul>
Added main as id to the main ul wrapper so that you can limit where you iterate from. Also changed the conditional statement to $(this).children("ul").children("li").length > 0 so that the system checks if the ul has children - only then will it add the accordion classes
$(function() {
var count = 1;
var lisize = $("#main > li").length;
$("#main > li").each(function() {
if ($(this).children("ul").children("li").length > 0) {
$(this).children("a").attr("href", ".collapse" + count);
$(this).children("a").attr("data-toggle", "collapse");
$(this).children("ul").addClass("collapse collapse" + count);
count++;
}
});
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<ul id="main">
<li>
List Item 1
<ul class="children">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>List Item 2</li>
<li>
List Item 3
<ul class="children">
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
</ul>
</li>
<li>
List Item 4
<ul class="children">
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
</ul>
</li>
<li>List Item 5</li>
</ul>
First issue: limit selection to all li having an ul child
$('ul > li:has(> ul)')
Second issue: .each() has two parameters, so you don't need the count variable because you can use the first parameter.
Last note: you may use directly .attr( attributes ) in order to set two attributes for the anchor instead of calling .attr() method twice.
The snippet:
$('ul > li:has(> ul)').each(function (idx, ele) {
$(ele).children('a').attr({"href": ".collapse" + idx, "data-toggle": "collapse"});
$(ele).children('ul').addClass("collapse collapse" + idx);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<ul>
<li>
List Item 1
<ul class="children">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>List Item 2</li>
<li>
List Item 3
<ul class="children">
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
</ul>
</li>
<li>
List Item 4
<ul class="children">
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
</ul>
</li>
<li>List Item 5</li>
</ul>

How to add an ul element custom event with jQuery?

I have a draggable pair of lists. The design: 2 ul list, interchangable items, with drag and drop.
I am using jquery sortable widget.
The question is that i want to fire an event when an li item drops in the or fire some event when ul list change.
How can i do that??
HTML:
div class="col-lg-4">
<div class="form-group">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
JavaScript:
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
})
Please check below snippet. Used stop and receive two events. Stop event will trigger every time element dragged and dropped. And receive event will trigger only when element is moved from one list to another.
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
stop: function(event, ui) {
var dropElemTxt = $(ui.item).text();
alert(dropElemTxt+" moved");
},
receive: function(event, ui) {
var dropElemTxt = $(ui.item).text();
alert(dropElemTxt+" Moved from another list");
},
}).disableSelection();
})
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div class="col-lg-4">
<div class="form-group">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
Contrary to my comment above, use 'stop' instead of 'drop':
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
stop: function(){
alert("yeah buddy");
}
}).disableSelection();
})
https://jsfiddle.net/0yw43n6w/

List Items drag and drop using jquery

I have a nested list items and would like to achieve drag and drop functionality.
Scenario:
one level tree structure
child items directly on root node and in first level tree node
move child items out of tree node or in to tree node
restrict tree nodes to drag
HTML
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="folder"> Empty Folder
<ul id="sortable1" class="connectedSortable">
</ul>
</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="folder"> Folder 1
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</li>
<li class="ui-state-default">Item 7</li>
<li class="ui-state-default">Item 8</li>
<li class="folder"> Folder 2
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</li>
</ul>
JS/jQuery
$(function() {
$( ".connectedSortable" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
Example at JS Fiddle
I would like to be able to move a item in to Empty folder as well, restrict folders to move, restrict sorting items, move only if item is moved out of the folder or in to a folder. And on successful move call a function, where I can read the item Id and folder Id and do some logic.
for having drag-drop treeview , you better use nestedSortable, it's very easy. here is a sample of how you can use it
<ol class="sortable">
<li id="list_1"><div><span class="disclose"><span></span></span>Item 1</div>
<ol>
<li id="list_2"><div><span class="disclose"><span></span></span>Sub Item 1.1</div>
<ol>
<li id="list_3"><div><span class="disclose"><span></span></span>Sub Item 1.2</div>
</ol>
</ol>
<li id="list_4"><div><span class="disclose"><span></span></span>Item 2</div>
<li id="list_5"><div><span class="disclose"><span></span></span>Item 3</div>
<ol>
<li id="list_6" class="mjs-nestedSortable-no-nesting"><div><span class="disclose"><span></span></span>Sub Item 3.1 (no nesting)</div>
<li id="list_7"><div><span class="disclose"><span></span></span>Sub Item 3.2</div>
<ol>
<li id="list_8"><div><span class="disclose"><span></span></span>Sub Item 3.2.1</div>
</ol>
</ol>
<li id="list_9"><div><span class="disclose"><span></span></span>Item 4</div>
<li id="list_10"><div><span class="disclose"><span></span></span>Item 5</div>
</ol>
and the javascripts
$(document).ready(function(){
$('ol.sortable').nestedSortable({
forcePlaceholderSize: true,
handle: 'div',
helper: 'clone',
items: 'li',
opacity: .6,
placeholder: 'placeholder',
revert: 250,
tabSize: 25,
tolerance: 'pointer',
toleranceElement: '> div',
maxLevels: 3,
isTree: true,
expandOnHover: 700,
startCollapsed: true,
start: function(e, ui) {
//some code
},
receive: function(e, ui) {
//some code
},
stop: function(e, ui) {
//code of Serialize
//this happend when the move complete
var treeSerialize = jQuery('ol.sortable').nestedSortable('updatecategories', {startDepthCount: 0});
console.log(treeSerialize);
}
});
});
demo, it's very nice and good, it use it on several app, for menu, categories, and other nested things
This is how I ended up to complete it. Fiddle Demo
Javascript
$(function() {
// $( "ul[id^='sortable']" ).sortable({
// connectWith: ".connectedSortable"
// }).disableSelection();
$( "li.product" ).draggable({
appendTo: "body",
helper: "clone"
});
$( ".folder" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
//$( this ).find( ".placeholder" ).remove();
//$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
alert("Dragging Product Id is "+$(ui.draggable).attr("id") + "Dropping Folder Id is "+ $(event.target).attr("id"));
}
})
});
Mark up
<ul id="sortablex"><li class="folder">
<ul>
<li id="1" class="ui-state-default product">Product 1</li>
</ul>
</li>
<li id="1" class="folder"> Empty category
<ul id="sortable1" class="connectedSortable">
</ul>
</li>
<li id="1" class="ui-state-default product">Product 2</li>
<li id="1" class="ui-state-default product">Product 3</li>
<li id="f1" class="folder"> Category 1
<ul id="sortable2" class="connectedSortable">
<li id="1" class="ui-state-default product">Product 4</li>
<li id="1" class="ui-state-default product">Product 5</li>
</ul>
</li>
<li id="1" class="ui-state-default product">Product 7</li>
<li id="1" class="ui-state-default product">Product 8</li>
<li id="1" class="folder"> Category 2
<ul id="sortable2" class="connectedSortable">
<li id="1" class="ui-state-highlight product">Product 1</li>
<li id="1" class="ui-state-highlight product">Product 2</li>
<li id="1" class="ui-state-highlight product">Product 3</li>
<li id="1" class="ui-state-highlight product">Product 4</li>
<li id="1" class="ui-state-highlight product">Product 5</li>
</ul>
</li>
</ul>
CSS
folder{
color:#c30;
font-weight:bold;
}
.folder ul{
color:#000;
font-weight:normal;
}

Working with jQuery UI "Accordion and Droppable"

I have a question with jQuery UI Accordion and Droppable.
How can I Drag an item from #tab-1 to #tab-2?
I have view the demo in jqueryui.com "Sortable - Connect lists with Tabs", but I can't use this for Accordion :(
HTML:
<div id="tabs">
<div id="tabs-1">
<h3>A</h3>
<div>
<ul id="sortable1" class="connectedSortable ui-helper-reset">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
</div>
<div id="tabs-2">
<h3>B</h3>
<div>
<ul id="sortable2" class="connectedSortable ui-helper-reset">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>
</div>
</div>
Script:
$(function() {
$( "#sortable1, #sortable2" ).sortable().disableSelection();
var $tabs = $( "#tabs" ).accordion({
heightStyle: "content",
collapsible: true,
header: "> div > h3",
beforeActivate: function( event, ui ) {
$("#maps").width( $("#tabsMap").innerWidth() - $("#mapList").width() - 34 );
},
activate: function( event, ui ) {
$("#maps").width( $("#tabsMap").innerWidth() - $("#mapList").width() - 32 );
}
}).sortable({
axis: "y",
handle: "h3",
stop: function( event, ui ) {
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});
});
You can connect the lists by changing the line:
$( "#sortable1, #sortable2" ).sortable().disableSelection();
To:
$( "#sortable1, #sortable2").sortable({connectWith['.connectedSortable']}).disableSelection();
But then you have the issue how to get the other one open to drop it into the other list.
If you add event: "mouseover" as an accordian option it won't trigger the mouseover while you're still dragging.
To achieve multiple panels open at once, you need a rather unsightly workaround, but hey, it works!:
http://jsfiddle.net/ZjvWN/2/
Credit for the beforeActivate function to the member Boaz from this answer: jQuery UI accordion: open multiple panels at once

Categories