I Found one example of js tree in jquery ? in this user can add new data inside after selecting the
the row.
here http://jsfiddle.net/fuu94/
But When I remove all row (remove ul and li from mark up)and start making from first it will not work why ?
http://jsfiddle.net/fuu94/1/
$('#tree').jstree({
"core": {
"check_callback": true
},
"plugins": ["dnd"]
});
$('button').click(function () {
var ref = $('#tree').jstree(true),
sel = ref.get_selected();
if (!sel.length) {
return false;
}
sel = sel[0];
sel = ref.create_node(sel);
if (sel) {
ref.edit(sel);
}
});
According to the jstree documentation
"The minimal required markup is a < ul > node with some nested < li > nodes with some text inside."
-> http://www.jstree.com/docs/html/
As long as you make the menu using UL and LI it should do the rest for you (as in creating the tree).
So basically, if you remove the text from the LI and UL nodes and make your own text, duplicate the structure, you could make something like this:
-> http://jsfiddle.net/fuu94/3/
but the minimum requirements is something like:
<ul>
<li></li>
</ul>
and if you want to use a submenu, add one of these :
<li> Title Here
<ul>
<li></li>
<li></li>
</ul>
</li>
Related
For this website I'm having a menu like, generated by markdown via MIIS
<h4><a>title</a></h4>
<ul>
<li><a>foo</a></li>
<li> <a>foo</a>
<ul>
<li><a>sub</a></li>
</ul>
</li>
<li><a>foo</a></li>
</ul>
<h4><a>other title</a></h4>
<ul>
<li><a>other…</a></li>
...
</ul>
By default I only want to show the h4 titles, not the lists below it. Only when you click a title, it show show the ul content (only showing the first level below). clicking on another title should hide the other ul content of other section and show current ul below the title.
I'm currently stuck with the collapsing code in common.js, everything is always collapsed:
$('.miis-toc > ul > li > a').filter(function(){
return ($(this).attr('href') != '');
}).parent().find('ul > li').hide();
$('.miis-toc > h4').filter(function(){
return ($(this).attr('href') != '');
}).parent().find('ul').hide();
currLink.parentsUntil('.miis-toc > ul').last().find('li').show()
If I understand your question correctly, and understand the way your menu HTML is defined and structured, then a possible solution might be to revise your jQuery like so:
// Hide all ul sublists that are direct children of .miis-toc by
// default
$('> ul', '.miis-toc').hide()
// Listen for click event on h4 elements that are directly under
// .miis-toc
$('> h4', '.miis-toc').click(function() {
// Hide all ul sublists that are direct children of .miis-toc
$('> ul', '.miis-toc').hide()
// Show the ul sublist that is "after" the h4 that has been clicked
// (ie this)
$('+ ul', this).show()
// Prevent default click behaviour
return false;
})
Please see a completed example of this solution on jsFiddle
Updated answer
For the new details that were clarified in the comments below, the following solution should meet all requirements. Note that the JS code will "pre-toggle" menu UL or sub-UL based on URL matching (ie based on the browsers URL pathname).
You will need to update you HTML as follows:
<div class="miis-toc">
<h4>title</h4>
<!-- If path name is /title/, entire tree to this point will be
preopened to here -->
<ul>
<li><a>foo</a></li>
<li>foo
<!-- If path name is /foo/, entire tree to this point will
be preopened to here -->
<ul>
<li><a>sub</a></li>
</ul>
</li>
<li><a>foo</a></li>
</ul>
<h4><a>other title</a></h4>
<ul>
<li><a>other…</a></li>
...
</ul>
</div>
And your updated jQuery as follows:
// This code block sets up the menu when the page first loads, and
// decides which UL or UL sublist to display based on current URL
{
// Hide all UL's that are under .miis-toc
$('ul', '.miis-toc').hide()
// Look for a UL sublist after an anchor with href matching our
// browsers current pathname
var node = $('a[href="'+location.pathname+'"] + ul', '.miis-toc')
// If not found, look for a UL after an h4 with child anchors href
// matching our browsers current pathname
if(node.length === 0) {
var a = $('h4 a[href="'+location.pathname+'"]', '.miis-toc')
node = $('+ ul', a.parent())
}
// If we have found a UL or UL sublist, we need to walk back up the
// "menu tree" and "show" each node (ie UL and/or UL sublist)
if(node.length) {
var parent = node
// When we reach to top of the menu (ie .miis-toc), terminate the
// loop
while(!parent.hasClass('miis-toc')) {
parent.show()
parent = parent.parent()
}
}
}
// Listen for click event on h4 and nested li > a elements under
// .miis-toc
$('h4, li > a', '.miis-toc').click(function(event) {
// Toggle (show/hide) adjacent ul sublist when clicked
$('+ ul', this).toggle()
// Prevent default click behaviour
return false;
})
I've created a small script that filters my ul with a nested ul inside of it. The only issue with my script is I want to hide the title of the nested ul if none of the li's contain the search term, but I am not sure how to go about checking the li's of each "group" as opposed to each li individually. The way it stands, it will display the title if it finds an li in the group matching the search term, but it will immediately turn around and hide the title if the same group contains an li that DOES NOT contain the search term. I know what I'm doing wrong, but I am not as skilled in jquery and cannot seem to visualize how to go about this.
Any help would be great. My code is below:
HTML:
<div id="sitemap">
<h3>Hospital Data Solutions Interactive Site Map</h3>
<hr/>
<p id="header"><input type="text" placeholder="Filter Site Map"> - Use this field filter our list of databases: Search by Topic or Topic Subgroup</p>
<ul id="toplist">
<li class="group">
<h3 class="sTitle">Available Beds - <a style="font-size:18px;">Go to Section</a></h3>
<ul class="sublist">
<li>General</li>
<li>ICU</li>
<li>CCU</li>
<li>BICU</li>
<li>SICU</li>
<li>Other</li>
<li>Hospice</li>
<li>Total</li>
</ul>
</li>
<hr/>
<li class="group">
<h3 class="sTitle">Discharges - <a style="font-size:18px;">Go to Section</a></h3>
<ul class="sublist">
<li>Medicare</li>
<li>Medicaid</li>
<li>Other</li>
<li>Total</li>
</ul>
</li>
</ul>
</div>
Jquery:
$(function(){
$('input[type="text"]').keyup(function(){
var searchText = $(this).val().toLowerCase();
$('.sublist>li').each(function(){
var currentLi = $(this).text().toLowerCase();
if(currentLi.search(searchText) != -1){
$(this).slideDown();
$(this).closest('.group').children('.sTitle').show();
} else { $(this).slideUp(); $(this).closest('.group').children('.sTitle').hide();}
});
});
});
First, select the .sublist elements instead of the lis.
Then iterate that collection using .each(), and use .children() to test each li like you currently are, except use .filter() instead of .each(). This will give you a collection as a result. If the collection is empty, there were no matches. If not, then there was a match.
$('input[type="text"]').keyup(function(){
var searchText = $(this).val().toLowerCase();
$('.sublist').each(function(i, sub){
var matches = $(sub).children().filter(function(i, li) {
return $(li).text().toLowerCase().search(searchText) != -1;
});
if (matches.length) {
$(sub).slideDown().prev().show();
} else {
$(sub).slideUp().prev().hide();
}
});
});
Now the slideDown/Up and show/hide are happening once per sublist instead of on every child li. And I just used .prev() to get back to the h3 element.
If you're going to be hiding those list items that don't match your search you're going to want to deal with them individually anyway, so I wouldn't abandon that approach. So you just need a way to check to see if the term was found somewhere in the search of the nested list. Here's what I might do to utilize what you already have.
After you capture the search term, loop through each of the sublists and set a flag to false; this will be where we capture whether there were any matches. Then loop through that sublist's items, and if you find a match set the flag to true, showing or hiding the item as necessary. Then, after you've checked all the items show or hide the heading based on that flag. It might look something like this:
$('.sublist').each(function(){
found = false;
$(this).children("li").each( function() {
var currentLi = $(this).text().toLowerCase();
if(currentLi.search(searchText) != -1){
$(this).slideDown();
found = true;
} else {
$(this).slideUp();
}
});
if(found) {
$(this).closest('.group').children('.sTitle').show();
} else {
$(this).closest('.group').css("list-style-type", "none");
$(this).closest('.group').children('.sTitle').hide();
}
});
I added a css line to show/hide the header's disc to avoid having that hanging there if everything else disappears. Hope this helps! Let me know if you have any questions.
I am using jQuery UI's Sortable to reorder some list items. I would like to update the class of each li based on the updated order after sorting. Here is my html:
<ul id="sortable">
<li class="1">apple</li>
<li class="2">orange</li>
<li class="3">pear</li>
<li class="4">peach</li>
</ul>
What I am trying to achieve is AFTER sorting pear above apple, my classes update like this:
<ul id="sortable">
<li class="1">pear</li>
<li class="2">apple</li>
<li class="3">orange</li>
<li class="4">peach</li>
</ul>
This JSFiddle is close to what I'm after, but I would like to update the class rather than the html: http://jsfiddle.net/4mcpq/3/
As changing the position of one li would change the class of every other li, the only sane way to accomplish this is to iterate over the li elements on the update callback for .sortable:
"update": function (event, ui) {
$(this).children().each(function (i, elem) {
var li = $(elem), // cache lookup
cssClass = elem.className.split(' ').filter(function (name, i, array) {
return /^js[-]\d+$/g.test(name);
}).join(''); // adding .join('') to transform to string
// classes cannot start with a number (see http://www.w3.org/TR/CSS21/grammar.html#scanner).
// using pattern of "js-#" for the custom class
$(elem).removeClass(cssClass).addClass('js-' + i);
});
}
Working demo: http://jsfiddle.net/4mcpq/210/
A caveat: if you have thousands of li elements, this will likely slow your UI. There are much easier (and saner) ways to get the correct target li depending on what you're trying to do.
Why not use something like nth-child() selector in your css.
For example:
#sortable li:nth-child(1) {
/*insert your style for the first child here*/
}
#sortable li:nth-child(2) {
/*insert your style for the second child here*/
}
So I have found I can use .index() to find the updated sort order. Then I can set the class of each li to it's index.
$("#sortable").sortable({
update: function(event, ui) {
$("#sortable li").each(function() {
$(this).removeClass();
var $index = $(this).index();
$(this).prop("class", $index);
});
}
});
See this Fiddle: http://jsfiddle.net/2f9vkhxj/8/
I want to get the values of items in a Dynamically generated DOM using DOMNodeInserted.
Here is my code.The items #I want to get the values are li eg
<div id="demo">
<ul>
<li class="req">Chemistry</li>
<li class="req">English</li>
<li class="req">Maths</li>
</ul>
</div>
Here is the code
$('#demo').on('DOMNodeInserted', function(e) {
var that = $(this);
if ($(e.target).is('.req')) {
alert(oneoftheitemsintheli);
}
});
I want to get on of the items in the li eg Maths, Chemistry etc. I need to know how to get the items.
Thanks
Given that each li has the class req, you can use each to iterate over them and get the text value - or any other property you need.
$('#demo').on('DOMNodeInserted', function(e) {
$('.req').each(function() {
alert($(this).text());
});
});
Example fiddle
I have an autogenerated nested list structure, like so
<ul>
<li>AAA</li>
<li>BBB
<ul>
<li>111
<ul>
<li>XXX</li>
</ul>
</li>
<li>222</li>
</ul>
</li>
<li>CCC</li>
...etc...
</ul>
I want to layout in columns like so:
AAA 111 XXX
BBB 222
CCC
Using JQuery and a few CSS tags, it's then relatively easy to create a navigation style menu. e.g. select BBB from the first column, then this makes its children appear in the second column. Any other second level depth ULs are hidden.
What's leaving me stuck is simply how to style the list in the first place to put the depths into columns. I can add tags to each UL or LI to show the depth. But if I simply use relative positioning and move each column left, then column 1 will leave a vertical gap where each of the entries have been moved across. Absolute positioning works, but doesn't seem too neat. Any better ideas?
Using recursive functions this can be quite straight-forward: http://jsfiddle.net/uvxfm/1/.
If you want interactivity you could save which elements are children of which parent and show the appropriate ones on click.
var $tr = $("#tr");
function text(x) { // returns text without children
return x.clone()
.children()
.remove()
.end()
.text();
}
function add(elem, level) {
elem.children().each(function() { // iterate children
var $this = $(this);
var appendToThis = $tr.find("td").eq(level); // find td to append this level to
var appendedText = text($this) + "<br>"; // text to append
if(appendToThis.length) { // if td exists
appendToThis.append(appendedText);
} else { // if td doesn't exist yet
$tr.append($("<td>").append(appendedText));
}
var children = $this.children();
if(children.length) { // call recursively for children, if any
add(children, level + 1);
}
});
}
add($("ul:eq(0)"), 0); // start the process
References: http://viralpatel.net/blogs/2011/02/jquery-get-text-element-without-child-element.html