Как заменить confirm на свое модальное окно?

Question

[Dmi3ii]

Добрый день.

Пытаюсь заменить стандартный confirm() на свое модальное окно и не понимаю как их связать. Совсем, вероятно, не могу въехать в замыкания.
Есть post форма, по нажатию кнопки "Согласовать " отображается модальное окно с подтверждением. Если нажали "да" продолжаем работу кнопки submit, иначе останавливаем (return false).

<form method="post">
    <textarea name="comment"></textarea>

    <button class="btn btn-danger" type="submit" name="accept" value="true"
    onclick="return confirm('Продолжить?')">Согласовать (working)</button>
    
    <button class="btn btn-warning" type="submit" name="accept" value="true"
    onclick="showTestConfirm()">Согласовать (broken)</button>
</form>

function showTestConfirm() {
    $('#dataConfirmModal').find('.modal-body').text('Продолжить?');
    $('#dataConfirmModal').modal({show: true});
    $('#dataConfirmOK').click(function () {
        return true; // <-- ошибка
    })
    return false;
}

dataConfirmModal

<div id="dataConfirmModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Подтверждение</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
                <a class="btn btn-primary" id="dataConfirmOK">Принять</a>
            </div>
        </div>
    </div>
</div>

Спасибо за помощь/ссылки.

Comments

[Destell]

А при чем тут стандартный confirm?

[Dmi3ii]

Destell, для примера. Кнопка 1 работает как мне надо, но не красиво. Кнопка 2 лучше, но не работает! )

Answer 1

[Антон Шейкин]

Асинхронные запросы?
https://codepen.io/anon/pen/EGaYYE

Comments

[Dmi3ii]

У меня все проще думаю. Надо исправить onclick="showTestConfirm()", что бы работал как обычный onclick="return confirm('Продолжить?')"

Answer 2

[leni_m]

Вы внутри функции вешаете обработчик события "click", что примерно означает "При клике на элемент с id='dataConfirmOK' возвращать true", что звучит как бесполезный код, потому что это true он не в функцию будет возвращать, а просто вникуда:

$('#dataConfirmOK').click(function () {
        return true; // <-- ошибка
})

Comments

[Dmi3ii]

Да, я это понимаю, что бред и тут ошибка. Не понимаю как из модального окна послать сигнал своей кнопке..

[leni_m]

может так?

<button onlick="$("form").submit();" class="btn btn-primary" id="dataConfirmOK">Принять</button>

[0ffff0]

Dmi3ii,

как из модального окна послать сигнал своей кнопке..

для этого вам нужно выставить флаг, который будет более глобальным что-ли, например это будет window.flag и ваша функция будет ставить ему занчение true

$('#dataConfirmOK').click(function () {

        return true; // <-- ошибка
window.flag = true; //  это видят все в DOMе и ваша прекрасная кнопка тоже
})

[Dmi3ii]

leni_m, тогда я не знаю, как отправить мои атрибуты. По submit я отправляю свои name="accept" value="true", в случае $("form").submit() как их передать?

[leni_m]

Dmi3ii, они и передадутся.
$("form").submit() значит найти все формы на странице и отправить их
Если форм несколько, научитесь давать имена вашим элементам.
и используйте

$("#idФормы").submit() или $(".classФормы").submit();

Answer 3

[ThunderCat]

Скажем так: точного аналога вы не добьетесь, так как стандартные модальные окна встроены в функционал движка браузера, прерывая выполнение скрипта и запоминая во внутреннем стеке точку останова, возвращаясь к выполнению с нее в случае подтверждения пользователем. Из скрипта такое сделать не получится. Можно сделать "костыли", вынести в глобальные переменные некоторые данные и использовать их для продолжения работы скрипта с определенного места(например имя функции выполняемой по подтверждению), но я вижу в этом серьезную кривизну реализации. Нечто подобное реализованно в таком плагине. Если это у вас используется в 1 месте, то проще просто вместо ретурн тру вызвать субмит нужной формы.