CODEWITHSUNDEEP
javascriptjsfdatatablemodal-dialog
Chirag Kawariya
Chirag Kawariya

Reputation: 225

Populate valus in css popup after a click of button

I am developing a web application in which in one page(say "abc.xhtml"), I am using pure CSS in order to create a popup. In this page, I am using dataTable to populate values in the form of dynamic table.

This is the HTML code 

<div class="content_box" >

                   <h:dataTable id="example" value="#{userdetails.orderList}" var="o"
                        styleClass="employeeTable" headerClass="employeeTableHeader"
                        >
                        <h:column>
                        <f:facet name="header">Action</f:facet>




    <h:commandButton 
                                    type="submit" value="Edit"
                                     action="#{userLayer.editAction(o)}" ></h:commandButton>
                                     </h:column>

                        <h:column>
                            <f:facet name="User">User</f:facet>

                             <h:outputText value="#{o.user}"  />

                        </h:column>

Instead of commandbutton in action item column, I want to href so that when user clicks on href a modal should popup as a form on screen and then user can edit the values accordingly.

The problem is that when the HTML page loads, the values in the css popup are automatically populated with the values of first row of the dataTable i.e., for index = 0. So, irrespective of which row,when I click on edit button, it will always populate the popup with values of first row.

I thought of two solutions-

return "abc.xhtml#edit";

where #edit is the popup called using href button. Please Help

Upvotes: 0

Views: 148

Answers (1)

Nitesh Soomani
Nitesh Soomani

Reputation: 652

Instead of h:dataTable use ui:repeat here below is example 

<div class="content_box">
<table cellpadding="0" cellspacing="0" border="0" style="white-space: nowrap">
<tr>
<th>Action</th>
<th>User</th>
</tr>
<ui:repeat value="#{userdetails.orderList}" var="o" varStatus="oList">
<tr>
<td><h:commandLink action="#{userLayer.editAction(o)}"
                   value="Edit">
     </h:commandLink></td>
<td> <h:outputText value="#{o.user}"  /></td>
</tr>
</ui:repeat>
</table>
</div>

when you are clicking on edit then you have to fetch data for that particular object from DB and then you have to set the value of user field that come from DB.

sample java code say you are binding value of user in UserModel

public void editAction(User user){
User u = userService.findById(user.id);
userModel.setUser(u.user)
// code for pop-up
}

Upvotes: 1

Related Questions