Bootstrap's modal doesn't load well values from Struts2

Question

I am trying to a web with struts 2, hibernate and MySQL.

I show this values with

                    <s:iterator value="propietarios">

                        <fieldset>
                            <legend>
                                ID:
                                <s:property value="idpropietario" />
                            </legend>
                            Nombre:
                            <s:property value="nombre" />
                            <br> Apellidos:
                            <s:property value="apellidos" />
                            <br> Teléfono:
                            <s:property value="telefono" />
                            <p>
                                <s:a action="VerPropiedades">Ver Propiedades
                <s:param name="idpropietario">
                                        <s:property value="idpropietario" />
                                    </s:param>
                                </s:a>
                            <div id="BorrarPropietario<s:property value="idpropietario" />"
                                class="modal fade in">
                                <div class="modal-dialog">
                                    <div class="modal-content">

                                        <div class="modal-header">
                                            <h4 class="modal-title">
                                                Dar de baja a:
                                                <s:property value="nombre" />
                                                <s:property value="%{apellidos}" />
                                            </h4>
                                        </div>
                                        <div class="modal-body">
                                            <h4>¡Atención!</h4>
                                            <p>Si borra a dicho propietario todas las propiedades
                                                bajo su nombre se borrarán. ¿Está seguro de la operación?
                                            </p>
                                        </div>
                                        <div class="modal-footer">
                                            <div class="btn-group">
                                                <s:a action="BorrarPropietario" theme="bootstrap"
                                                    class="btn btn-danger">
                                                    <s:param name="idpropietario">
                                                        <s:property value="%{idpropietario}" />
                                                    </s:param>

                                            Aceptar</s:a>


                                                <button class="btn btn-info" data-dismiss="modal">
                                                    Cancelar</button>



                                            </div>
                                        </div>

                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dalog -->

                                <!-- esto hace que el modal se abra -->
                            </div>
                            <!-- /.modal -->
                            <a data-toggle="modal"
                                href="#BorrarPropietario<s:property value="idpropietario" />"
                                class="btn btn-danger btn-xs"><span
                                class="glyphicon glyphicon-remove"></span>Eliminar</a>
                            <!-- Modal -->
                            <div class="modal fade" id="myModal" role="dialog">
                                <div class="modal-dialog">
                                    <!-- Modal content-->
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            <h4 class="modal-title">Editar propietario</h4>
                                        </div>
                                        <div class="modal-body">
                                            <center>
                                                <p>
                                                    <s:form action="EditarPropietario" method="post"
                                                        role="form">

  ID => <s:textfield name="idpropietario" value="%{idpropietario}"
                                                            readonly="true" />
                                                        <p>
                                                            <s:label class="control-label" value="Nombre  "></s:label>
                                                            <s:textfield name="nombre" value="%{nombre}"
                                                                required="" />
                                                        <p>
                                                            <s:label class="control-label" value="Apellidos"></s:label>
                                                            <s:textfield name="apellidos" value="%{apellidos}"
                                                                required="" />
                                                        <p>
                                                            <s:label class="control-label" value="Teléfono "></s:label>
                                                            <s:textfield name="telefono" value="%{telefono}"
                                                                required="" minlenght="10" maxlenght="10"
                                                                onkeypress="return isNumberKey(event)" />

                                                            <s:submit class="btn btn-primary" value="Enviar" />
                                                    </s:form>
                                                </p>
                                            </center>
                                        </div>

                                    </div>

                                </div>
                            </div>

                            <a data-toggle="modal" data-target="#myModal"
                                href="#EditarPropietario<s:property value="idpropietario" />"
                                class="btn btn-warning btn-xs"><span
                                class="glyphicon glyphicon-edit"></span>Editar</a>
                        </fieldset>
                        <p>
                    </s:iterator>

Delete works with a modal but the edit load values in the textfield but always with the first object. How I can for that this modal show the values from the object selected?

Only I need that his values load well.

Answer 1

Use different id for the modal that. Currently you are using the same id myModal that opens the first modal from the document.

See jsfiddle how to use different ids for dialogs that hold its own data.

 <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal1" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal 1.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <h2>Modal Example</h2> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button> <!-- Modal --> <div class="modal fade" id="myModal2" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <p>Some text in the modal 2.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html> 

You are printing id with

<s:property value="idpropietario" />

That could be used to modify the id of the modal dialog used for editing.