0

Добрый день.

Пытаюсь реализовать бутстраповское модальное окно. Нарыл код, соответственно окно хочу на свой лад переделать. Но редактировать HTML в строке, жуть как неудобно:

$(document).ready(function() {
$('a[data-confirm]').click(function(ev) {
    var href = $(this).attr('href');
    if (!$('#dataConfirmModal').length) {

        // *** тут создается модальное окно
        $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>');
    } 
    $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
    $('#dataConfirmOK').attr('href', href);
    $('#dataConfirmModal').modal({show:true});
    return false;
});});

Решил создать отдельный класс и им передавать форму:

public static function showModalConfirm() {
    ?>
        <div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true">
            ...
        </div>
    <?php
}

Так:

$('body').append('<?= Template::showModalConfirm() ?>');

Проблема в том, что форма передается со всеми пробелами и переносами. Скрипт работает, только если форму в строку описать. (хотя это уже лучше. хотя-бы синтаксис подсвечивается) Можно, конечно, написать парсер, но похоже это будет "велосипед".

Какова нормальная практика в схожих вопросах?

2
  • Не совсем ясно в чем вопрос? Как не редактировать HTML в JS ? Тогда генерируйте HTML с помощью PHP
    – koks_rs
    2 дек 2016 в 10:44
  • @koks_rs скорее всего подход у меня не правильный. Я хотел в своей IDE редактировать html как html, потом его засунуть в скрипт.
    –  Dmi3ii
    2 дек 2016 в 11:38

2 ответа 2

1

Как вариант

<?php
$content=<<<EOL
 <div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true">
            ...
        </div>
EOL;
echo str_replace(["\n", "\r", "  "], "", $content);
0

Грамотно организовать по схеме MVC - Model - View - Controller, как, собственно, и делается во всех фреймворках. При наступлении события вызывается вьюшка, содержащая в себе форму. Код неважный, но суть должен передать:

//php eventHandler.php
$event = $_GET['event'];
...
$events['getForm'] = function(){
    require_once($_GET['name']);
} //Почему массив? Чтоб можно было повесить другие события, у которых реализуется другая логика
//  , будь то добавление записи в БД, или логаут пользователя
$events[$event]();
//php сама вьюшка, имя которой мы прописываем в запросе ajax, например test.php:
<? //...handling data if needed ?>
<div>
    <form>
        Input something<input type='text'/>
    </form>
</div>



//js
$('#someButton').on('click'function(){
    $.ajax({
        url: 'eventHandler?event=getform&name=FormTemplateName'
    }).done(function(data){
        $(document).append(data.responseText);
    })
})

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.