javascript to show contents of inplace component

[krenfro]

Is there a way to dynamically show the contents of an inplace component?

Code: Select all

<h:form id="form">
  <p:inplace id="myInplace" widgetVar="inplacePhone">
    <h:inputText value="#{myBean.phone}">
      <rc:convertPhone/> <!-- my custom converter -->
    </h:inputText>
  </p:inplace>
</h:form>

If #{myBean.phone} is empty string, there is nothing for the user to click on to get to the inplace content. I could use the label attribute of the inplace component, but when myBean.phone is not null, the custom converter is not used. My initial thought was that I could use an optionally rendered outputLink that could execute some sort of click() or show() method on the inplace component, but I could not get this to work.

After examining the javascript (source) that shows/hides the inplace component, it looks like I could construct some javascript that uses jQuery(contentId).show(), but this seems brittle and the wrong way to go.

Can anyone think of a good solution to this?
thanks!

[krenfro]

One silly solution that gives me the behaviour I want, is to have 2 inplace components. Each optionally rendered based on #{myBean.phone} being empty or not.

Code: Select all

<h:form id="form">
  <p:inplace label="add" rendered="#{empty myBean.phone}">
    <h:inputText value="#{myBean.phone}">
      <rc:convertPhone/> <!-- my custom converter -->
    </h:inputText>
  </p:inplace>
  <p:inplace rendered="#{not empty myBean.phone}">
    <h:inputText value="#{myBean.phone}">
      <rc:convertPhone/> <!-- my custom converter -->
    </h:inputText>
  </p:inplace>
</h:form>

I will need several inplace components on my page, so this solution is not ideal. I would much rather have some javascript that could show the contents of the inplace component.

ideas?

[cagatay.civici]

How about the disabled attribute would that help? When inplace disabled is set to true, only display is shown not the content.

Code: Select all

<h:form id="form">
  <p:inplace label="#{empty myBean.phone ? 'Add' : myBean.phone}" disabled="#{not empty myBean.phone}">
    <h:inputText value="#{myBean.phone}">
      <rc:convertPhone/>
    </h:inputText>
  </p:inplace>
</h:form>

[krenfro]

Tried it, but I don't think that will work for me. I would like the field to be editable after the bean has data.

Another solution would be to have a value for the label attribute available in the backing bean. I could apply the conversion in the backing bean before the value goes out. This is not ideal, but gets the job done.

thanks.
Ideas?