環境
PHP 7.2.21
CakePHP 2.10.18
MySQL 5.7.27
やりたいこと
Form内容を入力後にRemodalを表示させ、その「OK」ボタン押下をsubmitボタンとしたい
やったこと
兎にも角にも公式ページよりダウンロード
https://github.com/VodkaBears/Remodal/releases
↓
distディレクトリにある4ファイルをすべて所定のディレクトリに配置する
remodal.min.jsが欠けているとオプションが無効になり
cssが欠けていると当然デザインが壊れる
Hoge.ctp
<!--jsとcssを読み込む-->
<script type="text/javascript" src="/js/vendor/1.1.1/remodal.js"></script>
<script type="text/javascript" src="/js/vendor/1.1.1/remodal.min.js"></script>
<link rel="stylesheet" type="text/css" href="/js/vendor/1.1.1/css/remodal.css">
<link rel="stylesheet" type="text/css" href="/js/vendor/1.1.1/css/remodal-default-theme.css">
<!-- Remodalの「OK」ボタンが押された後にForm内容を送信させる -->
<script>
$(function($) {
$(document).on('confirmation', '.remodal', function () {
$('#HogeHogeConfForm').submit();
});
});
</script>
<!-- Remodalの表示内容 -->
<div class="remodal" data-remodal-id="setting-caution-modal">
<h1>Hoge設定の保存</h1>
<div style="text-align: left">
<p>
<div id="setting-caution-modal-message">この内容にて保存してもよろしいですか?</div>
</p>
</div>
<div style="text-align: center">
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
<button data-remodal-action="cancel" class="remodal-cancel">キャンセル</button>
</div>
</div>
<!-- Formのcreate() -->
<?php
echo $this->Form->create('HogeHogeConf', [
'url' => '/hoge/hoge_hoge/conf',
'inputDefaults' => [
'label' => false,
'div' => false,
],
]);
?>
<!-- Form入力欄を色々と用意 -->
<!-- ... -->
<!-- ... -->
<!-- ... -->
<!-- クリックでRemodalを表示させるボタン -->
<?php
$setingButton = '<button onclick="location.href=\'#setting-caution-modal\';return false;">保存</button>';
echo $setingButton;
?>
<!-- Formのend() -->
<?= $this->Form->end(); ?>
結果
Remodalを呼び出しOK押下後にForm内容をsubmitすることができる
buttonの表示もCakePHPのFormHelperでやるべきだが思いつかなかった