CODEWITHSUNDEEP
javascriptjqueryhtmlspring-bootthymeleaf
Neewbie
Neewbie

Reputation: 69

Thymeleaf attribute and modal

Edited: Just figured out that i need JS. Plase, help me with this. I have a th:attr="data-object-id=${department.id}" who store Department id, which i need to put in the modal in the <input id="ids" name="ids" type="text" class="validate">.

How will JS or JQuery looks like? I am trying to write, but all time null or undefined. 

<tr th:each="department : ${departments}">
        <td class="dep_id" th:text="${department.id}">1</td>
        <td th:text="${department.name}"></td>
        <td>
            <div class="dep_edit">
                <a class="settings_dep" th:href="@{'/departments/' + ${department.id} + '/'}"><i class="material-icons">settings</i></a>
                <a class="edit_dep modal-trigger" href="#modal3" th:attr="data-object-id=${department.id}"><i
                        class="material-icons">edit</i></a>
                <form method="post" th:action="@{'/departments/' + ${department.id} + '/delete'}" class="inline">
                    <button type="submit" value="" class="link-button delete_dep">
                        <i class="material-icons">delete</i>
                    </button>
                </form>
            </div>
        </td>
    </tr>


<div id="modal3" class="modal modal-departments">
        <div class="modal-dep modal-content">
            <h4>Update Department</h4>
            <a href="#" class="dep-modal-close modal-close"><i
                    class="material-icons icon_close">close</i></a>
            <p>Update Department name</p>
        </div>
        <div class="dep-modal">
            <form id="dep-update" class="col s12" th:action="@{'/departments/update'}" method="POST">
                <div class="row-modal-dep">
                    <div class="input-field col s6">
                        <input id="depName" name="name" type="text" class="validate">
                        <input id="ids" name="ids" type="text" class="validate">
                        <label for="name">Department Name</label>
                        <i class="edit-dep-marker material-icons prefix">mode_edit</i>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <input class="modal-close waves-green green btn-dep btn" type="submit" form="dep-update">
            </div>
        </div>
    </div>

I need to give ID value of department to MODAL, so i can update it

enter image description here

My Departments class is easy. Only ID and name;

Upvotes: 0

Views: 3019

Answers (3)

Sumit
Sumit

Reputation: 957

The 2 tricks to achieve the same (PS - I'm not a Frontend expert):-

1.) Is to create a hidden html-element on your html page & set the value and then get the value of that element using jquery on your modal.

2.) create a function on that html-element and pass the dynamic value to it and then implement your modal hide/show code inside that function, something like this :- -

<a class="edit_dep modal-trigger" th:onclick="'javascript:showFunctionModal(\'' + ${department.id} +'\');'"><i
                        class="material-icons">edit</i></a>

and your function would be something like this :- 

function showFunctionModal(id) {
        //logic to hide & show function
        }

Upvotes: 1

Neewbie
Neewbie

Reputation: 69

Problem solved. Huge thanks @Sumit.

th:onclick="'javascript:showFunctionModal(\'' + ${department.id} +'\');'"> on the field which id i want to fetch and then in ready modal function set id.

function showFunctionModal(id) {
        $(document).ready(function () {
            $('.modal3').modal();
            $("#ids").val(id);
        });

Upvotes: 0

MohamedSanaulla
MohamedSanaulla

Reputation: 6242

You can listen to the show.bs.modal event and capture the department id as shown below:

$('#modal3').on('shown.bs.modal', function (e) {
   var target = e.relatedTarget;
   var departmentId = $(target).data('object-id');
   $("#ids").val(departmentId);
});

Upvotes: 0

Related Questions