I would like to generate ID's for an HTML list.
The list is generated dynamically from the database.
I cant use a for loop or the list.zipWithIndex function because my logic contains a few loops for the generation of the list already, in which the counter needs to be incremented too. I also tried it with the defining function, but its not allowed to reasign values like this: #{id = id + 1}
Whats the best way to accomplish the generation of Id's?
Thats part of the template (uniqueId needs to be replaced with an integer):
<div id="tree">
<ul>
<li id="uniqueId">
<a class="dashboard" href="/">Dashboard</a>
</li>
<li id="uniqueId">
<b>Products</b>
<ul id="uniqueId">
#for(cat <- Application.allCategories()) {
<li id="uniqueId">
<a class="name" href="#routes.Categories.getd(cat.id).url">#cat.name</a>
<ul>
#for(prod <- Application.allProducts()) {
<li id="uniqueId">
<a class="name" href="#routes.Product.getById(prod.id).url">#prod.name</a>
</li>
#*more code and the closing tags...*#
Use just ... object's id prefixed to make it unique, example for first listing:
#for(cat <- Application.allCategories()) {
<li id="cat_#cat.id">
for second:
#for(prod <- Application.allProducts()) {
<li id="prod_#prod.id">
or if the same product can be displayed in several categories prefix it with cat.id as well:
#for(cat <- Application.allCategories()) {
<li id="cat_#cat.id">
#for(prod <- Application.allProducts()) {
<li id="prod_#(cat.id)_#(prod.id)">
Related
I have a view using Scala:
#(user: User = null, scripts: Html = Html(""), isLoggedIn: String = "", currentEmail: String=controllers.helpers.AccessMiddleware.getSessionEmail())(content: Html)
The currentEmail string is what I am interested in. It is empty or "" when a user is not logged into the system and contains an email value when logged in.
I can see that the value is empty or "" when opening the URL/application, but the if statement inside the view continually goes to the else part of the statement, display an empty string and not "Login":
<nav class="navmenu center">
<ul>
<li class="scroll_btn">Home</li>
<li class="scroll_btn">Register</li>
<li class="scroll_btn">Admin</li>
#if(currentEmail == "") {
<li class="scroll_btn">Login</li>
} else {
<li class="scroll_btn">#currentEmail</li>
<li class="scroll_btn">Logout</li>
}
</ul>
</nav>
It always determines that there is a value even though it is empty. Here is the page source:
<nav class="navmenu center">
<ul>
<li class="scroll_btn">Home</li>
<li class="scroll_btn">Register</li>
<li class="scroll_btn">Admin</li>
<li class="scroll_btn"></li>
<li class="scroll_btn">Logout</li>
</ul>
Is there another way to compare to an empty string? Also, how do you make the currentEmail value lower case? .toLowerCase() does not work...
I appreciate the help!
Use Option
Option with forall will handle the case where currentEmail is null
Option(currentEmail).forall(_.isEmpty)
Your code becomes
#if(Option(currentEmail).forall(_.isEmpty)) {
<li class="scroll_btn">Login</li>
} else {
<li class="scroll_btn">#currentEmail</li>
<li class="scroll_btn">Logout</li>
}
I need to get node path of jstree element ,I using this code :
$(function () {
$('#jstree').jstree();
$('#jstree')
// listen for event
.on('changed.jstree', function (e, data) {
if (data.action == "select_node") {
var node_path = data.instance.get_path(data.node, "/");
console.log(node_path)
}
});
});
But I get unexpected space character (You can see in console.log() function)
http://jsfiddle.net/3q9Ma/741/
I need a pretty path like this : Folder1/children 1
Please tell me what wrong .
Thank you
The problem actually with the HTML in your fiddle. It looks like this:
<div id="jstree">
<ul>
<li>Folder 1
<ul>
<li id="child_1">Child 1</li>
<li>Child 2</li>
</ul>
</li>
<li>Folder 2</li>
</ul>
</div>
The get_path function is doing exactly what it is supposed to - taking the text from the parent <li> followed by the text from the child <li>. What is happening is that the text from the parent Folder 1 is actually 'Folder/n ', which is causing your problem. I see why you have your HTML structured the way you do, since the example on jstree tells you to do it this way. A way around it would be to remove the line break after your Folder 1. It looks terrible, but it will make your get_path function work:
<div id="jstree">
<ul>
<li>Folder 1<ul>
<li id="child_1">Child 1</li>
<li>Child 2</li>
</ul>
<li>Folder 2</li>
</ul>
</div>
Scala and play novice here, what's the scope of #?
<ul>
#list.map( x => {
<li> {x.name} </li>
})
</ul>
Gives me the list of names,
<ul>
#list.map( x => {
<li> x.name </li>
})
</ul>
Gives me the "x.name" string repeated in a list.
<ul>
#list.map( x => {
<li> #x.name </li>
})
</ul>
Gives me #x.name string repeated in a list.
So it tells me that x.name isn't considered an expression, but when I use # to make it a Scala expression, the # is dumped as is, and the expression doesn't compute.
Could someone please point me to docs on the scope of #?
Thanks.
From the documentation:
the end of the dynamic statement will be inferred from your code
An example:
Hello #customer.name!
^^^^^^^^^^^^^
Dynamic code
So everything between ul tags in your samples is parsed as scala code.
Can I execute that line of code
nav = request().path().toString()
inside of scala template like index.scala.html
I would like to have that code to check on witch side is user and to mark it on menu
using code like this in main.scala.html:
<li class="#("active".when(nav == "contact"))">
Contacts
</li>
I would recommend you different approach, create tag - resuable template, which takes Integer as an argument,
it will render menu and mark as an active different menuitem depends on value.
#(menuItem: Int)
<ul >
<li #if(menuItem==1){ class="active" } >
////
</li>
<li #if(menuItem==2){ class="active" }>
</li>
<li #if(menuItem==3){ class="active" }>
///
</li>
</ul>
from your contact page and any other page, call this tag with corresponding value, #views.html.tags.menu(1)
You can define variables like that if that is your question. If it is not your question than please try to explain your problem in more detail.
#nav = { #request().path().toString() }
I have a page of nested ULs and LIs, I need to get the last LI of each UL, so I'm doing:
$('li:last-child')
this works great.
But I need to extend this so it gets the last child LI of each UL, where the LI doesn't have a given class (x). For example:
<ul>
<li class="x">1</li>
<li>2</li>
<li class="x">3</li>
<li>4</li>
<li>5</li>
<li class="x">
6
<ul>
<li class="x">7</li>
<li>8</li>
<li class="x">9</li>
<li>10</li>
<li>11</li>
<li class="x">12</li>
<li class="x">13</li>
</ul>
</li>
</ul>
I need to return LI 5 and 11 (as these are the last children within their parent ul that don't have .x)
How can I do this elegantly?
Use the map()(docs) method to create a jQuery object by iterating over the <ul> elements, and returning the last child <li> element without an x class.
Example: http://jsfiddle.net/e2Da7/2/
var lastLisNoX = $('ul').map(function() {
return $(this).children('li:not(.x)').get(-1);
});
EDIT: Updated my jsFiddle example with the HTML that was posted in the question.
Filter out the elements with a class.
$('li:not(.x):last-child')
If the classes are different amongst the li elements, that is if all the elements are not class="x" then something like
$('li[class=""]:last-child')