How to make a modal window for each button?

The essence of the thing.

Foritem displays the jobs I have

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

 <div class="row">
 <div class="col-lg-12">
 <h2 class="pageTitle">Jobs</h2>
</div>
</div>
</div>
</section>

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

 <i class="fa "></i><h4>Description</h4>
 <i class="fa "></i><?=$item['text']?>
<br / >
 <i class="fa "></i><h4>Requirements</h4>
 <i class="fa "></i><?=$item['requirements']?>
<br / >
 <i class="fa "></i><h4>Terms</h4>
 <i class="fa "></i><?=$item['—Āonditions']?>



</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">Send response</a>
<?php
\yii\bootstrap\Modal::begin(
[
 'header' =--> '<h2> the application </h2>',
 'id' => 'response',
 'footer' => '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Send</button>'

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


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

</div>
</section>


The functionality described so

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');
}
}
);
 });


The essence of the thing. In a modal window will be a form to fill in ,and these data, again, Ajax will fly to the server.

But roughly speaking I always get the same modal window by clicking any button. Changing only the parameter of the answer comes depending on the click of a button.

From the modal window in Yii there is a header.

So I would like to in the header was the title of the vacancy. Even in cycle modal window is pushed. To create modal Windows by title jobs. But still when clicking on the header gets the same job
June 7th 19 at 15:06
1 answer
June 7th 19 at 15:08
Solution
First, remove the template modal window from the cycle that it would have one copy only left. Secondly it seems like the server was sending JSON, which will separate the body (and dynamic content in modal window) and a separate title jobs. Then the method showCart you will be able to update the title and the body of the window:

function showCart(cart) {
 $('#response .modal-title').html(cart.title);
 $('#response .modal-body').html(cart.body);
$('#response').modal();
 ..........................
I basically do something now. - Lizzie21 commented on June 7th 19 at 15:11
Chet immediately dopetril so to do. But like all works5a97a0e594be3339241737.jpeg - Lizzie21 commented on June 7th 19 at 15:14
Super) - peter.Armstro commented on June 7th 19 at 15:17
I advise you to take it a rule to transfer from the server html not naked, and is always json, so you can easily extend the functionality in the future. For example, add transmission errors from the server when it queries, etc. - peter.Armstro commented on June 7th 19 at 15:20
And I differently did. With servers passed as Json, but only the data itself.

Using JQuery and already sent layout

function showCart(cart)
{
 $('#response .modal-header').html('<h2>' + 'your application for the job -' + cart[1] + '</h2>');
 $('#response .modal-body').html(
 '<form role="form">'+
 '<div class="form-group">'+
 '<label for="email">full name</label>'+
 '<input type="name" class="form-control" id="name" placeholder="Example: Ivanov Ivan Ivanovich">'+
'</div>'+
 '<div class="form-group">'+
 '<label for="pass">Phone</label>'+
 '<input type="name" class="form-control" id="number" placeholder="Example:+375291234567">'+
'</div>'+
 '<div class="form-group">'+
 '<label for="pass">Age</label>'+
 '<input type="number" class="form-control" id="number" placeholder="Example: 26">'+
'</div>'+
 '</form>
'+ '<label for="email">Tell us about yourself</label>'+ '<textarea class="form-control" id="text" placeholder="Experience, place of work, key skills">'+ '</textarea>'+ " ); $('#response').modal(); }
- Lizzie21 commented on June 7th 19 at 15:23

Find more questions by tags Yii