ajaxでダイヤログ内処理の戻り値を返す

Question

いつもお世話になっております。
intramartというフレームワークでの開発で、マスタファイル検索のダイヤログを呼び出して、検索した結果を受け取る、というアプリを作ろうとしています。

ajaxを使ってダイヤログを呼び出すところまではできたのですが、その値を返す時の値のセットのしかたが判りません。
フレームワーク独自のAPIを使っているものの、考え方は普通のajaxでパラメタを渡してダイヤログを呼び出すという点は、通常のjQueryを使って行うのと同じだとは思うのですが、ドキュメントを見ても普通にajaxで行えばと言わんばかりになのか、そこまでは言及されていません。

また、表示したダイヤログも親画面からはボタンがコントロールできるので閉じることは出来ているのですが、閉じるというイベントしか公開されていないため、子画面で閉じようとしているのですが、うまくいきません。

ネットで検索するものの、ここ数日行き詰っており、識者の方のアドバイスをいただければと思い、投稿した次第です。
何らかヒントでも頂ければ幸いです。よろしくお願いします。

<!--   呼び出し元   -->
<script type="text/javascript">
	$(function() {
		$('#searchIcon').on('click', function() {
		//ボタンを表示する例
			$('<div id="detail_dialog"></div>').appendTo(document.body).imuiPageDialog({
				title: '得意先検索',
				url: 'app/tk_select',
				parameter: {
					'imui-theme-builder-module': 'notheme'
				},
				position: [300, 200],
				modal: true,
				height: 450,
				width: 465,
				buttons: [
				{
					'id': 'okbutton',
					'text': 'OK',
				},
				{
					'text': 'キャンセル',
					'click': function() {$(this).imuiPageDialog('close'); }
				}
				],
				close : function (event){
					$('#detail_dialog').remove();
				<!-- ここまでは正常に動作 -->
					if (pageDialog.trigger) {
						// ダイアログで操作記録が取られた場合のみ実行
						$('#tkcd').val(pageDialog.data.ctktkcd);
						$('#tknm').val(pageDialog.data.ctrtrnm);
						// 操作記録をクリア
						pageDialog.trigger = '';
					}

				},
					//エラーが発生したときに、ボタン表示領域を非表示にする
					buttonsStateOnError: 'hide'
			});

		});
   });
</script>

<!--   呼び出し先   -->
<script type="text/javascript">
function Link_url(a, b) {
	var sel_list = $('#ctktbl').getGridParam('data');
	alert(sel_list[a - 1]["ctrtrnm"]);      // この値までは正常に取得
	// ???? この先がよく判りません ????
	var res = new Object();
	res.tkcd = sel_list[a - 1]["ctktkcd"];    // 返したい値
	res.tknm = sel_list[a - 1]["ctrtrnm"];    // 返したい値
	// クライアントにデータを返却
	var jsonString = ImJson.toJSONString(res);
	var response = Web.getHTTPResponse();
	res.setContentType("application/json; charset=UTF-8");
	res.sendMessageBodyString(jsonString);
	// ウィンドウをクローズ
	window.close();
}
</script>
<imart type="imuiListTable" data=DBList id="ctktbl" multiSelect="false" width="440" height="450" >
	<cols>
		<col name="ctktkcd" caption="コード" width="100">
			<callFunction name="Link_url" />
		</col>
		<col name="ctrtrnm" caption="得意先名" width="340" />
	</cols>
</imart>

Answer 1

えーと元が長いので抜粋されたのでしょう
必要な情報が消えてますね
その為推測混じりのお話になります
まず

マスタファイル検索のダイヤログ

一応書いておきますが
× ダイヤログ
○ ダイアログ

これは画面の中に重なるように子画面が表示されていますよね(モーダル画面)
これは親画面のボタン？を押下すると

<div id="detail_dialog"></div>のタグにjQueryのimuiPageDialog機能でタグを追加する事で 検索のダイヤログを表示させています。 子画面終了の際は<div id="detail_dialog"></div>の中身を削除しています。

まずOKボタンのイベントから

'id': 'okbutton',
'text': 'OK',
'click': function() {
//----- ここでダイアログの値をグローバルな変数に入れておく
//----- 処理自体はダイアログ画面が閉じてから行いたいので時間差にする 
setTimeout("OKProcessing()",100);
//----- これは画面を閉じる処理
$(this).imuiPageDialog('close'); 
}

これでイベントは取得できるはず
imuiPageDialog

次に値の引き渡しの事だけど

マスタファイル検索のダイヤログ

は親の画面に重なって表示しているだけなので親側で作っておいたグローバルな変数にはアクセスできます。
まずはそこに必要な値を設定
次にダイアログ画面が閉じてから処理したいのでsetTimeoutを使って処理を後伸ばしにします。
こうしないとタグが消えても画面上の再描写が無いので消えた後になりません。
例ですと仮にOKProcessing()をいうファンクションを呼んでいます。
あくまで例なので使われるときには変更して下さい。

Comments

[hatsuzo]

kuma_kuma_さん
お返事が遅れて失礼しました。
コメント頂きまして有難うございました。

ダイヤログ、何気に使っていますが、鉄道のダイヤと同じで、和製英語というか、年配者の発音ですね。ご指摘ありがとうございます。

ソースは確かに省略してあるのですが、必要と思われる情報は省略していないつもりでした。
imuiListDialogというのは、イントラマートというフレームワークが提供しているAPIですので、その内容をご指摘されているのではないかと思います。
だとしたら、jQueryの作法とは違ったことをこのAPIではブラックボックスで行われていることになり、雲をつかむような質問をしたことになりますので、ご容赦下さい。

ご提示いただいた内容のうち、
'id': 'okbutton',
'text': 'OK',
'click': function() {
//----- ここでダイアログの値をグローバルな変数に入れておく
//----- 処理自体はダイアログ画面が閉じてから行いたいので時間差にする
setTimeout("OKProcessing()",100);
//----- これは画面を閉じる処理
$(this).imuiPageDialog('close');
}

で、「ダイアログの値をグローバルな変数に入れておく」とのことですが、
ダイアログの値は呼び出し元とは別プログラム（別のhtmlとそれに紐付くJacascriptのスクリプト）なので、ajaxを使って何等かのオブジェクトを介してでないと、渡せないと思い込んでいました。

ともあれ、せっかく頂いたヒントも私のつたない知識では、実装に至りませんでした。

[hatsuzo]

当初思っていたクリックでダイヤログを閉じる、ということは出来ませんでしたが、行を選択しておいて、ボタンクリックのイベントで値を返す、まではなんとか下記の方法で出来ました。
呼び出し先のFunctionを呼び出し元で参照できる？というkuma_kuma_さんのヒントのおかげです。
大変助かりました。

```html
<!-- 呼び出し元 -->
$(function() {
$('#searchIcon').on('click', function() {
var sos = $("#section").val(); // 選択された組織コード
//ボタンを表示する例
$('<div id="detail_dialog"></div>').appendTo(document.body).imuiPageDialog({
title: '得意先検索',
url: 'app/hm_CM010_select',
parameter: {
'imui-theme-builder-module': 'notheme',
sos : sos
},
position: [300, 200],
modal: true,
height: 450,
width: 465,
// ***** 以下訂正 *****
buttons: [
{
'id': 'okbutton',
'text': '決定',
'click': function() {
var selectedData = getSelectedData(); // 呼出先html内のfunction
if (selectedData.ctktkcd) {
$("#tkcd").val(selectedData.ctktkcd); // 選択したデータのctktkcdプロパティを追加
$("#tkcd").val(selectedData.ctktkcd); // 選択したデータのctktkcdプロパティを追加
$(this).imuiPageDialog('close');
} else {
imuiAlert('選択されていません');
}
}
},
{
'text': 'キャンセル',
'click': function() {$(this).imuiPageDialog('close');}
}
],
close : function (event){
$('#detail_dialog').remove();
},
//エラーが発生したときに、ボタン表示領域を非表示にする
buttonsStateOnError: 'hide'
});

});
});

```

```html
<!-- 呼び出し先 -->
<script type="text/javascript">
function getSelectedData() {
var selectedRow = $('#ctktbl').getGridParam('selrow');
var selectedData = $('#ctktbl').getRowData(selectedRow);
return selectedData;
}
</script>
<imart type="imuiListTable" id="ctktbl" process="csjs" data=DBList width="440" height="320" multiSelect="false" viewRecords="true">
<cols>
<col name="ctktkcd" caption="コード" width="100" />
<col name="ctrtrnm" caption="得意先名" width="340" />
</cols>
</imart>
```

[kuma_kuma_]

できたなら良かったです。
ちなみにimuiPageDialogはjQueryの拡張機能なので別の様式にのっとっているわけではないですよ。