I am using an ApplicationLayout control (8.5.3 UP1) and have added Basic Nodes to be displayed as tabs. I want the tabs to run JavaScript to set a sessionScope variable when clicked. I have a sessionScope.put in the onClick but the variable is not set properly when the tab is clicked.
Worse, when I look at the source of the page, this is what I see for the tabs:
<ul id="view:_id1:_id2:applicationLayout1_tb" class="lotusTabs lotusTabsIndented">
<li class="lotusTabs li">
<div>
<a style="text-decoration:none">Ft. Pierce</a>
</div>
</li>
<li class="lotusTabs li">
<div>
Naperville
</div>
</li>
<li class="lotusTabs li">
<div>
Chicago
</div>
</li>
</ul>
Notice how the first li does not have an href or onclick code and the other two li entries have what appears to be incorrect href and onclick parameters (and that the onclick does not match the label).
From what I can see in the control, this should work. It should execute the onClick code if there is nothing in the href property for the node. I'd appreciate any thoughts or ideas on getting this working. Thanks.
The onClick event on a basicTreeNode is used for running clientSide javascript. You won't be able to put any SSJS such as the sessionScope.put that you have described.
To do what you require you will need to use the submitValue property of the basicTreeNode and then add your script to set the sessionScope to the onItemClick event of the applicationLayout control.
<xe:applicationLayout id="applicationLayout1">
<xe:this.configuration>
<xe:oneuiApplication>
<xe:this.titleBarTabs>
<xe:basicLeafNode label="Tab 1" submitValue="tab1" />
<xe:basicLeafNode label="Tab 2" submitValue="tab2" />
<xe:basicLeafNode label="Tab 3" submitValue="tab3" />
</xe:this.titleBarTabs>
</xe:oneuiApplication>
</xe:this.configuration>
<xp:eventHandler event="onItemClick" submit="true" refreshMode="complete">
<xe:this.action><![CDATA[#{javascript:sessionScope.put("varName",context.getSubmittedValue())}]]></xe:this.action>
</xp:eventHandler>
</xe:applicationLayout>
Related
This is what I get when using the fluid pagination widget.
it try to jump to the 2nd page but without any success
it generates this URL which look like this
http://example.com/news-stories/essen/?tx__%5B%40widget_0%5D%5BcurrentPage%5D=2
This URL above won't work. It is generated by the Tag
I am using the Menu Type "Thumbnail" of Bootstrap Package. And this is the fluid tag which i use to generate it:
<f:widget.paginate objects="{menu}" as="paginatedItems" configuration="{itemsPerPage: 6, insertAbove: 1, insertBelow: 1}">
<f:for each="{paginatedItems}" as="page">
<div class="col-xs-6 col-sm-6">
<f:link.page pageUid="{page.data.uid}" title="{page.data.title}" class="thumbnail" data="{equalheight: 'item', toggle: 'tooltip'}">
<div class="thumbnail-image">
<f:if condition="{page.files.0}">
<f:if condition="{page.files.0.type} == 2">
<f:media file="{page.files.0}" width="{settings.media.width}" height="{settings.media.height}" />
</f:if>
</f:if>
</div>
<div class="thumbnail-caption">
<f:if condition="{page.data.title}">
<h3><f:format.crop maxCharacters="{settings.title.crop}">{page.data.title}</f:format.crop></h3>
</f:if>
<f:if condition="{page.data.abstract}">
<p><f:format.crop maxCharacters="{settings.abstract.crop}">{page.data.abstract}</f:format.crop></p>
</f:if>
</div>
</f:link.page>
</div>
</f:for>
</f:widget.paginate>
Can anybody help to make the pagination work, should I configure something?
The paginate widget needs a plugin context to work. Even the backend paginate widget needs a controller to function. It would be a nice feature to have paginate widget work with menus and other arrays.
In my native Notes development I have a button on which I have defined a icon from the resources. Then in the have an onclick event. Want to make this a bootstrap button with an onclick so I add a link action to it that performs the action. If I add text to the link that displays in the button then when I click on the text the action takes place but I just want the glyphicon and make it the clickable part of the button
<div class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-chevron-down"></span>
<xp:link id="expandLink" >
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="thisValue">
<xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
</xp:eventHandler>
</xp:link>
</div>
if I change it and add the text to the link it works but only if I click on the text:
<div class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-chevron-down"></span>
<xp:link id="expandLink" text="Expand">
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="thisValue">
<xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
</xp:eventHandler>
</xp:link>
</div>
If I have to add the text then the icon is kind of unnecessary.
Is there a way to add a glyphicon to a link to make the icon clickable or ????
You can add the Glyphicon to a xp:button. Try something like this:
<xp:button value="Expand" id="button1" styleClass="btn btn-success btn-sm">
<span class="glyphicon glyphicon-chevron-down"></span>
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="thisValue">
<xp:this.action><![CDATA[#{javascript:viewScope.vsTest = "Test"}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
There is an xp:span component, which should allow you to add an eventHandler to it. Maybe if you use that and an xp:text instead of an xp:link, it will achieve what you want.
I have a problem with the widget.paginate position in the extension tx_news, i'm working in TYPO3 v. 6.1 FLUID/EXTBASE.
My problem is that it's showing the widget.paginate by default, inside the Templates/News/list.html in my list show UL tag. and i want it to be outside the UL tags, I have tryed to move it around, but then it make some big changes to my layout, or do not work at all.
see bottom of page - enter link description here
How can I show the paginate links/widget outside the UL and after it ?
My Templates/News/list.html code
{namespace n=Tx_News_ViewHelpers}
<f:layout name="General" />
<!--
=====================
Templates/News/List.html
-->
<f:section name="content">
<f:if condition="{news}">
<f:then>
<div class="news-list-view">
<ul class="cbp_tmtimeline {newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}">
<f:if condition="{settings.hidePagination}">
<f:then>
<f:for each="{news}" as="newsItem">
<f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}" />
</f:for>
</f:then>
<f:else>
<n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}">
<f:for each="{paginatedNews}" as="newsItem">
<f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}" />
</f:for>
</n:widget.paginate>
</f:else>
</f:if>
</ul>
</div>
</f:then>
<f:else>
<div class="no-news-found">
<f:translate key="list_nonewsfound" />
</div>
</f:else>
</f:if>
</f:section>
You can override the default Paginate Template and define your own Template
Add this to your TS template:
plugin.tx_news.settings.list.paginate.templatePath = YourNewTemplatePath.html
To know how the default template works, check out this Default Template for reference and modify your view accordingly.
If you trying to edit the default News List, change the default news path and write your FLUID template in that file:
plugin.tx_news.view.templateRootPath = YourNewTemplateNews.html
Close your tag before the widget. Of course, you'll have to make a few changes in your CSS to get what you want.
</ul>
<f:else>
<n:widget.paginate>.......
Hi i fix it in the Templates/News/list.html code
with this code.
{namespace n=Tx_News_ViewHelpers}
<f:layout name="General" />
<!--
=====================
Templates/News/List.html
-->
<f:section name="content">
<f:if condition="{news}">
<f:then>
<f:if condition="{settings.hidePagination}">
<f:then>
<f:for each="{news}" as="newsItem">
<f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}" />
</f:for>
</f:then>
<f:else>
<n:widget.paginate objects="{news}" as="paginatedNews" configuration="{settings.list.paginate}">
<div class="news-list-view">
<ul class="cbp_tmtimeline {newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}">
<f:for each="{paginatedNews}" as="newsItem">
<f:render partial="List/Item" arguments="{newsItem: newsItem, settings:settings}" />
</f:for>
</ul>
</div>
</n:widget.paginate>
</f:else>
</f:if>
</f:then>
<f:else>
<div class="no-news-found">
<f:translate key="list_nonewsfound" />
</div>
</f:else>
</f:if>
</f:section>
My problem is that h:selectManyCheckbo loses values when navigating , here's my code below :
<h:selectManyCheckbox id="selectGroupsBox"
value="{userCreationWizardBean.selectedGroupsId}"
layout="pageDirection">
<f:selectItems var="Group"
value="#{userCreationWizardBean.terminalsGroups}"
itemLabel="#{terminalsGroup.groupName}"
itemValue="#{terminalsGroup.id}"
itemDisabled="#{Group.defaultGroup}">
</f:selectItems>
<p:ajax event="change" update=":form-top-wizard:numBase" process="selectGroupsBox"
listener="#{userCreationWizardBean.selectedGroupListner}"></p:ajax>
</h:selectManyCheckbox>
The CheckBox loses values if I go back and forth using my navigation pad :
<div id="top-wizard" class="#{class}">
<ul>
<li class="premier#{wizard_step=='0'?'_active':''}"><p:commandLink
action="#{userCreationWizardBean.getViewAt(0)}" ajax="true"
update=":msg-form:popup_faces-messages"
/></li>
<li class="deuxieme#{wizard_step=='1'?'_active':''}"><p:commandLink
action="#{userCreationWizardBean.getViewAt(1)}" ajax="true"
update=":msg-form:popup_faces-messages"
/></li>
<li class="troisieme#{wizard_step=='2'?'_active':''}"><p:commandLink
action="#{userCreationWizardBean.getViewAt(2)}" ajax="true"
update=":msg-form:popup_faces-messages"
/></li>
<li class="quatrieme#{wizard_step=='3'?'_active':''}"><p:commandLink
action="#{userCreationWizardBean.getViewAt(3)}" ajax="true"
update=":msg-form:popup_faces-messages"
/></li>
</ul>
</div>
The problem stragely vanishes when I delete the itemDisabled attribute.
it seems like i can use jquery css selector syntaxe to exclude the checkbox from being processed , but only in primefaces 3.3 , but i'm using 3.2.
I believe the issue you are experiencing has to do with the fact that a disabled component or item's value is not sent to the server.. I Have also been trying to find a workaround. check out this post it might be helpful.
In JSF, I have included the following line in my xhtml file:
<h:panelGroup id="messageHeader">
<h:messages for="messageHeader" layout="list" errorClass="error" infoClass="inform"/>
</h:panelGroup>
The text gets rendered as
<ul>
<li class="error"> Please enter a First Name </li>
<li class="error"> Please enter a Last Name </li>
</ul>
How do I get the CSS style to apply to the <ul> tag or some surrounding <span> tag?
Here is what I am trying to do. I want all error messages to appear in a single red box. I also want all info messages to appear in a single green box. The example above produces 2 red boxes; one for each <li> item.
Use the styleClass attribute of <h:messages>. It will be applied on the parent HTML element.
E.g.
<h:messages styleClass="messages" />
will end up as
<ul class="messages">
...
</ul>
Update: you seem to want to show info and error messages in separate lists. Use two <h:messages/> instead on which you hide the other severity.
<h:messages styleClass="errorMessages" infoStyle="hide" />
<h:messages styleClass="infoMessages" errorStyle="hide" />
with
.hide {
display: none;
}
This could be done by providing h:messages tag for each message type you need to show with appropriate condition. For exapmle for error message type:
<h:panelGroup id="errorMessageHeader" class="whatever you need" rendered="#{FacesContext.isValidationFailed()}">
<h:messages for="errorMessageHeader" layout="list" errorClass="error" />
</h:panelGroup>
Conditions for other message types you can find by combining methods from
javax.faces.context.FacesContext
Thanks,
A.K.