How to pass values from actual row to bootstrap model

Question

I want to edit my data from table(jsp and bootstrap), if i click on a certain edit button, a modal dialog is shown, that already has the values of the row selected. So the bootstrap dialog should contain the values of row that i clicked on.

Table :

<table  id="example" class="table table-bordered table-striped">

                                        <thead>
                                            <tr>
                                                <td >Type</td>
                                                <th>Marque</th>
                                                <th>Date fin</th>
                                                <th>Date prochaine</th>
                                                <th>Résoudre
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <s:iterator value="%{#session['liste']}" status="userStatus">
                                            <tr>
                                                <td  class="type" ><s:property  value="type" /></td>
                                                <td><s:property value="marque" /></td>
                                                <td><s:date name="dt_fin" format="dd/MM/yyyy"/></td>
                                                <td><s:date name="dt_proch" format="dd/MM/yyyy" /></td>
                                                <td><button class="btn btn-info" onclick="resoudre()" > Résoudre</button>
                                                </td>                                               
                                            </tr>
                                            </s:iterator>
                                        </tbody>

                                    </table>

model :

<!-- COMPOSE MESSAGE MODAL -->

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"><i class="fa fa-envelope-o"></i> Ajouter assurance</h4>
                    </div>
                    <s:form  enctype="multipart/form-data" theme="bootstrap">
                        <div class="modal-body">

                            <div class="form-group" >
                                 <div class="form-group"><div class="row">
                                        <div class="col-lg-offset-3 col-md-5">
                                    <s:textfield name="type" class="type" cssClass="form-control" label="type" id="type"></s:textfield>
                                    </div></div>
                            </div></div>



                            <button type="submit" id="submit" class="btn btn-primary pull-left"><i class="fa fa-envelope"></i> Enregistrer</button>
                        </div>
                    </s:form>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

I try with this js code :

function resoudre() {

    var myModal = $("#myModal");

// now get the values from the table
    var type= $(this).closest("tr").find("td.type").html();
alert(type);

    // and set them in the modal:
    $('.type', myModal).val(type);


    // and finally show the modal
    myModal.modal({ show: true });


}

My question is how can i pass values from table to model by clicking on etit button ?

AyB AyB · Accepted Answer · 2014-05-05T11:46:11

You need to pass the element inside the function call:

onclick="resoudre(this)"

And in your function, use the element passed as parameter:

function resoudre(elem) {

    var type= $(elem).closest("tr").find("td.type").html();
}

DEMO

How to pass values from actual row to bootstrap model

1 Answers