How to pass id on button click to bootstrap v3 modal in CouchCMS?

Question

I have a list (displayed in a tabulated format). The list consists of names of various departments.

The same appears as below:

-------------------------------------------------------
Sr. No.      Department Name                Action
-------------------------------------------------------
1            Department A                EDIT | DELETE
2            Department B                EDIT | DELETE
3            Department C                EDIT | DELETE
4            Department D                EDIT | DELETE
5            Department E                EDIT | DELETE
-------------------------------------------------------

Now I am trying to open a single modal when "EDIT" or "DELETE" is clicked. In the modal I want to display the EDIT Form (for the particular Department) or DELETE Form (for the particular Department).

Please Note: I am using CouchCMS so even a custom PHP code can be helpful which can be changed to fit the CouchCMS Purview.

I have generate a clonable template with custom routes using CouchCMS. The tag helps me generate the table (as shown above). Where in the buttons for EDIT and DELETE are also generated. I can easily provide to the button the page id using the of CouchCMS (if that helps).

I am using the native code of bootstrap to popup the Bootstrap v3 modal. Wherein, a single modal opens for every button that is clicked, hence saving me the memory issue that i might run into if I generate as many modals as the rows in the table.

The code for Bootstrap v3 modal that i am referring to is available here.

In CouchCMS we have a edit form (for editing the data queried from the database) where the page_id parameter needs to be set in order to edit that particular data item. I need to set this page_id. But am unable to figure out how to?

Code to generate the Table list:

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>Sr. No.</th>
            <th>Name</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <cms:pages masterpage='department/department.php' limit='10' paginate='1' show_future_entries='1'> 
        <tr>
            <td><cms:show absolute_count /></td>
            <td><cms:show k_page_title /></td>
            <td>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="<cms:show k_page_id />">
                    EDIT
                </button>
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal" data-id="<cms:show k_page_id />">
                    DELETE
                </button>
            </td>
        </tr>
        </cms:pages>
    </tbody>
</table>

Code to open a single modal for every button that is clicked, EDIT or DELETE button:

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var page = button.data('id') // Extract info from data-* attributes
    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
    var modal = $(this)
    modal.find('.modal-title').text('New message to ' + page)
    modal.find('.modal-body input').val(page)
})

Code for the modal is:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">New message</h4>
            </div>
            <div class="modal-body">
                <!-- Edit Form Content Here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button>
                <button type="button" class="btn btn-primary">SAVE</button>
            </div>
        </div>
    </div>
</div>

An edit form in CouchCMS is defined as:

In this form I need to have the page_id=k_page_id set. The k_page_id is available to the button in the table under the data-* (data-id) attribute. If only this data-id could be supplied to the page_id, the rest can be taken forward from there using CouchCMS.

I am also open to the option of using AJAX, if required. But if it is possible without AJAX, it would still be fine.

Any help in this regards will be greatly appreciated. If any clarification or post editing is required or any more inputs are required, I shall do show if someone points out the short coming in my description/code.

Thanks to the community, in advance.

How to pass id on button click to bootstrap v3 modal in CouchCMS?

0 Answers0