How to open multiple component in p:inplace at once

Question

i need to make all component editable when i clicked on h:commandLink

This my code

<p:dataTable styleClass="borderless" id="projectsTable" var="o" value="#{order.orderList}">
<p:column>
<div class="tasks">
    <div class="task-item task-success"> 
        <h:form>
            <div class="task-text">

                <div class="form-group">  
                    <h:outputLabel for="projectName" value="Project Name:" />
                    <p:inplace  effectSpeed="fast" editor="true">
                        <p:inputText  styleClass="form-control" value="#{o.productName}" required="true" label="text" />
                    </p:inplace>                             
                </div>

                <div class="form-group">  
                    <h:outputLabel for="projectURL" value="Project URL:" />
                    <p:inplace  effectSpeed="fast" editor="true">
                        <p:inputText  styleClass="form-control" value="#{o.price}" required="true" label="text" />
                    </p:inplace>                             
                </div>
            </div>
            <div class="task-footer">
                <div class="pull-left">
                    <h:commandLink   >
                        <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span> EDIT
                    </h:commandLink>
                </div>
                <div class="pull-right">
                    <h:commandLink  action="#{order.deleteAction(o)}" >
                        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> Delete
                    </h:commandLink>
                </div>
            </div> 
        </h:form>
    </div>
</div>

that's link i need to click on it and open all h:inputText

<h:commandLink   action="#{order.update(o)}">
   <span class="glyphicon glyphicon-ok-circle" aria-hidden="true">
   </span> EDIT
</h:commandLink>

Such as linkedIn in editProfile page when click on button appear all editable components

Examples:

Befor click button

After clicked button

Do a 'simple' javascript loop over the inputs and fake a 'click' on them.... — Kukeltje, Oct 21 '16 at 08:27
sorry, I do not have the time to write code for you for which the basic examples can be found all over the internet. I gave you a good direct hint on how to solve this. Gaining basic javascript (jquery)/dom/html knowledge is something you should do first. Google is your friend. And you should learn about ajax to... Your current implementation will not work since it will reload the full page and you might not need a commandLink — Kukeltje, Oct 21 '16 at 09:06
The 'basic knowledge' thing is applicable to your other question as well: https://stackoverflow.com/questions/39815520/how-to-add-class-to-tag-when-i-click-on-it — Kukeltje, Oct 21 '16 at 11:41

score 2 · Answer 1 · answered Oct 22 '16 at 03:24

First of all, every PrimeFaces component has a javascript representation which is acessible through the widgetVar.

The Inplace's widget has a method called show() that you can use to show the input field for it. Check this code out:

<p:inplace ... widgetVar="myinplace">
    <p:inputText ... />
</p:inplace>

<!-- this button's click will show the input -->
<button onclick="myinplace.show()">Click Me</button>

I suggest you to set the widgetVar attribute for the inplace components and call the show method on each one of them inside a function that you can use everywhere you want:

<script>
function showInplaces() {
    myinplace1.show();
    myinplace2.show();
    ...
}

Cheers

Good solution. Did not think of this since I assumed the OP would have looked at this. Upvote from me, Makes the original question a RTFM... — Kukeltje, Oct 22 '16 at 12:46

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

During my lunchbreak I was curious, so I did have a quick look.

I looked at the generated source in the showcase of the first item:

<span id="j_idt88:basic" class="ui-inplace ui-hidden-container" data-widget="widget_j_idt88_basic">
  <span id="j_idt88:basic_display" class="ui-inplace-display" style="display:inline">Edit Me</span>
  <span id="j_idt88:basic_content" class="ui-inplace-content" style="display:none">
    <input id="j_idt88:j_idt91" name="j_idt88:j_idt91" value="Edit Me" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false" type="text" />
  </span>
</span>

I noticed the class='ui-inplace-display' class which is on each 'component. The following jquery code selects all inplace components that can be clicked:

$('.ui-inplace-display')

I tried this in the FireFox developer console resulting in the following output:

Object { length: 5, prevObject: Object, context: HTMLDocument → inplace.xhtml, selector: ".ui-inplace-display", 5 more… }

I know you can enable the editing by clicking on an item and so I had to find a way to click on each one. Fortunately, you can give each of them a click by just appending .click() to the selector. It will be applied to each of the components:

$('.ui-inplace-display').click()

And like mentioned, you do not need any jsf button for this, just a plain html one to execute the javascript in an onlclick:

<input onclick="$('.ui-inplace-display').click()" value="Click to edit" type="button">

works perfectly.

As you can see, it pays to learn the basics of webdevelopment before diving into using more complex frameworks since no framework ever solves all of your problems and from time to time (more often then you think), you do need a little low-level javascript

How to open multiple component in p:inplace at once

2 Answers2