I want reach something like this, lets have a:
<h:outputText id="name" value="#{Bean.foo.name}"/>
in a some column in datatable and i want achieve by single clicking on this output text on layout in order change to:
<h:inputText value="#{Bean.foo.name}"/>
in other words by clicking on output text to change to a classic input field, Is there any way to do this with ajax component, can anybody give me some concept about this, i will be very greatful.
Thanks in advance
If it's not a problem to use a PrimeFaces component here it is; an inplace component
Related
I've got a list of documents and I need to update all at once.
I did something like this:
<ui:repeat id="r_list" value="#{tareaController.controlador.documentosIndexar}" var="documentos" >
where documentosIndexar is the list of documents. It displays all the documents and its properties fine.
I have two panelGrids, one with the viewer of the document and another one with its information.
At the bottom of the information there's the list of documents.
I need to fill the document's information then select another one without losing the previous one.
I'm trying to update the whole ui:repeat and it renders the next document and its information ok but the information of the previous one is lost.
I also tried doing:
<ui:repeat id="r_list">
<p:panelGrid id="pg_document" rendered="#{tareaController.controlador.documentoSeleccionado.id eq documentos.id}">
<---- Document components here ---->
<p:ajax event="rowSelect" update=":f_tarea:r_list:pg_document" listener="#{tareaController.controlador.reemplazarLista(tareaController.documentoSeleccionado)}"/>
</p:panelGrid>
</ui:repeat>
All my components, and well, my page is inside a form called f_tarea, which is from its template.
When I do the above I update that panelGrid from the list, but just that one, and the variable in the rendered condition changed, so all the panelGrid dissapear.
Basically, what I want to do is update JUST the rendered condition on all the panelGrids inside the ui:repeat, so one hides and another one is shown without losing the previous one's information.
Ok. Excuse me I'm a completly stupid.
I tried doing something I haven't done before: downloading the PrimeFaces manual. On the AjaxBehavior section there's the "process" one which process a component in partial request.
I fixed it just by doing:
<p:ajax event="rowSelect" process=":f_tarea:r_list:pg_documento" update=":f_tarea:pg_doc" listener="#{tareaController.controlador.reemplazarLista(tareaController.documentoSeleccionado)}"/>
I won't delete the question in case that it helps someone in the future.
I have a text box which takes a search value, and i want to send this string to the server side on click of a button. Not by a form submit, by an ajax call.
I had added an actionListener to the input tag itself, which is called on blur. But what i really want is for the user to click the button to trigger the search function.
I got an idea from this question, and implemented it this way:
<h:inputText id="likeMaterial" value="#{createBookingForm.searchText}"></h:inputText>
<a4j:jsFunction name="setParameterAndRerender" actionListener="{bean.searchMaterials}" reRender="searchResult">
<a4j:actionparam name="param1" assignTo="#{createBookingForm.searchText}"/>
</a4j:jsFunction>
<h:commandButton value="Search" onclick="setParameterAndRerender('mySearchText');return false;"></h:commandButton>
The value received at server side is of course, "mySearchText". How do i pass what the user enters? Or how do i bind #{createBookingForm.searchText} before the button's action listener is called?
Im open to any other approach to. I have limitations though : Im working on enhancing a legacy application, built using JSF 1.1. I cant upgrade, not without a fight at least!
Edit : I tried doing it this way, but i get "undefined" on the server side.
Why not use a4j:commandButton instead of h:commandButton? It will execute ajax request and render what you want. No form submit will happen. Loks like what you need.
h:commandButton by default submit the form when clicked. So no need to send specially using a4j:jsFunction or in any other way. You can completely remove your js function unless if you have something else to do. If you want to test that add an action method and print the value of searchText variale in createBookingForm bean.
Hope this helps!!
This is the whole solution
<h:inputText id="likeMaterial" value="#{createBookingForm.searchText}"></h:inputText>
<a4j:commandButton reRender="searchResult" actionListener="#{createBookingForm.searchMaterials}">
<a4j:actionparam name="param1" noEscape="true" value="document.getElementById('likeMaterial').value" assignTo="#{createBookingForm.searchText}" />
</a4j:commandButton>
I wanted to ask just what title says:
say we have a inputtext and a button. Well, I wanted to submit an ajax request in the inputtext when button is clicked.
for example, from the inputtext perspective, I want to achive something like this:
<h:inputtext>
<a4j:support event="button.onclick"/>
<h:inputtext>
<h:button id="button">
or, from the button perspective:
<h:inputtext id="input"/>
<h:button id="button">
<a4j:support event="onclick" action="input.submit"/>
</h:button>
Don't know if there exist an easy way to get this done.
thanks in advance!!
If you just want a simple form submit, I think both approach are wrong, as long as you put your inputtext and button properly in a form, the form will automatically submit whatever you have in this form including user's input in inputtext when you click the button. There is no need to do something like input.submit yourself. (and it's not correct, either)
For the following case, you will see the setInputValue() of managed bean being invoked when you click your button.
<h:inputtext id="input" value=#{bean.inputValue}/>
public void setInputValue(String inputValue){
this.inputValue = inputValue;
}
Try using
Richfaces Region component to limit your request to diffrent regions.
http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/a4j_region.html
I finally get this done by means of <a4j:jsFunction>
a4j:jsFunction
I have been playing around with JSF and ui:repeat to create a simple dynamic table. My next step in teh process is to allow each cell in the table to be clickable/edited and started to tie in f:ajax around an h:outputlabel. This is where my dilemma begins because I would like the entire cell to be clickable, not just the contents/text of the cell and I haven't found a way to make the cell respond to an ajax click.
I have been doing a lot of searching but haven't found the direction that I need or a JSF expert to say "That's not possible".
So, my questions are:
is there a jsf component that can be used that can work with f:ajax tag and can also be formatted to fit a table cell?
is there a way to make the actual table cell click event work with an f:ajax tag or something similar.
As always thanks for the input and suggestions!
Regards,
Mike
There is no standard JSF component which generates a <td> with an onclick attribute.
Your best bet is to include a <h:commandLink> in the table cell and let it span the entire space of the table cell by setting its CSS display property to block.
<td>
<h:commandLink ... style="display:block;">
<f:ajax ... />
<h:outputLabel ... />
...
</h:commandLink>
</td>
(note that best practice is to specify CSS classes in a separate .css file and to use styleClass instead; the above is just examplary)
This gives the enduser the impression that the entire table cell is clickable.
I want to change next example:
http://livedemo.exadel.com/richfaces-demo/richfaces/calendar.jsf?tab=organizer&cid=1157294
to have ability to set up weekends and hollydays.
And I have q few questions:
1) why I could use data.shortDescription/data.description in the next code:
<div>
<h:outputText value="{data.shortDescription.escapeHTML()}" />
</div>
<div>
<h:outputText value="{data.description.escapeHTML()}"/>
</div>
Can I use something else to show the text in the current date?
I want to add boolean isDayOff field to CalendarDataModelItemImpl, but I don't know, how I will retrieve it and show, and also save.
How can I set up or cancel weekends using richfaces Calendar (maybe using dataModel maybe not)
Could anyone give me some ideas or example?
Also I need to show this new weekends with red color.
You can change the style of each day, using the dayStyleClass attribute. It should point to a javascript function, that takes an argument day and returns a css class selector. Check the "client side disable/styling" tab of the examples.