CODEWITHSUNDEEP
jsfprimefacesjsf-2.2
salah atwa
salah atwa

Reputation: 86

How to open multiple component in p:inplace at once

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

Upvotes: 0

Views: 692

Answers (2)

Andre Paschoal
Andre Paschoal

Reputation: 332

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

Upvotes: 2

Kukeltje
Kukeltje

Reputation: 12337

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

Upvotes: 1

Related Questions