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

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

新規登録して質問してみよう
ただいま回答率
85.36%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

73379閲覧

showModalDialogの代替方法について

syes

総合スコア10

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2016/02/25 03:38

###前提・実現したいこと
showModalDialog()を多用しているWEBシステムにおいて、
Edgeブラウザ対応を実施したいと考えております。

Edgeでは、showModalDialog()が機能しなくなるため、
代替するダイアログにて改修しようとしている中で、
現状、jQuery UI dialogでの代替をすすめています。

既存処理が別ページのHTMLをダイアログ内に表示しているため、
iFrameを利用してdialog内に表示しているのですが、
既存ページ内の任意のボタンアクション(「保存」や「キャンセル」など画面毎に異なる)結果を
呼び出し元のページに渡したいのですが、その渡し方が現状不明な状況です。

iframe外の親画面とiframe内の子画面間のデータの受け渡し方法はネット上等に情報があるのですが、
ダイアログ自体(iframe外の親画面)の呼び出し元になる「親画面」と、
「iframe内の子画面」間のデータの受け渡し方法(呼び出し元での処理方法)を
ご教示いただきたいと存じます。

また、showModalDialogの代替方法として別手法をご存知でしたら、
ご教示いただけると幸いです。

何卒よろしくお願い申し上げます。

###補足情報(言語/FW/ツール等のバージョンなど)
VB.NET
VS2005
jQuery
AJAX

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

最少構成です。aspxではなくて、java ですが、やりたいことを実現するにはサーバーげんごは問いません。

html

1親画面に記述 2 3jquery,jqueryuiの参照は済んでるとする 4<div style="display: none"> 5<div id="modal"> 6 <div id="outer"> 7 <div id="inner"> 8 <iframe src="" id="ifr"></iframe> 9 </div> 10 </div> 11</div> 12</div> 13<script> 14// jquery ui dialog 初期化、済みとする。 15$("modal").dialog({.....}); 16// プロパティは、autoOpen: false, modal: true,title: 適当 17 18//ダイアログを開くメソッドの定義 19function showDialog() { 20 $("#modal").dialog("open"); 21 $("#ifr").attr("src", "bbb.aspx"); 22} 23// iframe 内、bbb.aspx から呼び出されるメソッドの定義 24var ifrdlgs = { 25 save: function() { 26 alert("save callback called"); 27 }, 28 cancel: function() { 29 alert("cancel callback called"); 30 } 31}; 32 33 34</script> 35 36テスト用ダイアログ起動ボタン 37<button onclick="showDialog()">kidou</button> 38

html

1次に、bbb.aspx です。 2少々面倒。 3保存ボタン 4 押下されると、サーバー処理が動作する。サーバー処理が戻すhtmlを以下のように定義する。 5 <script> window.onload = function() { save(); }</script> 6キャンセルボタン 7 押下されると、サーバー処理が動作する。サーバー処理が戻すhtmlを以下のように定義する。 8 <script> window.onload = function() { cancel(); } 9 10共通 11<script> 12function save() { 13 parent.ifrdlgs.save(); 14} 15function cancel() { 16 parent.ifrdlgs.cancel(); 17} 18</script>

以上です、大分端折りましたけど、これで動作します。実験済みなので、動かない場合は具体的に示してください。開発者画面、デバッグコンソールなどを駆使すれば、30分くらいで雛形完成です。
まずは、最小構成の雛形を作って、これで動きはオッケー、なのを確認してから、実際のソースを触るようにしてください。

html

1保存ボタン処理が返すhtml 2 3<script> parent.ifrdlgs.save() </script> 4 5キャンセルボタン処理が返す html 6<script> parent.ifrdlgs.cancel() </script> 7 8bbb.aspx が返す html 9jquery,jqueryui , css その他ロード済みとする。iframe 内のコンテンツなので、親でロード済みですが、それらは、ifrane 内には反映されないので別途読み込みます。 10<script> 11$(function() { 12 $("input[type=button]").button(); 13}); 14

親画面の ifrdlgs.save メソッド内で、$("#modal").dialog("close"); すればオッケー。

投稿2016/03/01 00:49

編集2016/03/01 01:34
ipadcaron

総合スコア1693

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ipadcaron

2016/03/01 00:56

右上の「x」ボタン、キャンセル方法が2つあるのはいまいちですね。 消すのが 面倒でづが、dom インスペクタでノードを辿ればヒントが見つかります。 キャンセルボタンでもサーバ処理をやってる様子なので、この❎ボタンは消した方が 良いのでは?と思いました。
syes

2016/03/01 01:48

早急で具体的な雛形制作や検証方針のご教示まで頂戴し、 まことにありがとうございます。 ご教示いただいた内容にて作成・検証を進めてまいりたいと存じます。 作成、既存ソースとの融合、検証に少し時間を要するかと思いますので、取り急ぎのお礼申し上げます。 また、検証中に質問させていただくこともあるかと存じますが、何卒よろしくお願い申し上げます。 まずは、お礼のみにて失礼いたします。
syes

2016/03/04 09:23

ご連絡が遅くなり恐縮ですが、 おかげさまでご教示いただいた内容を雛形として、showModalDialogのjQueryのダイアログにて代替処理を作成することができました。 まことにありがとうございました。
guest

0

showModalDialog の2番目のパラメータがオブジェクトです。
window を渡せば、親の資源すべてにアクセスできます。
代替は、jquery-ui のモーダルパネルが候補ですが、showModalDialog
の書式を活かす方向で実装するとなると、

html

1window.shoModalDialog = function(url, param, options) { 2 // options を ; で分割、要素それぞれ、= で分割、各パラメータを、jquery-ui のダイアログ初期化に利用して、モーダルパネルを表示する、ような仕掛けになると思われます。 3url はそれぞれ固有の画面の jsp,php を指し示していると思うので、url の部分文字列から、どのような体裁のダイアログを表示するか判断できるかもしれません。 4iframe 利用の場合、iframe内から、top や parent をターゲットに画面更新させる処理がある場合、モーダルパネルでは、全画面が対象になってしまいます。面倒ですけど、ifraneの中に表示する画面の html を修正するか、同じドメインなら、onload/onreadystatechange などで iframe 内コンテンツのロードイベントをハンドルできるので、そこで親画面を更新するようなボタンイベントやリンク、フォームなどは設定変更してあげる必要がありますね。

モーダルダイアログ内で、iframe ということは、post や部分書き換えが絡む話だと思いますが、今までは、<base target="self"> とかやって、モーダルダイアログ内でポスト処理をやってたと思いますが、モーダルダイアログの垣根が取っ払われてしまうので、、、、確証無いですが、iframe をネストさせれば、最も内側の iframe の top は、最も外側の iframeになるかもしれません。

投稿2016/02/25 04:07

ipadcaron

総合スコア1693

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

syes

2016/02/26 02:01

早速のご回答まことにありがとうございます。 各種方針や手法のご教示参考になりました。 その中で1点確認させていただきたいのですが、 「window 」をパラメータとしてjquery-ui dialogに渡す具体的なロジック例をご教示いただけないでしょうか? dialogに渡せるパラメータ(オプション)は以下のURL内容と認識しているのですが、 その他の渡したいパラメータ(今回はwindow)をどのように渡してdialog内で活用すればよいかご教示いただけると幸いです。 http://jqui.my-learn.net/dialog/options.php 素人質問で恐縮ですが、何卒よろしくお願い申し上げます。
ipadcaron

2016/02/26 03:31 編集

jquery-ui は、別プロセスでも、別スレッドでもありませんよ。 別に渡す必要無いと思うけど、iframe のことを懸念されてるなら、 もっと情報を開示してください。現在の showmodaldialogの代替と して、jquery-ui を考えてるのは分かるんですが、知りたいのは 改修前のプログラムの構造です。 #なんか iPadで使い難くなった気がする、ios9 にアップデートしてからだ。特にスクロールとコピペがイライラする、、、、 コピペできなくなったぞ、、、、なんでだ?
syes

2016/02/29 15:45

早速のご返信を頂いたにも関わらず、気づかず返答遅く申し訳ありません。 (コメントへのご返答は、メール通知されないんですね、知らず失礼いたしました) そして、ご丁寧にご指示いただいた改修前のプログラム構成概要を以下に記載させていただきます。 ●showModalDialogを利用した既存の親画面・子画面の抜粋サンプルロジック ■AAA.aspx(呼び出し元親画面) <script language="javascript" type="text/javascript"> <!-- //ボタン等任意のアクション時にshowModalDialogで子画面表示し、戻り値に応じて親画面への反映処理を実施 function xxOpenDialog(){ var rtn = showModalDialog("BBB.aspx","BBB","dialogWidth=650px;dialogHeight=500px;scrollbars=yes;center=yes;help=no;status=no"); if ( rtn == "OK" ) { document.getElementById("XXXX").value = "1"; dspHogeHoge(0); } } // --> </script> ■BBB.aspx(子画面) //画面上でデータ検索して選択や詳細情報を編集して「保存」or「キャンセル」のボタンアクションが主   <asp:Button ID="btnOK" runat="server" CssClass="btnOk" Text="保存" OnClick="btnOK_Click"/>   <asp:Button ID="btnCancel" runat="server" CssClass="btnOk" Text="戻る" OnClick="btnCancel_Click"/>      ※各ボタンアクション処理はロジック(aspx.vb)側で処理 ■BBB.aspx.vb(子画面ロジック)   //アクションに応じた値の設定および自(子)画面のクローズ処理をscriptの出力ロジックにて実施(「保存」の例)   Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs) '内部的な保存処理等 Call lcSave() '保存実施 Dim sbScript As New System.Text.StringBuilder With sbScript .Append("<script language=javascript>") .Append("window.returnValue = """ & OK & """;") .Append("self.window.opener=window;") .Append("self.window.close();") .Append("</script>") End With Me.Page.ClientScript.RegisterStartupScript(Me.Page.GetType, "CloseDialog", sbScript.ToString) End Sub ************************************************************** そして、あわせて現状想定しているjQuery UI dialogの改修想定案の構成を以下に記載させていただきます。 ●jQuery UIのdialogを利用した改修想定の親画面・子画面の抜粋サンプルロジック ■AAA.aspx(呼び出し元親画面) <script language="javascript" type="text/javascript"> <!-- //jQueryのdialogを任意のボタンに関連付け(iframeDialogというプラグイン利用) $(function(){ var rtn = $('#btn1').iframeDialog({ id: 'BBB', url: 'BBB.aspx', scrolling: 'auto', modal: true, resizable: false, width: 650, height: 500 }); }); // --> </script> ■iframeでdialog表示用の「iframeDialog」プラグイン (function ($) { $.fn.iframeDialog = function (options) { this.each(function () { $(this).unbind('click').click(function (e) { e.preventDefault(); var $div = $("<div/>"); $div.attr("id", "iframeDialog_id"); var $iframe = $('<iframe class="iframeDialog" name="iframeDialog{rnd}" frameborder="0" width="100%" height="100%" marginwidth="0" hspace="0" vspace="0" scrolling="no" allowtransparency="true" />'); if (!options.title) { options.title = $(this).attr('title'); } if (!options.url) { url = $(this).attr('href'); } else { url = options.url; } if (!options.close) { options.close = function () { $(this).remove(); }; } if (options.id) { $iframe.attr("id", options.id); } if (options.scrolling) { $iframe.attr("scrolling", options.scrolling); } $iframe.attr("src", url); $div.append($iframe).dialog(options); }); }); return this; }; })(jQuery); ■BBB.aspx.vb(子画面ロジック)   //アクションに応じた値の設定および自(子)画面のクローズ処理をscriptの出力ロジックにて実施(「保存」の例)   // ※想定内容および不明点を以下ロジック内に記載   Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs) '内部的な保存処理等 Call lcSave() '保存実施 Dim sbScript As New System.Text.StringBuilder With sbScript .Append("<script language=javascript>") .Append("window.returnValue = """ & OK & """;") .Append("self.window.opener=window;") .Append("window.parent.jQuery('#iframeDialog_id').dialog('close').remove();") // ここで呼び出し元の親画面に反映処理用メソッド等を新たに用意して、 // それを呼び出す処理をscriptへ記載・出力するのが妥当かと考えましたが、 // ブラウザのデバックなどでも呼び出し元の親画面情報が「window.parent」等に無く、取得方法が不明であることと、 // そもそもこの想定が妥当か否か等が不明な状況です。 .Append("</script>") End With Me.Page.ClientScript.RegisterStartupScript(Me.Page.GetType, "CloseDialog", sbScript.ToString) End Sub ************************************************************** 上記内容をご覧いただき、ご指摘、ご教示などいただけると幸いです。 何卒よろしくお願い申し上げます。
ipadcaron

2016/03/01 00:57 編集

新雨実現方法を書いたので削除
ipadcaron

2016/03/01 00:58 編集

新しい実現方法を書いたので削除
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問