Change Properties by ADF JavaScript

Question

Hello Experts,
I am trying to change two properties styleClass and shortDesc of a panelGroupLayout. I have a clientListener attached to that panelGroupLayout.
<af:panelGroupLayout id="dc_pgl3" styleClass="carousel-player-panel start" layout="vertical">
    <af:clientListener method="playOrPauseCaroselAnimation" type="click"/>
</af:panelGroupLayout>
From the playOrPauseCaroselAnimation method I am doing:
var playOrPauseCaroselAnimation = function(event) {
    //some other code
    var carouselPlayerPanel = event.getSource();  
    if(hasStyleClass(carouselPlayerPanel, 'start')) {
        carouselPlayerPanel.setProperty("shortDesc", "Pause", false, AdfUIComponent.PROPAGATE_LOCALLY);
        carouselPlayerPanel.setProperty("styleClass", "carousel-player-panel stop", false, AdfUIComponent.PROPAGATE_LOCALLY);
  //some other code
    } else {          
        carouselPlayerPanel.setProperty("shortDesc", "Play", false, AdfUIComponent.PROPAGATE_LOCALLY);
        carouselPlayerPanel.setProperty("styleClass", "carousel-player-panel start", false, AdfUIComponent.PROPAGATE_LOCALLY);
But the strange thing that is happening is, it is not working unless I comment the line where I am changing the property shortDesc. For the styleClass it does work.
I even have tested by commenting the property change of the styleClass. And in that case also the shortDesc is not updating.
And if I do this:
var playOrPauseCaroselAnimation = function(event) {
    clearInterval(searchCarouselInterval);
    var carouselPlayerPanel = event.getSource();  
    if(hasStyleClass(carouselPlayerPanel, "start")) {
        //carouselPlayerPanel.setProperty("shortDesc", "Pause", false, AdfUIComponent.PROPAGATE_LOCALLY);
        carouselPlayerPanel.setShortDesc("Pause");
        carouselPlayerPanel.setProperty("styleClass", "carousel-player-panel stop", false, AdfUIComponent.PROPAGATE_LOCALLY);
        //some other code                
    } else {          
        //carouselPlayerPanel.setProperty("shortDesc", "Play", false, AdfUIComponent.PROPAGATE_LOCALLY);
        carouselPlayerPanel.setShortDesc("Play");
        carouselPlayerPanel.setProperty("styleClass", "carousel-player-panel start", false, AdfUIComponent.PROPAGATE_LOCALLY);
Then on the first click the change is not reflecting. The codes which are in the "//some other code" portion get executed but the o change in styleClass and shortDesc. On second time clicking it is working. But when again that panelGroupLayout got the styleClass "start" it behaves the same (first time doesn't work, on second click work). Also by changing the shortDesc this way would persist the change and that is not desired. Since I want if any PPR happens the panelGroupLayout should get reset as it was initially.
I am unable to figure what is causing the issue? Any pointer would be very helpful.

Answer 1

Hi Tapas,
I think you might be doing something else in //someothercode. I tried the following and it works as expected with no problem:
                        <af:resource type="javascript">
                            function updateAttributes(event){
                                var panel = event.getSource();
                                console.log("entering");
                                console.log(hasStyleClass(panel,'start'));
                                if (hasStyleClass(panel,'start')){
                                    panel.setProperty("shortDesc", "Pause");
                                    panel.setProperty("styleClass", "carousel-player-panel stop");
                                }else{
                                    console.log("Adding ShortDesc");
                                    panel.setProperty("shortDesc", "Play");
                                    console.log("Adding start class");
                                    panel.setProperty("styleClass", "carousel-player-panel start");
                            function hasStyleClass(ui, str){
                                var style = ui.getStyleClass();
                                console.log("looking for "+str);
                                console.log("in "+style);
                                console.log("Returning "+(style != null ? style.indexOf(str) != -1? true : false : false));
                                return (style != null ? style.indexOf(str) != -1? true : false : false);
                        </af:resource>
Also, you need to put clientComponent="true" to your panelGroupLayout.