Хочу реализовать панель с кнопками-переключателями, которые будут менять внешний вид в зависимости от своего data-атрибута, т.е.
<div id="work-1" class="btn btn-default btn-sm day-work" data-flag="1"> Дневная </div>
<div id="work-1" class="btn btn-success btn-sm day-work" data-flag="2"> Ночная </div>
Сейчас на кнопке висит скрипт, который отправляет на сервер data-атрибут. В контроллере апдейтится поле в зависимости от пришедшего параметра и отправляется ответ с новым data-аттрибутом кнопки.
<script>
$(".day-work").on("click", function (){
var dataFromButton = $(this).data("flag");
var workerLocalId = $(".worker-local-id").data("worker-local-id");
var periodId = $(".period-id").data("period-id");
var dayMonth = $(this).parents(".panel-body").prev(".panel.panel-heading").data("day-month");
$.ajax({
url: '/worker/update-day-work',
type: 'POST',
data: {
workerLocalId : workerLocalId,
periodId : periodId,
dayMonth : dayMonth,
flag : dataFromButton
},
success: function (data, textStatus, jqXHR) {
alert("Прибыли данные!" + data);
}
})
});
</script>
Панель с кнопками пока выглядит так.
<div class ="col-lg-2">
<div class="panel panel-default">
<div class="panel panel-heading text-center" data-day-month=<?= $workDate ?>> <b> <?= date("d", strtotime($day["workDate"])) ?> </b> </div>
<div class="panel panel-body">
<div class ="row">
<div class ="col-sm-4 center-block">
<div id="<?= 'work-' . $i ?>" class = "btn btn-<?= $buttonType ?> btn-sm day-work" data-flag=<?= $day["workShiftId"] ?>> <?= $buttonTitle ?> </div>
</div>
<div class ="col-sm-4 center-block">
<div class = "btn btn-default btn-sm day-repair" data-flag=1>Ремонт</div>
</div>
<div class ="col-sm-4 center-block">
<div class = "btn btn-default btn-sm day-leave" data-flag=1>Отпуск</div>
</div>
</div>
</div>
</div>
</div>
Вопрос в том, что мне отправить в ответе сервера? HTML собранной кнопки, параметры для сбора кнопки на клиенте? И как потом повесить на эту вновь полученную кнопку скрипт на событие?