jquery - show table row to modal bootstrap -

i confused how show table row bootstrap modal, can me?

here modal:

<div id="edit_category_modal" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">     <form id="form_edit_category">         <input type="hidden" name="_token" value="{{csrf_token()}}"/>         <div class="modal-header">             <h4 class="modal-title">edit job category</h4>         </div>         <div class="modal-body">             <input id="name" type="text" class="form-control" name="name" placeholder="category name"/>         </div>         <div class="modal-footer">             <button type="button" data-dismiss="modal" class="btn btn-default">cancel</button>             <button type="submit" id="form_edit_category_submit" class="btn blue">update</button>         </div>     </form> </div> 

and here table:

<table class="table table-striped table-bordered table-hover" id="categories_table">                 <thead>                 <tr role="row" class="heading">                     <th width="1%"># id</th>                     <th>name</th>                     <th width="20%">action</th>                 </tr>                 </thead>                 <tbody>                 <tr>                    <td>1</td>                    <td>category 1</td>                    <td><button id="edit_category">edit</button></td>                 <tr>                 <tr>                    <td>2</td>                    <td>category 2</td>                    <td><button id="edit_category">edit</button></td>                 <tr>                 </tbody>             </table> 

i want show detail row modal if click edit button in row

there 2 ways of achieving this.

1. you can use information have table , prefill form jquery.
2. you can make ajax request whenever user clicks on edit button , pass id or other identifier method return content of modal. (an html form data record, example)

for first way, here's example, though there many approaches this:

$('document').ready(function() {     $('.edit_category').click(function() {         $tr = $(this).closest('tr');         alert("you want edit: category id " + $('.category-id', $tr).text() + " & name: " + $('.category-name', $tr).text());              //you can use info , set inputs javascript: $("edit_category_modal input[type='text']").val($('.category-name', $tr).text()) example;     }); }); 

note: should set class button instead of id because element not going unique page.

here's demo: http://jsfiddle.net/pe6fyj9l/

for second way: you'll need generate content of modal before showing it. since you're using bootstrap framework, dynamically loaded content of modal pretty easy check this answer on so.