CODEWITHSUNDEEP
jsfprimefaces
Serhii Shevchyk
Serhii Shevchyk

Reputation: 39436

updating PrimeFaces Calendar component with dates from back-end

I use calendar component from PrimeFaces. 

    <p:calendar id="hotelCalendar"
                mode="inline"
                beforeShowDay="disableDates" 
                pages="1">
        <p:ajax event="dateSelect" listener="#{apartments.handleDateSelect}" 
              oncomplete="loadDisabledDates();" update="hotelCalendar"/>
    </p:calendar>

Logic: when a user clicks on the date, back-end should process this date and set it as disabled. After that calendar receives updated array of disabled dates from back-end(using ajax request), reload all the dates(using beforeShowDay) and mark them with different colors. Available - green, disabled - red.

The problem: Calendar update is executed almost instantly after dateSelect event. That's why I don't see current changes until the next click.

Question:

  1. How could I force update to be executed after js loadDisabledDates() is completed?
  2. Is there any other way to achieve such functionality? Probably with binding Calendar component to bean?

Upvotes: 0

Views: 2863

Answers (1)

BalusC
BalusC

Reputation: 1108642

The oncomplete runs indeed after update. I'm not sure why you expected the other way round, the documentation says clearly so.

Basically, this is the event invocation order:

  • onclick handler is invoked
  • ajax request is prepared with form data based on process
  • onbegin handler is invoked
  • ajax request is sent
  • ajax response is successfully retrieved (HTTP status code is 200)
  • onsuccess handler is invoked
  • ajax updates are performed in HTML DOM based on update
  • oncomplete handler is invoked

So, provided that you want to execute some script after executing the ajax response but before updating the HTML DOM, just use onsuccess instead of oncomplete.

Upvotes: 3

Related Questions