I am trying jsTree for the first time, and have the problem that after calling jstree(), the text in my <li> elements vanishes. After the call, my tree looks like this:
<div id="assessment-treeview" class="jstree jstree-0 jstree-focused jstree-classic">
<ul>
<li class="jstree-last jstree-open"><ins class="jstree-icon"> </ins>
<ul style="">
<li class="jstree-last jstree-open"><ins class="jstree-icon"> </ins>
<ul style="">
<li class="jstree-last jstree-leaf"><ins class="jstree-icon"> </ins></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Before the call it looks like this:
<div id="assessment-treeview">
<ul>
<li>Specific Outcomes
<ul>
<li>[section: name not available for import]
<ul>
<li>[outcome: name not available for import] </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
The jstree call looks like this:
$("#assessment-treeview").jstree({ "themes": { "theme": "classic" } });
What could be causing this?
jsTree doesn't like pure text nodes inside the 'li' tag. When I put the item text into a tag like 'span', everything worked fine again.
From the question code above:
<li><span>Specific Outcomes</span>
<ul>
.
.
</ul>
</li>
Related
I want to display only those pages in the header which have child pages inside them. Using the following code
<nav class="wsmenu clearfix" data-sly-use.nav="in.gov.odishatourism.core.models.HeaderNavigation">
<ul class="wsmenu-list" >
<li aria-haspopup="true" data-sly-repeat="${nav.root.listChildren}" ><span class="wsmenu-click" ><i class="wsmenu-arrow fa fa-angle-down"></i></span>
<a class="" href="javascript:void(0);" data-sly-test="!${item.hasChild}">${item.title}</a>
<div class="wsmegamenu clearfix ">
<div class="container paddingmenu">
<div class="row">
<div class="menuimgdiv" data-sly-repeat.subcategory="${item.listChildren}">
<h3 class="title" data-sly-test.subcat="${subcategory.title}" >${subcat}</h3>
<ul>
<li data-sly-repeat.page="${subcategory.listChildren}"><a class="" href="${page.path # extension='html'}">${page.title}</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li aria-haspopup="true"> Dept of Tourism</li>
</ul>
<a class="wsdownmenu-animated-arrow"><span></span></a>
<div class="wsdownmenu-text">Navigation</div>
</nav>
gives the following output
But this code -
<nav class="wsmenu clearfix" data-sly-use.nav="in.gov.odishatourism.core.models.HeaderNavigation">
<ul class="wsmenu-list" >
<li aria-haspopup="true" data-sly-repeat="${nav.root.listChildren}" ><span class="wsmenu-click" ><i class="wsmenu-arrow fa fa-angle-down"></i></span>
<a class="" href="javascript:void(0);" data-sly-test="${item.hasChild}">${item.title}</a>
<div class="wsmegamenu clearfix ">
<div class="container paddingmenu">
<div class="row">
<div class="menuimgdiv" data-sly-repeat.subcategory="${item.listChildren}">
<h3 class="title" data-sly-test.subcat="${subcategory.title}" >${subcat}</h3>
<ul>
<li data-sly-repeat.page="${subcategory.listChildren}"><a class="" href="${page.path # extension='html'}">${page.title}</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li aria-haspopup="true"> Dept of Tourism</li>
</ul>
<a class="wsdownmenu-animated-arrow"><span></span></a>
<div class="wsdownmenu-text">Navigation</div>
</nav>
gives the output as shown below
The code
<a class="" href="javascript:void(0);" data-sly-test="${item.hasChild}">${item.title}</a>
is not working properly.
My site structure is as shown below
And the actual desired output is
You cannot use ${item.hasChild} in your test condition as the hasChild() method of the Page API requires you to pass a parameter. AFAIK, HTL doesn't support invocation of parameterized methods.
Since there is no direct API available to check if a page has child pages or not, you may need to do the following to validate if the page has child pages
<a class="" href="javascript:void(0);" data-sly-test="${item.listChildren && item.listChildren.hasNext}">${item.title}</a>
However, I would prefer building the entire navigation tree using Sling models or WCM Use API and not invoking so many methods in the HTL. That would make the code easier to maintain, change and test. YMMV
I want to display names of every child pages of the parent of the current page except the current page in the component in aem. But my output is coming including the current page name.
<section id="touractivities">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="row buttontab">
<li class="col-md col-sm-4 col-6" data-sly-repeat="${CurrentPage.parent.listChildren}">
<div class="btnbggradient">
<a href="${item.path}.html" class="shadow">
<i class="icon-${item.name}"></i>
<h5 >${item.title}</h5>
</a>
</div>
</li>
</ul>
</div>
</div>
</div></section>
my aem structure:
required output:
output im getting:
The code is correct except that the bird watching li should not come while i am in bird watching page.
You can switch from data-sly-repeat to data-sly-list (so you can move it to the ul element). You can then use data-sly-test on the li element and check each item path against the current resource/page path:
<li data-sly-test=“${item.path != resource.path}” ...
<section id="touractivities">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="row buttontab" data-sly-list="${CurrentPage.parent.listChildren}">
<li class="col-md col-sm-4 col-6" data-sly-test="${item.path != currentPage.path}" >
<div class="btnbggradient">
<a href="${item.path}.html" class="shadow">
<i class="icon-${item.name}"></i>
<h5 >${item.title}</h5>
</a>
</div>
</li>
</ul>
</div>
</div>
</div></section>
i implement the following custom view
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="tab1">Section 1</a></li>
<li><a data-toggle="tab" data-target="tab2">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
<script>
$( function() {
$('.nav-tabs a').click(function(){
console.log(this);
$(this).tab('show');
});
} );
</script>
The tabs are showing correctly but when i click tab2 the tab is not changing to content of of tab2. Console.log is shown. Any help please ?
The IDs provided in data-target are missing a leading # each.
Values of the data-target attribute are parsed as jquery selectors.
<li class="active"><a data-toggle="tab" data-target="#tab1">Section 1</a></li>
<li><a data-toggle="tab" data-target="#tab2">Section 2</a></li>
I'm trying to create a menu dynamically (with some data from my database), the problem occurs when i try to add new menu item "li" with gwt HTML composite or with HTMLPanel, the li added inside a div element! and that break my style and break the menu, what can do to add html without div in gwt??
<ul style="display: none;" id="agence-id" class="submenu">
<div class="gwt-HTML">
<li>
<a id="P45O421">
<i class="icon-double-angle-right">
</i>P45O421</a>
</li>
</div>
<div class="gwt-HTML">
<li>
<a id="c2">
<i class="icon-double-angle-right">
</i>c2
</a>
</li>
</div>
<div class="gwt-HTML">
<li>
<a id="c3">
<i class="icon-double-angle-right"></i>c3</a>
</li>
</div>
<div class="gwt-HTML">
<li>
<a id="c4">
<i class="icon-double-angle-right">
</i>c4</a>
</li>
</div>
Create the HTMLPanel with the constructor where you can set the tag: HTMLPanel("li", yourHTML);. This will use the li instead of the standard div.
You can create Li elements by using dete Document.get().createLIElement() method and then add them to your ul element.
When you call RootPanel.get("YOURID").you get the ul element, since you have given it an id and therefor can find it in the DOM:
Codeexample:
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.LIElement;
...
HeadingElement liElement = Document.get().createLIElement();
liElement.setInnerText("This is a Li(l1) element!");
RootPanel.get("agence-id").getElement().appendChild(liElement );
I am going to implement twitter bootstrap's carousel in order to display five items at once. My system uses the template engine smarty.
I am already familiar with smarty basics. The following code would display all my items:
<ul class="thumbnails">
{foreach $items as $item}
<li class="span2">
<div class="caption">
<h5>{$item.title}</h5>
</div>
<div class="thumbnail">
<img src="{$item.image}" alt="">
</div>
</li>
{/foreach}
</ul>
Unfortunately twitter bootstrap's carousel needs all the items separated into blocks, like that:
<ul class="thumbnails">
<div class="item active">
<ul class="thumbnails">
<li class="span2 offset1">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span2 offset1">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
</ul>
</div>
...
</ul>
How do I achieve this by using smarty's foreach loop:
Putting 5 items into one div.item the next 5 items into the next div.item and so on
The first div.item should get the class 'active'
The first item in every div.item should get the class '.offset1'
Smarty defines some magic variables which allow you to see how many times the loop has gone through (see the documentation for {foreach} for all the details).
In your case you want to check:
{$item#first} to open the first, active div.item
{$item#iteration is div by 5} to close and open the next div.item, and give its first li the offset1 class
{$item#last} to close off the last div.item whether or not it's divisible by 5