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

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

ただいまの
回答率

87.78%

モックアップで表示できたものをThymeleafで表示することができない原因が知りたい。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 639

モックアップで表示することができた内容をThymeleaf上で表示することができなくて悩んでいます。
モックアップでは、部署を選択することで社員の名前を絞り込み選択することができたのですが、Thymeleaf上では、部署で絞ることができずにすべて選択できない状態になってしまいます。
ご教授お願いいたします。

参考にしたサイト:https://qiita.com/taktos/items/8c4a951d03d0da869d89
以前にchoosen.jsについて質問した内容:https://teratail.com/questions/280999

Thymeleaf
https://notepad.pw/2l2y1gu2

<!DOCTYPE html>
<html lang="ja" class="nanikore" xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!--Font Awesome5-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

    <link rel="stylesheet" href="../css/stylesheet.css">

    <link rel="stylesheet" href="../css/chosen-css.css">

</head>

<body class="nanikore">

    <div class="container h-100">

        <div class="row align-items-center h-100">
            <div class="col-6 mx-auto">
                <div class="jumbotron text-center" style="background-color: #5ca580;">
                    <div class="text-center">

                        <h2 class="mb-5"><i class="fas fa-users"></i>担当者を選択してください</h2>
                        <form action="" class="form-inline justify-content-center">

                            <div class="form-inline">

                                <div class="search-box form-group mb-2 ml-2">
                                    <select class="chosen-select form-control" name="department">
                                        <option value="" style="font-weight: 100;">部署選択</option>
                                        <option value="itsol">ITソリューション部</option>
                                        <option value="jigyou">事業管理部</option>
                                        <option value="eigyou">営業グループ</option>
                                    </select>
                                </div>

                                <div class="form-group mb-2 ml-2 mr-5">
                                    <select class="chosen-select form-control list" name="department">
                                        <option value="">氏名選択</option>
                                        <option class="list_item" data-department="itsol">山田(やまだ)</option>
                                        <option class="list_item" data-department="itsol">田中(たなか)</option>
                                        <option class="list_item" data-department="jigyou">佐藤(さとう)</option>
                                        <option class="list_item" data-department="jigyou">鈴木(すずき)</option>
                                        <option class="list_item" data-department="eigyou">中田(なかた)</option>
                                    </select>
                                </div>
                            </div>

                            <div class="ml-1 mt-5">
                                <button type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#exampleModalCenter">入力完了
                                </button>

                                <!-- Modal -->
                                <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
                                    aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalCenterTitle">担当者確認画面</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <p>こちらの担当者であっていますか?</p>
                                                <p>ITソリューション部:山田</p>
                                            </div>
                                            <div class="modal-footer">
                                                <a type="button" class="btn btn-secondary" data-dismiss="modal"
                                                    href="visitor-top.html">キャンセル</a>
                                                <a type="button" class="btn btn-primary" href="visitor-form.html">OK</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>



                        </form>

                    </div>

                </div>
            </div>
        </div>


    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>



    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" rel="stylesheet">

    <script>
        $('.chosen-select').chosen({
            search_contains: true
        });

        $(function () {
            var searchBox = '.search-box'; // 絞り込む項目を選択するエリア
            var listItem = '.list_item';   // 絞り込み対象のアイテム
            var hideClass = 'is-hide';     // 絞り込み対象外の場合に付与されるclass名
            $(function () {
                // 絞り込み項目を変更した時
                $(document).on('change', '.search-box select', function () {
                    search_filter();
                    $('.chosen-select').trigger("chosen:updated"); // 追加
                });
            });
            //リストの絞り込みを行う
            function search_filter() {
                // 非表示状態を解除
                // $(listItem).removeClass(hideClass);
                $(listItem).attr('disabled', false);
                for (var i = 0; i < $('.search-box select').length; i++) {
                    var name = $('.search-box select').eq(i).attr('name');
                    // 選択されている項目を取得
                    var searchData = get_selected_input_items(name);
                    // 選択されている項目がない、またはALLを選択している場合は飛ばす
                    if (searchData.length === 0 || searchData[0] === '') {
                        continue;
                    }
                    // リスト内の各アイテムをチェック
                    for (var j = 0; j < $(listItem).length; j++) {
                        // アイテムに設定している項目を取得
                        var itemData = $(listItem).eq(j).data(name);
                        // 絞り込み対象かどうかを調べる
                        if (searchData.indexOf(itemData) === -1) {
                            //$(listItem).eq(j).addClass(hideClass);
                            $(listItem).eq(j).attr('disabled', true);
                        }
                    }
                }
            }
            //選択されているoptionのvalue属性の値
            function get_selected_input_items(name) {
                var searchData = [];
                // $('[name=' + name + ']:checked').each(function() {
                $('select[name=' + name + '] option:selected').each(function () {
                    searchData.push($('select[name=' + name + '] option:selected').val());
                });
                return searchData;
            }
        });
    </script>


</body>

</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

check解決した方法

0

Spring Data JPAだと、nameを使って値を送信するのですが、nameで連動させて送ると値が重複してしまいエラーが起きるので、idとnameで連動させるようにJavaScriptを変更することで自己解決することができました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

th:data-department の属性がThymeleafでは未定義です。
HTMLの定義済み属性以外の属性を出力する場合には、th:attr を使います。

th:attr="data-department='${user.deployment_id}'" >

以下も参考に。

usingthymeleaf_ja.html#任意の属性に値を設定

https://qiita.com/alpha_pz/items/3ea4754c5f274d44e564

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/09/03 10:14

    回答ありがとうございます。
    th:data-department="'${user.deployment_id}'"でもご指摘頂いた方法でもdata型に値を持たせることはできたのですが、JavaScriptがうまく動いていないのが原因なのかモックと同じ動きをしません・・・
    文字数制限がかかるのでソースコードを外部サイトに貼り付けました。

    キャンセル

  • 2020/09/03 11:41

    こちら実際に動作させてブラウザに出力されているHTMLが、モックアップで作成されているHTMLとの相違は確認されましたでしょうか。出力されている属性が違う等はない状態でしょうか?

    キャンセル

  • 2020/09/03 14:51

    モックアップで作成されているhtmlとの相違はないと確認しています。
    属性の違いもありませんでした。

    キャンセル

  • 2020/09/03 16:09

    大変申し訳ありません。デバッグで確認したところ、name属性の部分でモック上では値を同じにしていないとJavaScriptが動作していませんでした。spring jpaを使用していてname属性でデータを送信しているために値を変更しないといけない状態でした。現在、name属性を取得することで作動するJavaScriptでどのようにすれば、spring jpaと両立できるか試行錯誤しています。JavaScriptは初心者すぎてネット上のものを参考にしただけなので応用がすぐにできない状況です。

    キャンセル

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

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

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