お世話になっております。
popmodalでテーブル上のボタンをクリックした際に
ウィンドウ表示させようとしております。
こちらのページを参考に作成いたしました。
ボタンをクリックすると、下記のエラーが発生してしまいます。
popModal.min.js:27 Uncaught TypeError: Cannot read properties of undefined (reading 'innerHTML')
at n.fn.init.init (popModal.min.js:27:15)
at n.fn.init.a.fn.dialogModal (popModal.min.js:29:421)
at HTMLButtonElement.showDialog (download.do?app=376&contentId=15388&jsType=DESKTOP&hash=756d913cde69a7827cf22a127964c5dfe8b23cbe:18:30)
at HTMLButtonElement.dispatch (jquery.min.js:3:7537)
at HTMLButtonElement.r.handle (jquery.min.js:3:5620)
原因をご教授いただければ幸いです。
// 他店舗在庫情報のボタン作成
kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
//ボタンを置きたいフィールドの情報を取ってくる
const sp = document.getElementsByClassName("field-5525828");
// 入力欄非表示
const hide1 = document.getElementsByClassName("input-text-outer-cybozu");
const hide2 = document.getElementsByClassName("value-5525828");
hide1[16].style.display = "none";
hide2[0].style.display = "none";
//ボタンを作る
const btn = document.createElement("button");
btn.textContent = "開く";
sp[0].appendChild(btn);
btn.setAttribute("id", "zaikoBtn");
//モーダルの内容
//ダイアログを表示する関数を作成
var showDialog = function () {
$('.dialog_content').dialogModal({
topOffset: 0,
top: '10%',
type: '',
onOkBut: function () { },
onCancelBut: function () { },
onLoad: function (el, current) { },
onClose: function () { },
onChange: function (el, current) { }
});
};
//ダイアログと表示内容を用意
var createDialogContent = function () {
var dialog_1 =
$('<div id="dialog_content_1" class="dialog_content" style="display:none;">' +
'<div class="dialogModal_header">社員用ノートPCの申請</div>' +
'<div class="dialogModal_content">' +
'ノートPCの交換・追加が必要な方はこのアプリで申請してください。</br>' +
'標準機種をご要望の場合、' +
'標準機種一覧から選んでください。</br>' +
'標準機種情報の詳細は次の通りです。</br>' +
'<table border="1px">' +
'<tr><td>タイプ</td><td>Panasonic（レッツノート）</td><td>Fujitsu（ライフブック）</td></tr>' +
'<tr><td>サイズ</td><td> 12.1 inch</td><td> 12.5 inch</td></tr>' +
'<tr><td>OS</td><td>Windows 10 Pro</td><td>Windows 10 Pro</td></tr>' +
'<tr><td>メモリ</td><td>8 GiB</td><td>8 GiB</td></tr>' +
'<tr><td>ストレージ</td><td>256 GB SSD</td><td>256 GB SSD</td></tr>' +
'<tr><td>CPU</td><td> Core i5 6200U 2コア</td><td> Core i5 6200U 2コア</td></tr></table></br>' +
'標準機以外を申請した場合、ご希望の機種やスペックなどを詳しく書いたうえ、次の注意点をご確認ください。</br>' +
'<ul><li>故障した場合、代替機が素早きに手配できません。</li>' +
'<li>標準機では検証されているソフトウェアが動かないかもしれません。</li></ul>' +
'また、２台以上または標準機能以外をご希望の場合、上長の承認が必要となります。</br></br>' +
'パートナーや契約社員の場合、ノートPCを最大１台のみ申請できます。</br>' +
'尚、社内でのご利用のみ、社外へ持ち出しを禁止しております。</br></br>' +
'社外の方に貸し出す場合、次のページをご確認ください。</br>' +
'ノートPC利用際の注意事項についてページ3をご確認ください。' +
'</div>' +
'<div class="dialogModal_footer">' +
'<button class="btn btn-primary" data-dialogmodal-but="next" type="button">Next</button>' +
'<button class="btn btn-default" data-dialogmodal-but="cancel" type="button">Cancel</button>' +
'</div>' +
'</div>');
$("#zaikoBtn").append(dialog_1);
};
var zaikoBtn = $("#zaikoBtn");
//マウスをボタンに当てるときのボタン色を指定
zaikoBtn.hover(function () {
$(this).css({ 'color': '#ececec', 'background': '#3498db' });
}, function () {
$(this).css({ 'color': '', 'background': '' });
});
//ボタンをクリックしたときの動作
zaikoBtn.on('click', showDialog);
return event;
});