Как сделать модальное окно на каждую кнопку?

Question

[Евгений]

Суть в чём.

Форичем выводятся вакансии у меня

Вид

<section id="inner-headline">
    <div class="container">

        <div class="row">
            <div class="col-lg-12">
                <h2 class="pageTitle">Вакансии</h2>
            </div>
        </div>
    </div>
</section>

<section id="content">
<div class="container">
    <?php foreach ($vac as $item) :?>
    <div class="panel">
        <div class="panel-heading">
            <h4 class="panel-title">
                    <i class="fa "></i><h3><?=$item['name']?></h3>

                    <i class="fa "></i><h4>Описание</h4>
                    <i class="fa "></i><?=$item['text']?>
                    <br>
                    <i class="fa "></i><h4>Требования</h4>
                    <i class="fa "></i><?=$item['requirements']?>
                    <br>
                    <i class="fa "></i><h4>Условия</h4>
                    <i class="fa "></i><?=$item['сonditions']?>

            </h4>

        </div>
        <a href="<?= \yii\helpers\Url::to(['vacancies/response', 'id' =>$item['id']])?>" type="button" data-id="<?=$item['id']?>" class="btn btn-success btn-default btnbaton" id="btnbaton">Отправить отклик</a>
        <?php
        \yii\bootstrap\Modal::begin(
            [
                'header' => '<h2> Отклик на вакансию </h2>',
                'id' => 'response',
                'footer' => '<button type = "button" class = "btn btn-default" data-dismiss = "modal">Закрыть</button>
<button type = "button" class = "btn btn-success">Отправить</button>'

            ]
        );
        \yii\bootstrap\Modal::end();


        ?>
    </div>
    <?php endforeach; ?>

</div>
</section>

Функционал описан так

function showCart(cart)
	{
		$('#response .modal-body').html(cart);
		$('#response').modal();
		
    }

    $('.btnbaton').on('click', function (e)
    {
        e.preventDefault();
        var id = $(this).data('id');

        $.ajax(
            {
                url:'index.php?r=vacancies/response',
                data: {id:id},
                type: 'GET',
                success: function (res) {
                    showCart(res);
                },
                error: function () {
                    alert('Error');
                }
            }
        );
    });

Суть в чём. В модальном окне будем форма для заполнения ,а эти данные опять аяксом полетят на сервер.

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

У модального окна в Yii есть хедер.

Так вот я хотел чтобы в хедере было название вакансии. Даже в цикл модальное окно запихнул. Чтобы оно создало модальные окна по названию вакансии. Но всё равно при клике в хедер попадает одна и та же вакансия

Answer 1

[Евгений Калибров]

Во-первых, уберите в шаблоне модальное окно из цикла, что бы оно в одном экземпляре только оставалось. Во-вторых сделайте, что бы сервер присылал JSON, в котором отдельно будет тело (динамическое содержимое модального окна) и отдельно заголовок вакансии. Тогда в методе showCart вы сможете обновлять и заголовок и тело окна:

function showCart(cart) {
    $('#response .modal-title').html(cart.title);
    $('#response .modal-body').html(cart.body);
    $('#response').modal();
    ..........................

Comments

[Евгений]

Я в принципе нечто сейчас вот делаю.

[Евгений]

Чёт не сразу допетрил , что так нужно делать. Но вроде всё работает

[Евгений Калибров]

Евгений Супер)

[Евгений Калибров]

Советую взять за правило передавать с сервера не голый html, а всегда json, таким образом вы сможете легче расширять функционал в будущем. Например добавите передачу ошибок с сервера при запросах и т.п.

[Евгений]

Евгений Калибров, А я по другому сделал. С сервера передавал Json, но только сами данные.

А уже используя JQuery отправлял вёрстку

function showCart(cart)
	{
        $('#response .modal-header').html('<h2>' + 'Отклик на вакансию - ' + cart[1] + '</h2>');
		$('#response .modal-body').html(
        '<form role="form">'+
        '<div class="form-group">'+
        '<label for="email">Ф.И.О</label>'+
        '<input type="name" class="form-control" id="name" placeholder="Например: Иванов Иван Иванович">'+
        '</div>'+
        '<div class="form-group">'+
        '<label for="pass">Телефон</label>'+
        '<input type="name" class="form-control" id="number" placeholder="Например:[phone]">'+
        '</div>'+
        '<div class="form-group">'+
        '<label for="pass">Возраст</label>'+
        '<input type="number" class="form-control" id="number" placeholder="Например: 26">'+
        '</div>'+
		'<div class="form-group">'+
		'<label for="email">Расскажите о себе</label>'+
        '<textarea  class="form-control" id="text" placeholder="Опыт работы, место работы, ключевые навыки">'+
		'</textarea>'+

        '</form>'
		);
		$('#response').modal();
		
    }