【jQuery UI dialog】親画面からの操作で子画面の入力チェック

前提・実現したいこと

showModalDialog()を使用しているwebアプリケーションがあり、
jQuery UI dialogでの改修を行っています。

ダイアログ表示している画面（子画面）では、
①親画面より引数を取得
②検索
③結果を選択し親画面に返す
という流れの処理を行っています。

jQuery UI dialogでの実装は、以下のようにしました。
親画面の「検索」ボタン押下時、iframeを生成
（serialize()で子画面に渡す値を取得し、iframeのsrc属性に設定）
↓
ダイアログ表示（javaで検索処理される）
↓
子画面操作後ダイアログを閉じる
（親画面から子画面の選択ボタン押下時の関数を実行）

ここで、子画面の「選択」ボタン押下時に入力チェックを行い、
正しくなければエラー内容をアラートし、以降の処理はせずもとに戻りたいのですが、子画面で
return;
とするだけではダイアログが閉じられ、元々入力していたデータも消えてしまいます。

親画面からの操作で実現する方法はありますか？

未確認ですが…別の方法として、
親画面からの操作ではなく、子画面で関数実行、子画面からダイアログを閉じる
（参考URL：iframe 内から jQuery UI Dialog を閉じる方法
http://codenote.net/javascript/jquery/5.html）
というのを考えたましたが、
親画面からの操作で実現する方法があればアドバイス頂きたいです。

jQuery初心者でして、なるべく元々のソースをいじらないように改修しています。
スムーズな方法ではないかもしれませんが、
何かわかりましたらご教示のほどよろしくお願いいたします。

該当のソースコード

●dialogTest.js（ダイアログ用script）●

js
1$(function(){
2
3	$("#kensaku").click(function() {
4	
5		//iframeのsrc要素にパラメータを付加したURLを設定
6		var srcStr = "./KENSAKU.do?action="
7
8		//GET パラメータの文字列を作成する
9		var srcParam = $('input[name=code],input[name=comment]').serialize();
10
11		//URLエンコードされているのでsrcParamをURLデコード（省略）
12		srcStr = srcStr + '&' + srcParam;
13
14		//クリック時にiframeを作成
15		$('<iframe />').attr({
16			src : srcStr,
17			name : 'iframe_test',
18			id : 'iframe_test'
19		}).appendTo('#dialog-iframe');
20
21		//ダイアログ表示
22		$( "#dialog-iframe" ).dialog({
23			title: "子画面",
24			modal: true,
25			buttons: {
26				"実行": function (event) {
27
28					//子画面の「実行」ボタン押下時のメソッド
29					document.getElementById("iframe_test").contentWindow.doSentaku();
30					
31					//子画面で入力された値を親画面にセット
32					$("#comment").val($("#iframe_test").contents().find("[name=inputComment]").val());
33
34					//ダイアログを閉じる
35					$(this).dialog("close");
36				},
37				"閉じる": function () { $(this).dialog("close"); }
38			},
39			close: function () { $(this).dialog("destroy").empty(); }
40		});
41	});
42})

●AAA.jsp（呼び出し元親画面）抜粋●

html
1<html:html>
2<head>
3<title>親画面</title>
4<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
5
6<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
7<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
8<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
9
10<!--ダイアログ用script-->
11<script type="text/JavaScript" src="include/dialogTest.js"></script>
12</head>
13
14<body class="">
15<html:form action="/test" method="post">
16
17<!--ダイアログ用div-->
18<div id="dialog-iframe" title="" style='display:none;'></div>
19
20　コード：<html:text property="code" name="oyaForm" styleId="code"/>
21コメント：<html:text property="comment" name="oyaForm" styleId="comment"/>
22
23<!--ダイアログ表示ボタン-->
24<input type="button" id="kensaku" value="検索" />
25
26<!--登録ボタン、戻るボタン等（省略）-->
27</html:form>
28</body>
29</html:html>

●BBB.jsp（子画面）抜粋●

html
1<html>
2<head>
3<title>子画面</title>
4<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
5<script language="JavaScript">
6<!---
7	// 選択ボタンを押した時の処理
8	function doSentaku() {
9
10		// 「コメント」のバイト数を取得する
11		var cnt = cntStr(document.forms[0].comment.value);
12		// バイト数が超えた場合
13		if (cnt > 42) {
14			 メッセージを表示する
15			alert("42バイト以内で入力してください。");
16			return;
17		}
18
19		//・・・・色々な処理
20
21		//親画面に渡す用の値をセット
22		//（別で入力値を加工したりするので、加工後の値を返却用のhiddenにセットしています）
23		document.forms[0].inputComment.value = document.forms[0].comment.value;
24	}
25//--->
26</script>
27</head>
28
29<body class="">
30	<html:form action="/TEST.do" method="post">
31	コメント：
32	<html:text size="50" property="comment" name="koForm" />
33	<input type="hidden" name="inputComment" value="" />
34
35	<!--検索ボタン等（省略）-->
36	<!--元々あった実行ボタン、閉じるボタン
37	<input type="button" value="実行" onClick="javascript:doSentaku();">
38	<input type="button" value="閉じる" onClick="javascript:window.close();">
39	-->
40	</html:form>
41</body>
42</html>

補足情報（FW/ツールのバージョンなど）

JAVA
jQuery
Struts

行動規範の内容に同意します

回答2件

自己解決

子画面の関数内ではなく、ダイアログの"実行"ボタンclick時の関数内で、
return false;
とすれば以降は実行されず、思い通りに動作しました。

投稿2018/02/28 03:47

espresso

総合スコア7

Struts 1.x か・・・前回の解答のこれそのままだ流用でできるんだが

$('#iframe_win').load(function(){
    $("#iframe_win").contents().find("[name=maxSelection]").val("1");
});

この形式を利用して

$("#iframe_win").contents()
// この下のセレクターは作成後のHTMLに合わせてね
                .find("[value=閉じる]") 
                .click();

とすればできるはず

投稿2018/02/25 03:50

退会済みユーザー

総合スコア0

espresso

2018/02/28 03:46

気付くのが遅くなり申し訳ございません＞＜ご回答ありがとうございます。理解が足らず申し訳ないのですが… これは、子画面で「閉じる」ボタン押下時に入力チェックを行うということでしょうか？質問内容に関しては自己解決済みなのですが、よろしければご教示いただけますと幸いです。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！