実装したい機能
・チェックボックスのチェンジイベントにて、モーダルウィンドウを表示したいと考えております。(詳細にはモーダルウィンドウ内にテーブルを表示したい)
不明内容
・他記事を見るとボタンを配置し、クリックイベントでウィンドウを表示していますが、
タイトルにもある通り、チェックボックスフィールドを発火イベントにするにはどのように記述すれば良いのでしょうか。
popModalについても処理内容をあまり理解できていません。
大変恐縮ですがご教示いただけますと幸いです。
(($) => {
'use stirct';
const showDialog = () => {
$('.dialog_content').dialogModal({
topOffset: 0,
top: '10%',
type: '',
onOkBut: function () {},
onCancelBut: function () {},
onLoad: function (el, current) {},
onClose: function () {},
onChange: function (el, current) {}
});
}
const createDialogContent = () => {
const dialog =
$('<div id="dialog_content_1" class="dialog_content" style="display:none;">' +
'<div class="dialogModal_header">a</div>' +
'</div>'
)
};
const events = [
'app.record.create.change.検索_1',
'app.record.edit.change.検索_1'
];
kintone.events.on(events, event => {
createDialogContent();
showDialog();
});
})(jQuery);
発火させる方法は問題ありません。
popModalを表示するdialog_contentを宣言しているもののページ内に描画していないことが原因です。
const createDialogContent = () => {
const dialog =
$('<div id="dialog_content_1" class="dialog_content" style="display:none;">' +
'<div class="dialogModal_header">a</div>' +
'</div>'
)
};
↓
const createDialogContent = () => {
const dialog =
$('<div id="dialog_content_1" class="dialog_content" style="display:none;">' +
'<div class="dialogModal_header">a</div>' +
'</div>'
)
$(kintone.app.record.getHeaderMenuSpaceElement()).append(dialog);
};
mls-hashimoto 様
ご教示いただき誠にありがとうございます。
頂いた内容で動作確認いたしました。
大変恐縮なのですが、もう一点お聞きしたいことがあります。
dialog内にテキストとボタンを置き、ボタンをクリックした際にテキストの値を取得したいと考えております。
以下のように記述しましたが、値が空になってしまいます。
なぜ取得されないのか、ご教示いただけますと幸いです。
(($) => {
'use stirct';
const showDialog = () => {
$('.dialog_content').dialogModal({
topOffset: 0,
top: '10%',
type: '',
onOkBut: function () {},
onCancelBut: function () {},
onLoad: function (el, current) {},
onClose: function () {},
onChange: function (el, current) {}
});
}
const createDialogContent = () => {
const dialog =
$('<div id="dialog_content_1" class="dialog_content" style="display:none;">' +
'<div class="dialogModal_header">' +
'<label>商品名: <input type="text" id="item_name" required></label>' +
'<button id="serch_btn" class="button" type="button">検索</button>' +
'</div>' +
'</div>'
)
$(kintone.app.record.getHeaderMenuSpaceElement()).append(dialog);
};
const events = [
'app.record.create.change.検索_1',
'app.record.edit.change.検索_1'
];
kintone.events.on(events, event => {
createDialogContent();
showDialog();
const button = document.querySelectorAll('.button').forEach(button => {
button.addEventListener('click', () => {
const foo = $('#item_name').val();
console.log(foo);
});
});
});
})(jQuery);
mionix さま
input要素のidが重複してしまうのが原因のようです。
popModalのdialogModalは既存のHTML（この場合、createDialogContentで描画したHTML）をコピーして新しいHTMLを作り、そのHTMLを表示する動作を行うようです。その際にidで指定した要素が重複してできるため、idを指定して要素を取得しようとすると既存のHTMLの方を参照するようです（同じidの要素が複数ある場合、idの取得は最初に描画された要素を取得します）。
入力を促してその値を使う場合、オプションでHTMLを直接書くことができるpopModalでもできますが、SweetAlert2等の方が簡単なのでそちらの利用をおすすめします。
mls-hashimoto様
ご教示頂き誠にありがとうございます。
自分では気づきもしませんでした。
実装したい内容としまして、自作の検索ウィンドウを実装したいと考えております。
ヘッダー部分に検索項目を配置し、ボタンをクリックした際にAPIを走らせ下のbodyに検索結果をテーブル表示するといったイメージです。
そのため、SweetAlertも候補にしておりましたが、機能面でpopModalが適していると考えております。
今回ご教示頂いたIdの重複ですが、綺麗なやり方ではないと思いますが「クラス」に変更し重複するクラス名の内、値が入っているもののみを取得するよう記述したところ、想定する値が取得できました。
(クラスを取得すると3つの内、2番目のみ値が入っていました。なぜ2番目なのか不明です…)
const button = document.querySelectorAll('.button').forEach(function (button) {
button.addEventListener('click', () => {
const foo = document.getElementsByClassName('item_name');
let item_name = '';
for (let i = 0; i < foo.length; i++) {
if (foo.item(i).value) item_name = foo.item(i).value;
}
console.log(item_name);
});
});
mionix さま
クラス名での取得は私も試しましたが、3つあるものは①元のHTML②モーダルウィンドウで表示されている要素③ウィンドウのフェードインアニメーション用の疑似的要素？のようです。問題なくできそうです。
system
(system)
クローズされました:
7
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。