I am using primefaces 3.3 library for jsf based application.
I am using <p:pickList> to handle drag and drop the element from source to target and vide versa.
I want to call the jsf bean method when element transferring(by drag-drop ) from source to target and vice versa and handle some logical things there.
I follow the link PrimeFaces showcase for pickList to implement my functionality. This is the version 5.2.7.
In primefaces 5.2.7 it can be easily done by <p:ajax event="transfer" /> , but how can I achieve this using primafaces 3.3.
I try valueChangeListener attribute but it is not working.
There is one attribute called onTransfer , but it is for clientSide callback.
This can be achieve by putting submit button. But I want to achieve it on drag and drop. So how can i do that ?
Thanks in advance.
First, you should consider an update of your primefaces version. Updates are not only provided for new features but also for bug fixes, improvements (performance, stability) etc.
Currently I cannot find the documentation for 3.3, but what you could try is using p:remoteCommand (its in the 3.5 documentation, so maybe available):
use onTransfer="submitToBean()" along with a p:remoteCommand that might look like this:
<p:remoteCommand
name="submitToBean"
action="#{myBean.doSomething}"
process="idOfYourPickList"
partialSubmit="true" />
Then the onTransfer Event will call the javascript method submitToBean() which in turn will process your picklist and call the action method.
Related
I am trying to update an UI text field in primefaces 6.2 using java script method. Though I am able to update the value from UI side, it is not reflecting in backing managed bean
Xhtml:
<h:inputHidden id="test" value="#{mybean.fieldname}" valueChangeListener="#
{mybean.method}">
<f:ajax/>
</h:inputHidden>
Javascript:
function update(){
document.getElementByID('form:test').value="change";
alert(document.getElementByID('form:test').value);
}
I expect my value changehandler to get called since I updated my value but nothing occurs.can some one pls tell where I am getting wrong
Edit :Actually I am trying to submit the value changed from UI side alone using Js to the actual bean value, basically dom alone is changed and kind of trying to submit the same using any ajax calls. but still it is not working. Refered this link:When to use valueChangeListener or f:ajax listener? Can some one pls give some insights on how this can be achieved?
You have to trigger explicitly a change event by JavaScript if you set a value by JavaScript.
<p:selectBooleanCheckbox value="#{dropdownView.value}">
<p:ajax update="msgs" listener="#{dropdownView.add}" />
</p:selectBooleanCheckbox>
In primefaces I am able to call bean method to perform action on click of checkbox with the above code.
But I am unable to call bean method to perform action on click of selectBooleanCheckbox in Bootsfaces.
Can anyone please help regarding how to successfully call a bean method which displays message true or false onclick of selectBooleancheckbox in Bootsfaces.
I have tried this, but it's not working:
<b:selectBooleanCheckbox value="#{dropdownView.value}"
update="msgs" onchange="ajax:ajaxBean.add()" />
I am new to bootsfaces. Any help would be appreciated.Thank you
The BootsFaces showcase has an example how to use AJAX with checkboxes. Our example uses onclick instead of onchange. Other than that, everything seems to be identical. I didn't check that yet, but it's possible b:checkbox doesn't support onchange (although I don't see why not - we've implemented both events).
By the way, the other approach using f:ajax / p:ajax and a listener should work, too. But we've added this feature later, so we don't guarantee that the traditional JSF style of AJAX always works with BootsFaces.
I am using PrimeFaces and JSF - I need to be able to set a component on the page as mandatory in response to an AJAX event. Is the best way to accomplish this using the following code or is there also a way to accomplish it using JQuery ?
Thanks
UIInput componentToChange = (UIInput) facesContext.getViewRoot().findComponent("ComponentId");
componentToChange.setRequired(true);
Thanks
Just set the component's required attribute with the desired EL expression.
E.g.
<h:inputText ... required="#{bean.required}" />
There are even EL ways without needing an additional bean property, but it's impossible to propose one based on the sparse information provided so far.
Use findComponent() with care. Think twice if it really can't be done just in the view (XHTML) side.
What is or could be a best practice?
Using standard JSF components and combine them by PrimeFaces components when needed (for example when DHTML or AJAX components are needed)
Forget all JSF Components and try to use all PrimeFaces components as much as possible
Please explain it and tell me about your experiences.
Thanks in advance...
PrimeFaces is your AJAX framework, so if you need to send ajaxical request, then use PrimeFaces components.
Even though, you dont need to send ajax request, but you can still use PF component, if u need to provide a consistency look for your web page. For example, h:commandButton and p:commandButton. Use p:commandButton if u need to send ajax request, but u can also do this
<p:commandButton ajax="false" action="Your Action here"/>
This will provide the same result as:
<h:commandButton action="Your Action here"/>
but this way, you can provide the same consistent look for your button throughout the page.
PrimeFaces does not have replacements for h:panelGrid, h:panelGroup, h:inputText, h:outputText ...
Depends on the sole functional requirement. If you're already using PrimeFaces and whatever you want to achieve can better/easier be achieved using a PrimeFaces component, use it.
Option 1 comes close, but option 2 goes overboard. PrimeFaces for example doesn't have a <p:form>, <p:panelGroup>, <p:outputText> or something.
With Primefaces it's very easy to get a consistent look for your application since it comes with Themeroller CSS framework. And you can easily switch designs. Although it is not difficult to let plain jsf components look like primefaces components if you apply the right css classes.
I think primefaces is a great component library. However some components are still buggy (e.g. date picker). So if you get some unexpected behavior with a primefaces component, it is alway good to have a jsf fallback (or an alternative from another component library or from jquery).
I have no experience with mixing different component libraries. Would be interesting to know, how they interact. But that would be subject of another question ...
I am using PrimeFaces and JSF. Can anyone tell me how do I reorder rows of a DataTable using Primefaces drag and drop component?
Currently with in the PrimeFaces framework (v2.2.1 and 3.0) this is not possible with <p:dataTable>.
There is an open PrimeFaces Issue 511 <p:dataTable> draggable columns to add the Yahoo widget datatable draggableColumns attribute to the PrimeFaces <p:dataTable> but no target version is set yet.
If you would like to see this added to PrimeFaces star the issue to help give it higher priority.
This is definitely an older question, but the answer needs updating. This is now doable using the draggableColumns="true" attribute on your p:dataTable.
Your dataTable would then look as such :
<p:dataTable var="i" value="#{bean.data}" draggableColumns="true">
Sources :
PrimeFaces Showcase : DataTable - Columns Reordering
This feature is now available from PrimeFaces 5.0:
Usage is very simple by just enabling draggableRows option and also an optional rowReorder ajax behavior is provided getting a ReorderEvent with index information for flexibility.
Source : http://blog.primefaces.org/?p=3026
You can also have a look at the showcase here: http://www.primefaces.org/showcase/ui/data/datatable/reorder.xhtml