Bruno A
Bruno A

Reputation: 127

Primefaces slider <p:slider>: detect sliding

Is it possible to detect the event "while sliding" in a primefaces slider?

I have a poll (every 3 seconds the sliders are updated) to update the sliders' values (as multiple clients can use the slide).

When I am sliding and a periodic ajax call is made (by <p:poll>), the slider returns to its initial position. This behavior is understandable, because the form itself is refreshed.

I need to avoid this: when I'm sliding, I want the poll to stop. When I stop sliding the ajax event "slideEnd" is called. In this event, I would return the poll refresh process normally.

Is this possible? What would I need?

Edit: I found out about onSlide and onSlideStart attributes of <p:slider>. I used something like:

<p:slider for="porta2005" minValue="0.0" maxValue="100.0" step="1" styleClass="width-100" onSlide="#{dimmerBean.slideStart()}">
    <p:ajax event="slideEnd" listener="#{dimmerBean.mudaTensao2005}" update="tensao2005"/>
</p:slider>

But the method slideStart() is called on every poll request inside bean, not only when I effectively slide. Is it wrong to call a bean method inside onSlide like this?

I am using Primefaces 6.1.

Upvotes: 0

Views: 1919

Answers (1)

Ashish Mathew
Ashish Mathew

Reputation: 823

The onSlide, onSlideStart, and onSlideEnd are client side callbacks. So if a backing bean method is put in these attributes, it will be called during render, and not during the actual event.

From the documentation:

Name    Default  Type      Description
onSlide  null        String    Client side callback to execute during sliding.

And a little below this:

Client Side Callbacks
Slider provides three callbacks to hook-in your custom javascript, onSlideStart, onSlide and onSlideEnd. All of these callbacks receive two parameters; slide event and the ui object containing information about the event.

You can stop polling by using the poll widget functions. Suppose your p:poll has a widgetVar attribute as myPoll, you can pause it during sliding as shown.

<p:slider for="porta2005" minValue="0.0" maxValue="100.0" step="1" styleClass="width-100" 
          onSlideStart="PF('myPoll').stop()" onSlideEnd="PF('myPoll').start()">

Upvotes: 3

Related Questions