How to pass parameters to a modal using thymeleaf?

user_787552 0
Viewed 16422

I just starting in a project where we're using thymeleaf and I'm new to the technology. It's a simple modal to confirm an object to be deleted. So they want me to add the name of the item we're deleting on the message instead of a generic message like: "Are you sure you want to delete?" They want: "Are you you want to delete Item_Name?" So I need to pass this name as parameter.

That's the code I have the display the modal:

<button id="btnDelete" value="delete" type="button" class="btn-link" data-toggle="modal" data-object-id="12345" data-object-name="NNN" th:attr="data-object-id=''+${assignment.assignmentId}+'', data-object-name='/nonInstructionalWorkload/deleteAssignment?asssignmentId='+${assignment.assignmentId}+'', data-target='#deleteAssignmentModal'">

And that's the code I have on the modal html:

<form role="form" th:action="@{/deleteAssignment}"
      name="assignmentDeleteForm" id="assignmentDeleteForm" method="post">

    <div class="modal-header">
        <h4 class="modal-title" id="deleteWorkItemabel">Confirm Assignment Delete</h4>
    </div>

    <div class="modal-body">
        <div class="form-group">
            <p>Assignment will be deleted, are you sure you want to proceed?</p>
            <input type="hidden" id="deleteId" name="deleteId" value="nnnn"/>
        </div>
    </div>

    <div class="modal-footer">
        <button type="submit" id="btnDelConfirm" class="btn btn-primary">
            Yes
        </button>
        <button type="button" id="btnDelCancel" class="btn btn-default" data-dismiss="modal">
            No
        </button>
    </div>
</form>

At this point is where I need to add more information on the confirmation message about the assignment item being deleted.

Already tried some approached to get the parameters but didn't work so I'm looking for more option.

Thank you!

thymeleaf grails html
2 Answers

The sample project on GitHub you can clone and test it. Full video under the readme.

https://github.com/ibrahimkarayel/todoBoot/blob/master/src/main/resources/templates/home.html

<div class="modal modal-delete" th:id="modal-delete+${task.id }">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h3 id="delModalLabel">Delete Confirmation</h3>
            </div>
            <div class="modal-body">
                <p class="error-text"><strong>Are you sure you want to
                    delete this task ?</strong></p>
            </div>
            <div class="modal-footer">
                <button class="btn " data-dismiss="modal" aria-hidden="true">
                    Cancel
                </button>
                <a th:href="@{/task/delete/{id}(id=${task.id})}">
                    <span class="btn btn-danger" value="delete">Delete</span></a>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!--end delete modal-->

<script>
    $('#modal-delete').on('show.bs.modal', function (e) {
        $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
        $('#modal-deleteHiddenId').val($(this).find('.btn-ok').attr('href'));
    });
</script>
user_75188490
Related