Problems updating bootstrap 4 model

Question

I'm developing an app in Spring Boot with JSP in frontend. I have the following problem:

I have a table with different rows. I can click a button to update every row if I want. When I click in one row and change some data all works fine. The problem is when I click in one row, close or save this modal and following I open another row and edit again. The modal is good but when I save, I receive 2 POST to update the row behind and the actually row.

I don't use nothing strange... Probably I need to "clean" the modal when I close or save?

One of my modals (this happends in all table with modal to update the row)

Html/JSP:

<!-- UPDATE DISP MODAL -->
<div id="updateDispModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="updateDispForm" class="needs-validation">
                <div class="modal-header">
                    <div class="modal-title">
                        <h5 id="modalTitle">
                            <spring:message code="shares.displacement.update.btn" />
                        </h5>
                    </div>
                </div>
                <div class="modal-body">        
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                            <div class="form-group">
                                <label for="activityCenter" class="col-form-label"><spring:message code="shares.displacement.table.activity.center" /></label>
                                <select id="activityCenter" name="activityCenter" class="form-control" required>
                                    <option disabled selected="selected">
                                        <spring:message code="shares.displacement.table.activity.center" />
                                    </option>
                                    <c:forEach items="${teamLeaders}" var="teamLeader">
                                        <option value="${teamLeader.userId}">
                                            <spring:message code="${teamLeader.name} ${teamLeader.surnames}" />
                                        </option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-6">
                            <div class="form-group">
                                <label for="displacementDate" class="col-form-label"><spring:message code="shares.displacement.table.total.time" /></label>
                                <input id="displacementDate" name="displacementDate" type="datetime-local" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-sm-12 col-md-6">
                            <label for="manualHours" class="col-form-label"><spring:message code="shares.displacement.total.time" /></label>
                            <input type="time" class="form-control" id="manualHours" name="manualHours">
                        </div>
                        
                        <div class="col-sm-12 col-md-6">
                            <label for="roundTrip" class="col-form-label"><spring:message code="shares.displacement.round.trip" /></label>
                            <input type="checkbox" class="form-control" id="roundTrip" name="roundTrip" style="width: 20px">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="observations" class="col-form-label"><spring:message code="shares.displacement.observations" /></label>
                                <textarea id="observations" name="observations" class="form-control" rows="6"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <input type="hidden" class="form-control" id="projectId" name="projectId">
                </div>
                <div class="modal-footer clearfix">
                    <div class="w-100">
                        <div class="float-left">
                            <button type="button" class="btn btn-sm" data-dismiss="modal"><spring:message code="cerrar" /></button>
                        </div>
                        <div class="float-right">
                            <button id="updateDispBtn" type="button" class="btn btn-sm btn-success"><spring:message code="save" /></button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- /CREATE MODAL -->

JavaScript:

$('#updateDispBtn').click(function () {
            
            $.ajax({
                type: "PUT",
                url: "/shares/displacement/" + id,
                data: $('#updateDispForm').serialize(),
                success: function(msg) {
                    $('#dTableSignings').DataTable().ajax.reload();
                    showNotify(msg, 'success');
                },
                error: function(e) {
                    showNotify(e.responseText, 'danger');
                }
            });

            $('#updateDispModal').modal('hide');
        });

Hi what do you mean by a row behind ? Also what is `id` here in your url ? — Swati, Oct 27 '20 at 13:00
I open first row with ID 1 and click save. The row is updated. Secondly, I open the row with ID 3, modify params and click to save too. So I receive to the backend 2 petitions with same FormData (updating ID 1 and ID 3). https://imgur.com/9ShoxjQ — Carlos Devesa, Oct 27 '20 at 13:05
I use async function to load the info in the modal (https://imgur.com/tNqx29N). Every row button have one event (onclick) and it's load on DataTable load event (https://imgur.com/1YYKsNp) — Carlos Devesa, Oct 27 '20 at 13:11
Can you put console inside your click event and see how many time it gets called when you click on update button.Also is it neccessary to put click event inside aysnc function ? — Swati, Oct 27 '20 at 13:22
I think is a html problem. I have other windows without async function and is the same problem. Probably, Bootstrap have something like clean() function to dont duplicate the modal... ?? — Carlos Devesa, Oct 27 '20 at 13:50
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/223703/discussion-between-swati-and-carlos-devesa). — Swati, Oct 27 '20 at 14:37

score 0 · Accepted Answer · answered Oct 27 '20 at 15:26

0

Finally, the user Swati help me to solve this problem. I need to unbind the button before clicking event: button onclick function firing twice

Thanks!

answered Oct 27 '20 at 15:26

Carlos Devesa

87
6

Problems updating bootstrap 4 model

1 Answers1