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

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

ただいまの
回答率

91.04%

  • Java

    11848questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • jQuery

    5645questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • JSP

    795questions

    JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

  • Struts

    184questions

    StrutsはJava向けのWebアプリケーションフレームです。MVCモデルに基づいており、JSPやJavaサーブレットを組み合わせ、アプリケーション構築時に使用する各機能を提供しています。

  • jQuery UI

    141questions

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

親画面とiframe内の子画面でのデータの受け渡し方法

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 289

espresso

score 1

前提・実現したいこと

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

別ページの動的HTMLをモーダルダイアログで表示していたため、
iFrameを使用し、ダイアログ内に表示するようにし、
呼び出し元の親画面とiframe内の子画面とでデータの受け渡しを行いたいと思っています。

子画面では親画面からの引数によって、
検索処理がはしり、初期値をセットしたりしています。

下記の例では引数によってラジオボタンorチェックボックスの判断をしたいのですが、
親画面から子画面に引数を渡す部分で問題があります。
どこを直したら良いでしょうか?

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

発生している問題・エラーメッセージ

・ダイアログオープン時にalert()を入れないと、
$("#iframe_win").contents()~が動作しない(値がセットされない)
・ダイアログ表示時、値がセットされるが子画面で再度検索処理を行うと引数の値が消えてしまう

該当のソースコード

●AAA.jsp(呼び出し元親画面)抜粋●

・・・・・・・・・・・
<script language="JavaScript">
<!--
jQuery(function($){

    // 「検索」ボタンを押した時の処理
    $("#kensaku")
        .attr("type","button")
        .val("名前検索")
        .click(function(){

            $( "#dialog-iframe" ).dialog({
                title: "名前検索",
                width: 1050,
                modal: true,
                open: function(event, ui) {

                    //ここでalertを入れないとcontents()~が動作しない
                    alert("ダイアログオープン");
                    $("#iframe_win").contents().find("[name=maxSelection]").val("1");

                },
                buttons: {
                    "選択": function (event) {

                        //検索画面の「選択」ボタン押下時のメソッドを実行
                        document.getElementById("iframe_win").contentWindow.add();

                        //検索画面で選択された姓+名を親画面にセット
                        $("#namae").val($("#iframe_win").contents().find("[name=selectSei]").val()+
                                        $("#iframe_win").contents().find("[name=selectMei]").val());

                        //ダイアログを閉じる
                        $(this).dialog("close");
                    },
                    "キャンセル": function () { $(this).dialog("close"); }
                },
                close: function () { $(this).dialog("destroy"); }
            });
        });
})
// -->
</script>

・・・・・・・・・・・

<body class="test">

    <html:form action="/AAA" method="post" onsubmit="return func()">

    <!--ダイアログの内容-->
    <div id="dialog-iframe" title="" style='display:none;'>
    <iframe
        src="<%=request.getContextPath()%>/BBB.do?action="
        name="iframe_win"
        id="iframe_win"
        frameborder="0"
        scrolling="auto"
        width="1000"
        height="550"
        style=''
    ></iframe>
    </div>

    <!--子画面からの返却値をセットするテキストボックス-->
    <html:text name="AAAForm" property="seimei" styleId="namae" size="80"/>

    <!--検索ダイアログを呼び出す検索ボタン-->
    <input id="kensaku">

    </form>
</body>
・・・・・・・・・・・

●BBB.jsp(子画面)抜粋●

・・・・・・・・・・・

<script language="JavaScript">
<!---
function add() {
    // 返却値用を作成する
    var ret = new Array();

    // チェック状態の取得
    var selectCheck = document.forms[1].selection.checked;
    // 名前が選択されているか
    if (document.forms[1].selection.length) {
        // 選択項目が複数ある
        // チェック状態をfalseに設定
        selectCheck = false;
        // 個数分ループ
        var retCount = 0;
        for (i = 0; i < document.forms[1].selection.length; i++) {
            // 選択されているかチェック
            if (document.forms[1].selection[i].checked) {
                // 選択されていればその状態を取得する
                selectCheck = true;
                ret[retCount] = new Array();
                ret[retCount][0] = document.forms[1].test0[i].value;
                ret[retCount][1] = document.forms[1].test1[i].value;
                ret[retCount][2] = document.forms[1].test2[i].value;

                //*****jQuery用に追加した処理(親画面に返却する値)********************
                document.forms[1].selectSei.value = ret[0][1];
                document.forms[1].selectMei.value = ret[0][2];
                //*****jQuery用に追加した処理(親画面に返却する値)********************

                retCount++;
            }
        }
    } else {
        // 選択項目が1つしかない
        ret[0] = new Array();
        ret[0][0] = document.forms[1].test0.value;
        ret[0][1] = document.forms[1].test1.value;
        ret[0][2] = document.forms[1].test2.value;

        //*****jQuery用に追加した処理(親画面に返却する値)********************
        document.forms[1].selectSei.value = ret[0][1];
        document.forms[1].selectMei.value = ret[0][2];
        //*****jQuery用に追加した処理(親画面に返却する値)********************
    }

    // 選択されていたかチェック
    if (!selectCheck) {
        // メッセージを表示
        alert("追加したいデータを選択してください。");
        return;
    }
}

//--->
</script>

・・・・・・・・・・・

<body class="test">
<html:form action="BBB" method="post" onsubmit="return func()">
<input type="hidden" name="action" value="">
<input type="hidden" name="selectSei" value="">
<input type="hidden" name="selectMei" value="">

<table class="bgtable" cellSpacing="1" cellPadding="3" width="100%">
    <TR class="tablehead" align="center">
        <TD width="10%">選択</TD>
        <TD width="45%"></TD>
        <TD width="45%"></TD>
    </TR>

    <logic:iterate id="dataBean" property="list" name="BBBForm" indexId="index" type="BBBBean">
        <html:hidden property="test0" name="dataBean"/>
        <html:hidden property="test1" name="dataBean"/>
        <html:hidden property="test2" name="dataBean"/>

    <TR class="tabletext" align="center">
        <TD>
            <logic:equal name="BBBForm" property="maxSelection" value="1">
                <!--maxSelectionが"1"だったら「選択」をラジオボタンにする-->
                <html:radio property="selection" value="<%=dataBean.getKeycd()%>"/>
            </logic:equal>
            <logic:notEqual name="BBBForm" property="maxSelection" value="1">
                <!--maxSelectionが"1"以外だったら「選択」をチェックボックスにする-->
                <html:checkbox property="selection" value="<%=dataBean.getKeycd()%>"/>
            </logic:notEqual>
        </TD>
        <TD>
            <bean:write property="namae_Sei" name="dataBean"/>
        </TD>
        <TD>
            <bean:write property="namae_Mei" name="dataBean"/>
        </TD>
    </TR>
    </logic:iterate>
</TABLE>

</html:form>
</body>

・・・・・・・・・・・

補足情報(言語/FW/ツール等のバージョンなど)

JAVA
jQuery
Struts

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/01/13 02:23

    質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • espresso

    2018/01/13 15:10

    ご指摘ありがとうございます。使い方がわかっておらず申し訳ございません。ご指摘の通り修正いたしました。

    キャンセル

回答 2

checkベストアンサー

+2

// 動作確認してないが
$('#iframe_win').load(function(){
    $("#iframe_win").contents().find("[name=maxSelection]").val("1");
});

iframe load 後に処理するとか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/17 03:50

    ご回答ありがとうございます。
    アドバイス頂きました通り、iframe load後、に変更したところ正常に動作しました!
    jQueryの処理する流れ(順番)があまりわかっていないのでもっと勉強しようと思います。

    大変助かりました。ありがとうございました!

    キャンセル

+1

jQuery UI dialog もいいのですが、できるだけ変更したくないのであれば、window.open()ではないでしょうか?
この案は却下されましたか?
https://developer.mozilla.org/ja/docs/Web/API/window.open

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/12 17:42

    ご回答ありがとうございます。
    この改修を引き継ぐ際にjQueryでとお願いされていたため確認しておりませんでした。
    改修は最新のEdgeブラウザで動作するよう進めていくため、また引き継ぐ前にwindow.openでは問題があったのかもしれません。
    window.openでもモーダルっぽく動作するようにできるのですね。
    今1度window.openで実現できるか確認してみます!
    もしwindow.openで問題があったら再度その問題とともに質問させて頂きたいと思います。

    キャンセル

  • 2018/01/13 17:08

    window.open()でなんとか対応できそうです。
    ただ、子画面への引数が20個近くある画面もあり配列で渡していますが、
    window.open()で引数を配列で渡す方法、もしくは複数の引数を渡す方法を調べています。
    クエリ文字で複数渡すのが一番スムーズかと思いますが、引数の数が多いためそれでよいか悩んでいます。
    他に良い方法はありますでしょうか?

    キャンセル

  • 2018/01/15 11:04

    jQueryを使っているようなので、フォーム内データなら.serialize()を使ってみてはどうでしょうか?
    https://api.jquery.com/serialize/
    https://qiita.com/tk3fftk/items/22bf451f3051804b142d

    キャンセル

  • 2018/01/15 12:02

    なんというか…
    妙竹林な顧客が特に考えも無しにこれ使ってといったのが発端のような…

    window.open中に親画面を操作させない方法が思い付かなかったからか、
    javascriptモーダルダイアログのサポートの狭さからか

    も考えられるな。

    キャンセル

  • 2018/01/15 12:10

    showModalDialogはもう何年も前からやめるといっていて2016年には実際に廃止され始めているのがいまだに残っているということから考えると、相当古いシステムだと思われます。そしてその改修がいまということから、ろくに使われていなかった機能の問題に今頃気づいたということではないでしょうか? 憶測ですが。レガシーIE依存もたくさんありそうですね。

    キャンセル

  • 2018/01/15 15:45

    クロム:廃止
    キツネ:非推奨(廃止予定)
    ゲイツ:放置

    てとこかな今のところ

    キャンセル

  • 2018/01/15 15:53

    Firefoxならどこよりも早くやめていた気がします。
    https://www.fxsitecompat.com/ja/docs/2015/showmodaldialog-has-been-disabled-in-multi-process-firefox/
    ああ、2015年ですねこれ。
    Edgeも最初から搭載していないですし。IEはまあ……

    キャンセル

  • 2018/01/15 16:10

    ああ・・
    https://developer.mozilla.org/ja/docs/Web/API/Window/showModalDialog
    更新されてないのか


    Mozilla は、このメソッドのサポートを廃止する予定であると公表しました (バグ 981796)。時期は、Firefox 46 より前ではないだろうとしています。すなわち、2016 年 6 月中旬頃までは使用できる予定です。ESR リリースは、さらに数か月間サポートするでしょう。

    キャンセル

  • 2018/01/17 03:45

    x_xさん、asahina1979さん、ありがとうございます。
    仰る通りとても古いシステムです。IEのみ対応として作られたようで、IEのバージョンがあがり動かなくなった部分は、互換表示で対応してもらっていたようです(多くはなかったので)。
    現場の環境をWin10、Edgeにするということで対応を迫られたという感じです。
    showModalDialogはだいぶ前からどのブラウザでも廃止されているのですね。
    今回の新環境移行に伴い、システムのバージョンアップも検討している中での依頼でした。

    そしてx_xさんのご提案頂いた.serialize()で対応できました!
    ただ、asahina1979さんのアドバイス(iframeのロード後にセット)でjQuery UI dialogでも正常に動作しましたので、今回そちらで対応したいと思います!

    大変助かりました。本当にありがとうございました!

    キャンセル

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

  • ただいまの回答率 91.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Java

    11848questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • jQuery

    5645questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • JSP

    795questions

    JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

  • Struts

    184questions

    StrutsはJava向けのWebアプリケーションフレームです。MVCモデルに基づいており、JSPやJavaサーブレットを組み合わせ、アプリケーション構築時に使用する各機能を提供しています。

  • jQuery UI

    141questions

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