@Dbtzhv

Django-templates + JS: что не так с кнопкой закрытия попапа?

Не работает кнопка закрытия попапа, в котором можно изменить статы героя. Я во фронте 0, не могу понять, в чём проблема.

<!-- МОДАЛЬНОЕ ОКНО ДЛЯ НАСТРОЙКИ ПОЛЬЗОВАТЕЛЯ -->
<div class="modal fade" id="playerDataEditModal" tabindex="-1" role="dialog" aria-labelledby="playerDataEditModalLabel"
    aria-hidden="true">
    <div class="modal-dialog  modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="playerDataEditModalLabel">Контроль уровня и мощности для <span class='name'></span></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <h3 class="my-3"><i class="fa fa-bolt" aria-hidden="true"></i> <span class='total'>16</span></h3>
                <div class="row my-3">
                    <div class="col-6">
                        <div class="qty player">
                            <h6>Уровень</h6>
                            <span class="decrease-level minus bg-dark player-data-edit">-</span>
                            <input type="number" class="count level" name="qty" value="1">
                            <span class="increase-level plus bg-dark player-data-edit">+</span>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="qty player">
                            <h6>Мощность</h6>
                            <span class="decrease-power minus bg-dark player-data-edit">-</span>
                            <input type="number" class="count power" name="qty" value="0">
                            <span class="increase-power plus bg-dark player-data-edit">+</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock body %}

{% block scripts %}
<script>
    const changeRoomPlayer_URL = "{% url 'ajax_changeRoomPlayer' %}";
    const csrf_token = "{{ csrf_token }}";
    function sendData(obj_dict) {
        playerAttributesSocket.send(JSON.stringify(obj_dict));
}
</script>

<script src="{% static 'room/js/playerDataUpdate.js' %}"></script>
<script src="{% static 'room/js/playerGenderChangingAjax.js' %}"></script>
{% endblock %}


// Закрытие модального окна и обновление значений на странице
    $("#playerDataEditModal").on("hide.bs.modal", function () {
        var $player = $('.player.active');
        var $modal = $('#playerDataEditModal');
        
        var obj = new Object();
        obj.player = $modal.find('.name').attr('player');
        obj.level = $modal.find('.level').val();
        obj.power  = $modal.find('.power').val();
        obj.total = $modal.find('.total').text();
        obj.user_room = $modal.find('.total').text()
        
        $player.removeClass("active");
        $player.find('.level').text(obj.level);
        $player.find('.power').text(obj.power);
        $player.find('.total').text(obj.total);

        sendData(obj);
    });
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
@holllop
Ну смотри на первый взгляд код, связанный с кнопкой закрытия попапа, выглядит правильным. Он использует событие hide.bs.modal, которое срабатывает при закрытии модального окна, и выполняет необходимые действия, чтобы обновить значения на странице.
Но, скорее всего проблема может быть связана с другим кодом, например, с обработчиками кликов на кнопку или с CSS стилями для модального окна. (да знаю звучит глупо, но проверь).
Уточни, как именно не работает кнопка закрытия попапа. Не происходит ли событие клика на кнопку вообще, или есть ли какая-то другая ошибка или неправильное поведение?
Также полезно будет увидеть остальной JS код, который связан с попапом, чтобы понять, может быть, есть какие-то конфликты или проблемы в других частях кода.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы