laravelを使ってシフト表を作成しています。
jquery uiを使ってダイアログボックスを表示したいのですが<div id="MyDialog_ID">を正しく読み取ってくれず
ダイアログボックスが開きません。
やりたいことは出勤ボタンを押したらダイアログボックスが開いて
出勤と休日設定を選択することです。
shift.blade.php
1<!DOCTYPE html> 2<meta charset="UTF-8"> 3<head> 4<title>shift</title> 5<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 6<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 7<script type="text/javascript" src="js/shift.js"></script> 8</head> 9<doby> 10 <table border="1"> 11 <tr> 12 @php 13 $now_year = date("Y"); //現在の年を取得 14 $now_month = date("n"); //現在の月を取得 15 $now_day = date("j"); //現在の日を取得 16 $countdate = date("t"); //今月の日数を取得 17 $weekday = array("日","月","火","水","木","金","土"); //曜日の配列作成 18 19 //見出し部分出力 20 echo "<div>".$now_year.'年'.$now_month."月</div>\n"; 21 22 //一覧表示 23 for( $day=1; $day <= $countdate; $day++ ){ //今月の日数分ループする 24 25 //各日付の曜日を数値で取得 26 //曜日用の配列$weekdayを使い、$weekday[$w]で日本語の曜日が取得できる 27 $w = date("w", mktime( 0, 0, 0, $now_month, $day, $now_year ) ); 28 29 //スタイルシートの値設定ここから----------------------------------- 30 31 switch( $w ){ 32 case 0: //日曜日の文字色 33 $style = "color:#C30;"; 34 break; 35 case 6: //土曜日の文字色 36 $style = "color:#03C;"; 37 break; 38 default: //月~金曜日の文字色 39 $style = "color:#333;"; 40 } 41 42 if( $day == $now_day ){ 43 $style = $style." background:silver"; //今日の背景色 44 } 45 //スタイルシートの値設定ここまで----------------------------------- 46 47 $line = $day."日(".$weekday[$w].")"; //1行の定義:日付(曜日) 48 49 //スタイルシートを挿入・1行ごとに改行して出力 50 echo '<td style="'.$style.'">'.$line."</td>\n"; 51 } 52 53 @endphp 54 </tr> 55 <tr> 56 57 @php 58 for( $day=1; $day <= $countdate; $day++ ){ 59 $line = $day."日(".$weekday[$w].")"; 60 echo '<div id="MyDialog_ID"><td>'.$line 61 @endphp 62 63 <label> 64 <input type="radio" name="shift" value="出勤" checked>出勤</label> 65 <select name="time"> 66 <option value="全日">全日</option> 67 <option value="朝活">朝活</option> 68 <option value="朝勤">朝勤</option> 69 <option value="予定あり">予定あり</option> 70 </select> 71 72 <label> 73 <input type="radio" name="shift" value="休日" >休日</label> 74 <input type="text"> 75 <input type="text"> 76 77 </div> 78 <button id="buttonDialogOpen_ID">出勤</button> 79 80 @php 81 "</td>\n"; 82 } 83 @endphp 84 85 86</tr> 87</table> 88</body> 89</html> 90
shift.js
1//ボタンクリックでダイアログを開く 2 $('#buttonDialogOpen_ID').on('click', function () { 3 $('#MyDialog_ID') 4 .dialog({ 5 title: 'shift' 6 }) 7 .dialog('open'); 8 }); 9 10 11 $(function () { 12 //ダイアログを定義する 13 $('#MyDialog_ID').dialog({ 14 autoOpen: false, 15 //autoOpen: true, 16 width: 'auto',// 600, 17 height: 'auto',//290, 18 minHeight: 300, 19 minWidth: 390, 20 title: 'ダイアログのタイトル初期値', 21 buttons: { 22 送信: function () { 23 $(this).dialog('close'); 24 }, 25 Cancel: function () { 26 $(this).dialog('close'); 27 }, 28 }, 29 }); 30 31 32 }); 33 34
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/26 07:11
2019/03/26 07:34
2019/03/26 07:38