show table row to modal bootstrap

Question

I am confused with how to show my table row to bootstrap modal, can anyone help me?

here is my 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 is my 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 to show detail row to modal if i click the edit button in row

do you want to show row content as pre-filled form in modal using jquery only? — Pardeep Dhingra, Jun 03 '15 at 10:21

score 2 · Accepted Answer · edited May 23 '17 at 10:29

There are two ways of achieving this.

You can use the information you have from the table and prefill the form with jQuery.
You can make an ajax request whenever the user clicks on the edit button and pass an id or other identifier to a method which will return the content of the modal. (an HTML form with the data for this record, for example)

For the first way, here's an example, though there are many approaches to this:

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

Note: You should set a class to your button instead of an id because this element is not going to be unique to your page.

Here's a demo: http://jsfiddle.net/pe6fyj9L/

For the second way: You'll need to generate the content of your modal before showing it. Since you're using the bootstrap framework, dynamically loaded content of a modal is pretty easy check this answer on SO.

show table row to modal bootstrap

1 Answers1