Initializing slider with saved values

gbaird · 03 Nov 2010, 13:41

Just getting started with PrimeFaces and have been very impressed so far. Is there a way to initialize the Slider to a particular value on page load? I save the values set by several sliders into my DB and want to start the sliders at those values when the user returns to that page, and let them re-adjust from there. Please advise and keep up the great work!

Thanks!

Franke · 03 Nov 2010, 17:05

You simply connect the p:slider to a h:inputHidden with the initual value set to the value attribute. Like this:

Code: Select all

<h:inputHidden id="txt2" value="#{bean.level}"/>
<p:slider for="txt2" maxValue="5"/>

Note that the input must be before the slider.

gbaird · 04 Nov 2010, 13:46

Thanks for that. I double checked my code and it is not working as you described. Here's the JSF page:

Code: Select all

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">

    <ui:composition template="/template.xhtml">
         <ui:define name="title">
            <h:outputText value="Donor Summary"></h:outputText>
        </ui:define>
        <ui:define name="left">
            <ui:include src="sidebarLeft.xhtml" />
        </ui:define>
        <ui:define name="body">
        <h:form>
            <h:panelGroup id="messagePanel" layout="block">
                <p:messages />
            </h:panelGroup>
            <h:outputText escape="false" value="#{bundle.ListDonorCharitiesEmpty}" rendered="#{donorcontroller.current.donor.donorCharitiesList.size() == 0}"/>
            <h:panelGroup rendered="#{donorcontroller.current.donor.donorCharitiesList.size() > 0}">
                <p:dataTable value="#{donorcontroller.current.donor.donorCharitiesList}" var="item">
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="#{bundle.ListDonorCharitiesTitle_org}"/>
                        </f:facet>
                        <h:outputText value="#{item.org.name}"/>
                    </p:column>
                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="#{bundle.ListDonorCharitiesTitle_percentage}"/>
                        </f:facet>
                        <h:inputHidden id="pct" value="#{item.percentage}" />
                        <p:slider minValue="0" maxValue="100" display="output" for="pct" type="horizontal"/>
                        <h2><h:outputText  id="output" value="#{item.percentage}" />%</h2>
                    </p:column>
                    <p:column>
                        <f:facet name="header">

                        </f:facet>
                        <h:panelGrid columns="1" cellpadding="5">
                             <p:commandButton value="Remove" onclick="confirmation.show()" />
                        </h:panelGrid>
                        <p:confirmDialog message="Are you sure you want to remove this charity?"
                                                showEffect="bounce" hideEffect="explode"
                                                header="Initiating removal process" severity="alert" widgetVar="confirmation">

                                <p:commandButton value="Yes Sure" update="messages" oncomplete="confirmation.hide()"
                                                        action="#{donorcontroller.removeDonorOrg(item)}" />
                                <p:commandButton value="Not Yet" onclick="confirmation.hide()" type="button" />

                        </p:confirmDialog>
                    </p:column>
                       
                </p:dataTable>
            </h:panelGroup>

            <p:commandButton value="Save My Allocations" action="#{donorcontroller.update}"/>
           
            </h:form>

        </ui:define>
    </ui:composition>

</html>

The output display shows the values correctly but the slider inits and displays at 0.

Thanks!

04 Nov 2010, 14:57

Try 2.2.RC1 release, before that an explicit value should have been defined, with 2.2.RC1, slider gets its value from the input element now.

gbaird · 05 Nov 2010, 19:05

Thanks Cagatay, I'm on 2.2.RC1 and the sliders are not initializing. Let me know if you're able to re-produce and if I should file a bug (not clear on how your process is set up).

Thanks!

05 Nov 2010, 23:37

Hi,

What you mean by not initializing? They show up on showcase which is 2.2.RC1? Do you mean initializing with values?

gbaird · 06 Nov 2010, 01:20

Yes, initializing with values. Say I stored a value of 50 in my database from a user's initial slider setting, and later the user accesses a page with a 0 to 100 slider accessing that value - the slider would be set to 50 (right in the middle in this case) on load and allow the user re-adjust from there.

Thanks!

06 Nov 2010, 11:47

I've tried with 2.2.RC1 and it worked;

Code: Select all

public class SliderBean {

	private int number1 = 10;

        //getter setter

}

Code: Select all

<h:inputText id="txt1" value="#{sliderBean.number1}" />
<p:slider for="txt1" />

gbaird · 06 Nov 2010, 22:07

Working, thanks!

Initializing slider with saved values

Who is online