Bootstrap Modal 成功 Ajax 调用后未关闭

Question

我在 Ajax 调用中获得成功，但提交后，它并没有隐藏。

我试过了

.hide();

.modal('hide');

这里是

    <div class="modal fade" id="addWorkModal" tabindex="-1" role="dialog" aria-labelledby="addWorkModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addWorkModalLabel">Add Work</h5>
                </div>
                <div class="modal-body">
                    <form id="create-work-form">
                        {% csrf_token %}
                        {{ work_form|crispy }}
                        <div class="form-group">
                            <label for="user-id">User ID:</label>
                            <input type="text" class="form-control" id="user-id" name="user" value="{{ client.user.id }}">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="save-work-button">Save Work</button>
                </div>
            </div>
        </div>
    </div>

<script>
document.getElementById('save-work-button').addEventListener('click', function() {
    var form = document.getElementById('create-work-form');
    var formData = new FormData(form);

    var url = "";
    console.log('URL being requested:', url);

    $.ajax({
        url: url,
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            console.log("AJAX call successful"); // Debugging
            if (response.work) {
                $('#addWorkModal').modal('hide');
            } else {
                // Handle errors from response
                var errorText = 'Error creating work: ' + JSON.stringify(response.errors || 'Unknown error');
                console.error(errorText);  // Log error to the console instead of alerting
            }
        },
        error: function(xhr, status, error) {
            var errorMsg = 'An error occurred. Status: ' + status + '. Error: ' + error;
            if(xhr.responseText) {
                errorMsg += '. Response: ' + xhr.responseText;
            }
            console.error(errorMsg);  // Log error to the console instead of alerting
        }
    });
});

我的问题提交表单后，如何自动关闭或隐藏模式，因为它不会在提交后出现。

Answer 1

尝试更换这个：

$('#addWorkModal').modal('hide');

这样：

document.getElementById('addWorkModal').style.display = 'none';

并告诉我是否有帮助。