In the Struts2 application in the jsp page I have a feild where the user can select what ever option he want , i used struts:checkboxlist like this
<s:checkboxlist name="cust.communityList" label="Are You Inteterested In"
list="{'WebSpere Consultuing','Portal Consulting','SOA/BPM Consulting','Content Management',
'DataPower Consulting','Information Management Services','Application Monitoring','Application Security',
'Migration to WebSphere','Application Testing','WebSphere Version Upgrade','JAM/Panther Consulting','IBM Software Procurement','XMLink/Progressions','Other'}" />
It is working fine . But in the browser it's look is not good , It dispalying the list elements in a row wise one after the other ,then in the next row ....
I wanted to display them ,2 in the first row ,next 2 items in the second row ans so on ...
How can i display the checkboxlist items in that way ?
Ok, I just did this via the custom template method. It seemed to get the job done. Look at the docs to see how to pull the original checkboxlist FreeMarker css code into your own project. In summary, pull struts2.core.jar/template/simple/checkboxlist.ftl into your own webapp/template directory and modify it. I make the following changes:
1: at the top of the file, where the iterator tag is, I added the following lines (not the iteratorline) before and after:
<table><tr><td> </td><td> </td><td> </td></tr>
<#s.iterator value="parameters.list">
<#if itemCount % 3 = 0 >
<tr>
</#if>
<td>
2: At the end of the file, where the iterator ends, I added:
<#if itemCount % 3 = 0 >
</tr>
</#if>
</#s.iterator>
</table>
3: That's it. Really, the tutorial tells you what you need to know, it's just a matter of hacking up the FreeMarker code.
You can change the theme for the checkbox OR you can extend the theme and then change it.
Look in your /template/simple/checkboxlist.ftl for the base checkboxlist template.
For info on overriding templates see: http://struts.apache.org/2.0.11/docs/template-loading.html
Related
what is the correct way to display the tag name on the tag specific page and a link to it in Modx revo using tagLister? e,g, a post has tags Tag1, Tag2 and Tag3. Now you click on one of the tags and it brings to the target resource displaying al posts with that single tag. What code to put in that target resource so it shows that the user has landed on the specific single tag page. I want to display the name and the link of that exact single tag.
My tags target resource is the main blog resource: Here is the code:
<section>
[[The Code to Display the Tag name to put here]]
[[!getResourcesTag#Blog Pagination Hy?
&elementClass=`modSnippet`
&element=`getResources`
&tpl=`Blog Post on Blog Page`
&hideContainers=`0`
&pageVarKey=`page`
&parents=`[[*id]]`
&limit=`3`
&includeTVs=`1`
&includeContent=`1`
&cache=`0`
]]
<div class="PaginationContainer">
<span class="TotalPages">p [[+page]] (total. [[+pageCount]])</span>
<ul>
[[!+page.nav]]
</ul>
</div>
</section>
is it possible at all?
Finally found on the web.
If you got better solution, please put it here.
So the idea is to make a snippet which gets the tag and call the snippet where we want.
Step by Step.
Step 1. Make a new snippet and name it something, e.g. Tag Name,
Step 2. Put the snippet code in the snippet code placeholder,
Snippet code:
//-- Get all request string key/value pairs
$s = $_REQUEST;
if($s['key'] == 'tags'){
return $s['tag'];
} else {
return false;
}
Step 3. Call the snippet where you want the tag nam to show up, e.g. [[!Tag Name]]
It will show up the tag name on tag pages only.
Here is where I found it
https://forums.modx.com/thread/11108/dynamically-generated-list-of-documents-that-are-tagged-with-categories?page=2#dis-post-397237
I'm working on icefaces upgrade from 1.8 to 3.3 as well as jsf from 1.2 to 2.0.
I have used this link as reference for icefaces upgrade
I'm using ice:datatable in which I have column of checkbox which is grouped for single worker.Check picture which is of before upgrade.
ISSUE 1:
Now Problem faced after migration is that the valuechangelistener of ice:selectbooleancheckbox works fine when I check then uncheck the checkbox of a single worker. But when I do following steps:
Check first worker (This updates the Assigned door column ).
Then check other worker . This unchecks the previous checked worker and also unchecks currently checked worker.
To analyse if there is any issue in phase I used balus C blog to check phase of icefaces when it hits valuechangelistner . Then I found on my second check 2 or more valuechangelistner are called one for previous worker other for current worker(Sometimes twice) this all happens in same invoke application phase.
ISSUE 2:
ValueChangeListener gets called even after Clicking "OK" button or "CANCEL".
Fixed it by adding f:param in ice:commandButton and checking for the param in valuechangelistener method.
Tried:
To change all ice tags in the page to ace tags(Related to datatable i.e datable ,row and column).
Result : Same issue with ace valuechangelistener as well as distorted style. Maybe because I could not find ice:rowHeader equivalent in ace tags and also much more.
Changed only checkbox column to ace:column. Valuechangelistener worked fine but issue with "groupOn" attribute so changed it to "groupBy" and condition="group" still may be it did not work because I used ice:datatable which doesn't support it.
Then I tried to implement groupOn functionality manually. Using rowspan and rendering single checkbox for single worker . But rowspan didn't work. Also when I tried to render checkbox, its style is not exactly same as I need. Check this hattp://postimg.org/image/ih2mgoh7d/ remove 'a' from 'hattp'.
<ace:column groupBy ="#{item.workerName} + #{item.workerId}" rowspan="2"
styleClass= "alignSBChbx" >
<ice:setEventPhase events="ValueChangeEvent"
phase="INVOKE_APPLICATION">
<ice:selectBooleanCheckbox id="dwaCheckbox" value="#{item.select}"
style=" width:'#{appViewSettings.checkboxSize}';
height:'#{appViewSettings.checkboxSize}';"
valueChangeListener="#{dockWorkerAssignmentBean.doorAssignmentChange}"
partialSubmit="true" immediate="true"
disabled="#{!empty dockWorkerAssignmentBean.errorMap['dockWorkersAssignmentPopup:assignmentErrorField']}"
rendered="#{item.visible}">
<f:attribute name="workerIdSelected" value="#{item.workerId}" />
<f:attribute name="assignmentIdSelected" value="#{item.assignmentId}" />
</ice:selectBooleanCheckbox>
</ice:setEventPhase>
</ace:column>
backend
public final void doorAssignmentChange(final ValueChangeEvent event) {
System.out.println("inside door Assignment...");
final String workerIdSelected = (String) event.getComponent().getAttributes().get(
"workerIdSelected");
// unrelevant code
}
}
I need way to display a "List" property with the option to add new elements to the list.
So Basically
Value 1
Value 2
Button: Add new
I created an editfor template for it, where I display all the values with a foreach loop. However, each item get's an index, so when I add a new input field with javascript, the index is wrong.
Any suggestions how to achieve this.
PS: the adding of new elemens mustbe done on the client, since it is a simple form
var abccounter = 1;
$("#abcbutton").click(function () {
$('#itemlist').append('<p><input class="text-box single-line" id="listofstringname_' + abccounter + '_" name="listofstringname[' + abccounter + ']" type="text" value=""></p>');
abccounter++;
});
<p>#Html.EditorFor(model => model.listofstringname)</p>
that is what I did and it worked. the only problem I'm having (and it may be solved eventually) is I want to wrap each element with a tag but I'm not sure how. this JS just adds a new "text box element" assuming 1 as the start as my model loads 1 example by default.
I'm trying to make table rows draggable and then connectToSortable -able.
For some reason, when I put the ID of the tbody ("#sem1") in the selector, it works but obviously drags the whole table-body with all of its rows.
However, when I put "#sem1 tr" in the selector the webpage seems to just ignore that code, meaning the table still shows up correctly, but nothing becomes draggable.
HTML:
<table class = "sem">
<thead>
<th class = "header1">header</th>
<th class = "header2">header</th>
<tr>
<td class = "static1">static1</td>
<td class = "static2">static2</td>
</tr>
</thead>
<tbody id = "sem1">
</tbody>
</table>
Through some JavaScript table rows get added to sem1 like so.
JavaScript:
First pos0[0] (an array) gets populated:
for(var i in setPos[0]){
setPos[0][i]=("<tr><td class = " + String(setClass[i])+ ">" + setPos[0][i].slice(2) + "</td><td class = 'someClass'>"+setThis[i]+"</td></tr>");
}
Then pos0[0][a] gets added to sem1 like this:
for(var a in pos0[0]){
document.getElementById("sem1").innerHTML += pos0[0][a];
}
and when I try to make the rows draggable, it just doesn't work.
jQuery:
$("#sem1 tr").draggable()
Putting just tr in the selector doesn't work either (I don't mind if all the table rows in the whole document are draggable)
**I know that the code says setPos[0] - it's part of a function that does the same thing to pos1, pos2...
Thanks in advance for any help!
My guess is that you are calling the $("#sem1 tr").draggable() line before the code that has inserted the new <tr>'s has been run, so it doesn't see the rows you've added.
Also, have you tried manually inserting some markup to check that the draggable code actually works on a per row basis?
It would help if you could post an example in jsfiddle or something so we can work on this with you.
Finally it could be overkill for this situation but have you looked into using a JavaScript templating engine if you are going to be building chunks of html in your app?
I'm trying to use jquery-ui sortable with nested templates in Meteor, as follows. Here are the two templates in question:
<template name="activityEditor">
{{! the main activity editor view }}
<div class="activity-editor">
<input type="text" name="title" class="input-xxlarge" value="{{info.title}}" placeholder="Type a title here...">
<div class="activity-steps">
{{#each info.steps}}
{{>activityStepEditor}}
{{/each}}
</div>
</div>
</template>
<template name="activityStepEditor">
{{! the container view for each step editor }}
<div class="activity-step" data-id="{{_id}}">
<div class="order">{{order}}</div>
{{!....stuff...}}
</div>
</template>
and the template code (using coffeescript):
_.extend Template.activityEditor, {
# ...stuff...
rendered: ->
$(".activity-steps").sortable {
items: '.activity-step'
handle: '.order'
update: ->
stepIds = ($(el).attr('data-id') for el in $('.activity-step'))
$('.activity-steps').empty() #this must be done in order to steps to re-render properly
Lab.Activity.reorderSteps stepIds
}
$(".activity-steps").disableSelection()
}
The only way I can get this code to work and properly rerender the order is by emptying the container of my sortable elements right after they update with $('.activity-steps').empty(). I've tried cancelling the update event and forcing a rerender by changing another variable watched in the context, but any change causes Exception from Meteor.flush(): undefined after which I can't rerender anything until page reload.
This seems to work, and everything rerenders great. So my question is: is there any reason why I shouldn't do this? Is there a better, standard practice way to handle the sortable that I'm not seeing?
In the near future there'll be a better way to do it, as Meteor team is developing its new rendering engine: http://youtube.com/watch?v=ISNEhPG0wnA
(in this video, Avital Oliver shows exactly a way to do it without redrawing the screen: the object in the list is actually moved on all clients)
See this Meteor's Github Wiki entry for more technical info:
http://github.com/meteor/meteor/wiki/New-Template-Engine-Preview
While that's not officially published, if you need it right now, you could try Nazar Leush's approach:
http://github.com/nleush/meteor-todos-sortable-animation
He also published a working example here: http://todos-dnd-animated.meteor.com