I have Map type.
I want to iterate over it using struts tag library.
now want to generate a token using { id + '_nav' } and set this token to id field of href.
Can You please help me out how to do that in struts?
The JSP Code :
<div class="box-heading">Quick Links</div>
<ul>
<s:set name="currentPage" value="currentNavigationPage"></s:set>
<s:iterator value="orderedSectionName_StartPageMap" >
<s:if test="%{#currentPage > key}">
<li><a id="{key + '_nav'}" href="#" ><s:property value="value"/></a></li>
</s:if>
<s:else>
<li><a href="#" ><s:property value="value"/></a></li>
</s:else>
</s:iterator>
</ul>
Can u please suggest me , how can i appen key from map with '_nav' token ?
Thanks.
Not tested you can try something like
<s:iterator value="orderedSectionName_StartPageMap" var="mapObject" >
<s:if test="%{#currentPage > key}">
<li><a id="%{#key}__nav" href="#" ><s:property value="value"/></a></li>
</s:if>
<s:else>
<li><a href="#" ><s:property value="value"/></a></li>
</s:else>
</s:iterator>
or
<li><a id='%{#key+"__nav"}' href="#" ><s:property value="value"/></a></li>
Honestly i have not tested both of them myself
As update by the Zuned it will work with <s:propert> also
<li><a id='<s:property value="key"/>' href="#" ><s:property value="value"/></a></li>
Try this,
<s:a id="%{key}__nav" href="#" ><s:property value="value"/></s:a>
instead of
<a id="%{#key}__nav" href="#" ><s:property value="value"/></a>
Related
I'm trying to dynamically create a menu using basic logic, something like this.
List item
List item
List item
List item
List item
I made this code
<ul>
<div data-th-each="field, iter : ${fields}" data-th-remove="tag">
<div data-th-if="${field.text} != null" data-th-switch="${field.href}" data-th-remove="tag">
<li data-th-case="null" data-th-utext="${field.text}" >
<li data-th-case="*"><a data-th-href="${field.href}" data-th-utext="${field.text}" ></a>
</div>
<ul data-th-if="${field}" class="sub-menu">
<div data-th-each="prop, propIter : ${field.sub_items.sub_item.properties}" data-th-remove="tag">
<div data-th-if="${prop.text} != null" data-th-switch="${prop.href}" data-th-remove="tag">
<li data-th-case="null" data-th-utext="${prop.text}"></li>
<li data-th-case="*"><a data-th-href="${prop.href}" data-th-utext="${prop.text}"></a></li>
</div>
</div>
</ul>
</li>
</div>
</ul>
But it returns parsing errors, I think it's mostly a Thymeleaf/HTML problem.
It's probably because of the unclosed "li" tags in the switch statement but I'm not sure how to fix it.
Right, it has to be valid html before processing. You can't do any kind of tricks like you have above, even if the output would be valid html.
I think you should be able to restructure your html to look like this:
<ul>
<th:block data-th-each="field, iter : ${fields}" data-th-if="${field.text} != null">
<li>
<span data-th-if="${field.href == null}" data-th-utext="${field.text}" />
<a data-th-unless="${field.href == null}" data-th-href="${field.href}" data-th-utext="${field.text}" />
<ul data-th-if="${field}" class="sub-menu">
<th:block data-th-each="prop, propIter : ${field.sub_items.sub_item.properties}" data-th-if="${prop.text} != null">
<span data-th-if="${prop.href == null}" data-th-utext="${prop.text}" />
<a data-th-unless="${prop.href == null}" data-th-href="${prop.href}" data-th-utext="${prop.text}" />
</th:block>
</ul>
</li>
</th:block>
</ul>
I've never though about using data-th-remove="tag" like you have. But I think you should be using <th:block> instead for cases like this.
I would like to use the JQuery mobile listview with popup with Knockout.js
I don't know unfortunately how to refer the correct ID in the popup.
EDIT
An example can be found here http://jsfiddle.net/QQMD5/4/
The functionality itself works but unfortunately not with the popup of jQuery Mobile...
The listview is quite simple now and follows the example on the JQuery Mobile website
<div data-role="content">
<ul data-bind="foreach: lines" data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true" data-filter="true">
<li><a href="#">
<img src="https://adium.im/images/services/icon-msn.png">
<h2 data-bind="text: ItemCod"></h2>
<p data-bind="text: ItemName"><strong></strong></p>
<p></p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
Delete Item
</li>
</ul>
<div data-role="popup" id="purchase" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
<h3>Delete Item?</h3>
Buy: $10.99
Cancel
</div>
</div>
While the KnockoutJS part is now only client-side as
self.removeLine = function(line) { self.lines.remove(line); }
I imagine the point here is that it doesn't recognize the correct line to be picked.
Thank you
There are a few problems I see in your code which may be copy paste errors or may be breaking your stuff -
You open the anchor tag but never close it
<li>
<a href="#">
<img src="https://adium.im/images/services/icon-msn.png">
<h2 data-bind="text: ItemCod"></h2>
<p data-bind="text: ItemName"><strong></strong></p>
<p></p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
<button data-bind="click: setItemToRemove">Delete Item</button>
</a>
</li>
And if you are going to set an item to be deleted, pass that item into an observable and that way when you call removeLine it passes the proper object back to the view model to remove -
self.itemToRemove = ko.observable();
self.setItemToRemove = function(line) { self.itemToRemove(line); }
self.removeLine = function(line) { self.lines.remove(line); }
And make your pop or w/e display only when itemToRemove has a value -
<div data-role="popup" data-bind="with: itemToRemove">
<h3>Delete Item?</h3>
<button href="#" data-bind="click: $root.removeLine" >Buy: $10.99</button>
Cancel
</div>
Updated
You had a bunch of syntax errors in your fiddle -
http://jsfiddle.net/QQMD5/3/
I am looking for a tabbed navigation menu which caters for images as the tabitems.
So I have something like this:
<div class="menu">
<a href="#">
<img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" />
</a>
<a href="#">
<img src="images/Desert.jpg" style="width:10%; height:10%" title="Desert" />
</a>
<a href="#">
<img src="images/Hydrangeas.jpg" style="width:10%; height:10%" title="Hydrangeas"/>
</a>
<a href="#">
<img src="images/Jellyfish.jpg" style="width:10%; height:10%" title="Jellyfish" />
</a>
<a href="#">
<img src="images/Penguins.jpg" style="width:10%; height:10%" title="Penguins" />
</a>
</div>
I have tried a few jquery/css ones but I cannot find one that gives me a nice style for a tab that contains images?
Try jQuery UI tabs.
Checkout the code on http://jqueryui.com/demos/tabs/#default
Replace Navigation Items in the demo ie.,
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
with your contents, like...
<ul>
<li>
<img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" />
</li>
<li>
<img src="images/Desert.jpg" style="width:10%; height:10%" title="Desert" />
</li>
<li>
<img src="images/Hydrangeas.jpg" style="width:10%; height:10%" title="Hydrangeas"/>
</li>
<li>
<img src="images/Jellyfish.jpg" style="width:10%; height:10%" title="Jellyfish" />
</li>
<li>
<img src="images/Penguins.jpg" style="width:10%; height:10%" title="Penguins" />
</li>
</ul>
Size of the images should be suitable for your tab.
Hope you can understand... :)
I am trying to get an image on the right hand side but it always appear as an arrow.
<ul data-role="listview" data-theme="g">
<li>
<a href="#">
<img src="../Images/play_button.gif" width="16" height="16" class="ui-li-icon" />
<span>Item 1</span>
<span class="ui-li-count">12</span>
</a>
<a href="#">
// I want an image to appear here
</a>
</li>
<li>
<img src="../Images/play_button.gif" width="16" height="16" class="ui-li-icon" />
<span>Item 2</span>
<span class="ui-li-count">9</span>
</li>
</ul>
I'm not sure exactly what is wrong with the layout you're using for the list view,
I would study the documentation and compare it to your code
http://jquerymobile.com/demos/1.0a1/#docs/lists/index.html
If you wanna replace those jqm icons with your icons, read this:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/buttons/buttons-icons.html
See if the "custom icons" section would help you.
I found this as an overview of the list: http://www.youtube.com/watch?v=YaZhS_8vaYo It shows the arrows because the entire contents is wrapped in an <a>, I think if you put the link inside an H3, it will become more contained and not show the error. The only thing I haven't figured out is a custom icon; you may be able to just float it.
I viewed the page source and found it very helpful...
lists-split.html
looks like this.
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a>Purchase album
</li>
<li><a href="index.html">
<img src="images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p>
</a>Purchase album
</li>
</ul>
can any one suggest how to write target="_blank" in struts2. I tried something like below but the hyperlink was not working
<s:url id="imageDownload" namespace="/" action="downloadImage" var="urlTag">
<s:param name="ImageFileName" value="%{ImageFileName}"></s:param>
<s:param name="id" value="%{id}"></s:param>
</s:url>
<a class="linkView" href="<s:property value="#urlTag" />" target="_blank">
<s:property value="ImageFileName" />
</a>
thanks
I think
<a class="linkView" href="<s:property value="#urlTag" />" target="_blank">
<s:property value="ImageFileName" />
</a>
is correct.