Primefaces p:inplace component: how to read state in JavaScript?

Question

How to access the state of PrimeFaces p:inplace component in Javascript?

I need to check if the component is in state inline or not, in order to call toggle()function when needed... AFAIK toggle() can only change the state and not set the state to desired value?

Answer 1

Suppose you got something like thisL

<p:inplace id="basic" widgetVar="myWidget">  
    <p:inputText value="Edit Me" />  
</p:inplace>  

You can check if the inplace was opened with the help of the widgetVar and jQuery , like this

jQuery(myWidget.content).is(":visible")

Or you can check it with the :visible selector and the id of the inplace :

append _display to your inplace element id to check if the editor wasn't open yet

append _content to your inplace element id to check if the editor was already open

jQuery("#basic_display").is(":visible")

jQuery("#basic_content").is(":visible")

you can check it in browser console in the showcase Primefaces Inplace

Answer 2

I have achieved it with checking the CSS display value of ui-inplace-display and ui-inplace-content elements:

            $('.ui-inplace-display').filter(function(){
                return $(this).css('display') == 'inline';
            }).toggle();
            $('.ui-inplace-content').filter(function(){
                return $(this).css('display') == 'none';
            }).toggle();

However, for me it's more a hack that a solution, so I'd expect something more elegant, such as a state in dedicated attribute of JavaScript object, or at least dedicated CSS class for that.