I have several textareas like:
<asp:textbox class="input ThisIsRussia" ..... />
<asp:textbox class="input" ..... />
<asp:textbox class="input ThisIsSparta" ..... />
<asp:textbox class="input" ..... />
Now, I have to select all the textarea / textbox which does not have the class "ThisIsSparta", how do I do it?
I was checking the Jquery selectors website and it said I have to uses
[name!=value]
for this purpose, but when I did this:
$('textarea[class!=ThisIsSparta]').SlideUp();
it was affecting my spartan textarea too!
Am I missing something?
$('textarea').not('.ThisIsSparta');
Related
I would like to read some values from my vm. Here's an example of what I've done so far
<div forEach="${vm.activityData.activityList}">
<label
value="#load(c:cat3('vm.activitiData.', each, '.organizer' ))" />
</div>
But it seems like it is unable to read the each inside the cat3. My objective is to get the organizer for each activity. Any idea how to achieve this ?
Update
For example, I want to simplify from this codes :
<div>
<label value="#load(vm.activityData.A.name)" />
<label value="#load(vm.activityData.ASponsor)" />
<label value="#load(vm.activityData.AOrganizer)" />
<separator/>
<label value="#load(vm.activityData.B.name)" />
<label value="#load(vm.activityData.BSponsor)" />
<label value="#load(vm.activityData.BOrganizer)" />
<separator/>
</div>
into
<div forEach="${vm.activityData.activityList}">
<label value="#load(c:cat3('vm.activityData.', each, '.name'))" />
<label value="#load(c:cat3('vm.activityData.', each, 'Sponsor'))" />
<label value="#load(c:cat3('vm.activityData.', each, 'Organizer'))" />
<separator/>
</div>
Basically what I want to do is to dynamically combine part of strings into one string. And then use #load(string).
Today I had the time to test it and I prepared a fiddle for you.
Your ZK version is good but I did forget to add one more thing.
You have to make use of the custom-attributes otherwise it wouldn't work.
Solution :
<div forEach="${vm.activityData.activityList}">
<custom-attributes field="${each}"/>
<label value="#load(vm.activityData[field].name)" />
<label value="#load(vm.activityData[c:cat(field, 'Sponsor')]" />
<label value="#load(vm.activityData[c:cat(field, 'Organizer')]" />
<separator/>
</div>
I created fast a working fiddle where you can test or look how it works.
I would like to know whether I should use <h:form> tag in a composite component or not?
For example ;
<composite:implementation>
<h:form>
<h:message for="textPanel" style="color:red;" />
<h:panelGrid columns="2" id="textPanel">
#{cc.attrs.nameLable} :
<h:inputText id="name" value="#{cc.attrs.nameValue}" />
#{cc.attrs.emailLable} :
<h:inputText id="email" value="#{cc.attrs.emailValue}" />
</h:panelGrid>
<h:commandButton action="#{cc.attrs.registerButtonAction}"
value="#{cc.attrs.registerButtonText}"
/>
</h:form>
</composite:implementation>
I too had a same issue, I had included my form inside composite component and that did not work. But once I had taken in out from composite component, it worked like a charm. So my experience is that it would not work if you had included form inside composite component.
PS - This is for primefaces.
I have a template layout with JSF 2 and primefaces and primefaces extensions layoutPane. The left side has an search area and a structure are. The right side is a details area.
Here a short form of the template:
<html>
<f:view contentType="text/html">
<h:head>
</h:head>
<h:body style="width: 100%; height: 100%;">
<pe:layout id="layoutId">
<pe:layoutPane id="layoutPaneWestId" position="west" size="30%" closable="false" resizeWhileDragging="true">
<pe:layoutPane id="layoutPaneSearchId" position="north" closable="false" resizable="false">
<h:form id="searchForm">
<ui:insert name="search" />
</h:form>
</pe:layoutPane>
<pe:layoutPane id="layoutPaneContentId" position="center">
<h:form id="structureForm">
<ui:insert name="content" />
</h:form>
</pe:layoutPane>
</pe:layoutPane>
<pe:layoutPane id="layoutPaneDetailId" position="center" size="70%" closable="false">
<h:form id="detailsForm">
<ui:insert name="details" />
</h:form>
</pe:layoutPane>
</pe:layout>
</h:body>
Each area has its own form. Now I ask myself what shall I do with the e. g. with a global p:growl. In which form should it be? Nested forms are invalid html as I know.
Another big problem is that when I type something in the search field in searchForm and click on an accordion panel in structureForm, the content of the search field is submitted. Why?
Kind regards
Oli
You should put your global p:growl in another form outside pe:layout.
The second problem could be related to some update invoked from structureForm to searchForm
I have problem with organizing forms. When I make one form some buttons (or any other components making ajax calls) don't perform action but they do perform update. When I split the form into two new ones the buttons start working.
In this case buttons and autocomplete don't work.
<h:form styleClass="question-#{cc.attrs.question.id}">
...
<p:commandButton value="add answer" update="#form" action="#{questionEditorBean.addAnswer}" />
<p:commandButton value="save" update="#(.question-#{cc.attrs.question.id})" action="#{cc.attrs.onSave}" oncomplete="#{cc.attrs.onCancel}" />
<p:commandButton value="cancel" onclick="#{cc.attrs.onCancel}" />
<p:autoComplete value="#{questionEditorBean.newTag}" id="tagSelect" completeMethod="#{tagBean.completeTag}" dropdown="true"
var="t" itemLabel="#{t.name}" itemValue="#{t}" converter="#{tagConverter}" forceSelection="true">
<p:ajax event="itemSelect" action="#{action}" update="#form"/>
</p:autoComplete>
</h:form>
When I split the form everything works.
<h:form styleClass="question-#{cc.attrs.question.id}">
...
<p:commandButton value="add answer" update="#form" action="#{questionEditorBean.addAnswer}" />
<p:commandButton value="save" update="#(.question-#{cc.attrs.question.id})" action="#{cc.attrs.onSave}" oncomplete="#{cc.attrs.onCancel}" />
<p:commandButton value="cancel" onclick="#{cc.attrs.onCancel}" />
</h:form>
<h:form>
<p:autoComplete value="#{questionEditorBean.newTag}" id="tagSelect" completeMethod="#{tagBean.completeTag}" dropdown="true"
var="t" itemLabel="#{t.name}" itemValue="#{t}" converter="#{tagConverter}" forceSelection="true">
<p:ajax event="itemSelect" action="#{action}" update="#form"/>
</p:autoComplete>
</h:form>
I don't have nested forms. I am running to this problem all the time. I don't understand this behaviour and I don't want to split buttons and components into more forms when they should be conceptually together. Is there a solution?
You could try giving the form an id and set prependId="false", as in this example:
<h:form id="ccForm" prependId="false">
Then you add the form id to all update targets.
<p:ajax event="itemSelect" action="#{action}" update="ccForm:tagSelect" />
This way you make explicit what are the update targets inside your composite component.
Also I noticed that you're trying to use styleClass as an id in your form, and trying to update it. Following this way I suggested, make its update property look like this:
<p:commandButton value="save" update="ccForm:question-#{cc.attrs.question.id}" action="#{cc.attrs.onSave}" oncomplete="#{cc.attrs.onCancel}" />
I hope it helps.
I'm doing a simple search engine for my web app and I'm facing a problem.
My search.xhtml works by getting a parameter, so that search.xhtml?key=lol will return the results for "lol".
What I need to do is that my search commandButton will redirect do search.xhtml?key=INPUT TEXT CONTENT.
Here's my simple code :
<div id="searchBox">
<pou:panel id="searchPanel">
<h:form>
<h:inputText id="searchInput" value="#{dispensaRicercaBean.query}" size="99" maxlength="99"/> <pou:commandButton icon="ui-icon-search" action="ricerca?faces-redirect=true"/>
<pou:watermark value="Search" for="searchInput"/>
</h:form>
</pou:panel>
</div>
where dispensaRicercaBean is #RequestScoped and my result page loads the data calling executeQuery(#{request.getParameter('key')) (a rough example, actually there are some differences)
How can I do that?
Use a plain HTML <form>
<form action="ricera.xhtml">
<h:inputText id="key" size="99" maxlength="99" />
<pou:watermark value="Search" for="key" />
<pou:button icon="ui-icon-search" onclick="submit(); return;" />
</form>