0

タイトルの通りです。

thymeleafでdivの閉じタグが出力されない

こちらの質問に付随するものですが、
解決策が得られなかったのでスコープを狭めて再度質問を作成しました。

th:ifで開始タグはAの制御で表示非表示を制御、
th:ifで閉じタグはBの制御で表示非表示を制御といった様な事は可能なのでしょうか?

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{layout/component :: head('配属情報一覧')}"/>
<body>
<th:block th:replace="~{layout/component :: header}"></th:block>
<div class="container">
    <th:block th:replace="~{layout/component :: container_top('配属情報一覧')}"></th:block>
    <div class="row justify-content-start">
        <div class="w-100 m-2">
            <form method="post" th:action="@{/haizokuMaster/list}" th:object="${haizokuMasterListForm}">
            <table class="table-bordered w-100">
                <tr>
                    <td class="p-2 text-center">
                        <label class="m-0">支店</label>
                    </td>
                    <td class="p-2">
                        <select class="w-100" name="shitenid">
                            <option th:each="entity : ${optionMapList}" th:value="${entity.key}" th:text="${entity.value}" th:field="*{shitenid}"></option>
                        </select>
                    </td>
                    <td class="p-2 text-center">
                        <label class="m-0">名前</label>
                    </td>
                    <td class="p-2">
                        <input class="w-100" type="text" name="koinname" th:value="${haizokuMasterListForm.koinname}">
                    </td>
                    <td class="p-2 text-center ">
                        <input type="submit" value="検索" class="btn btn-outline-secondary">
                    </td>
                </tr>
            </table>
            </form>
        </div>
        <div class="w-100 m-2">
            <!-- ページング -->
            <form method="post" th:action="@{/haizokuMaster/pagenate}" th:object="${page}">
            <nav aria-label="Page navigation example">
              <ul class="pagination">
                <li th:if="${!page.first}" class="page-item">
                  <a th:href="@{/haizokuMaster/pagenate(page = ${page.number} - 1)}" class="page-link" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                  </a>
                </li>
                <li th:each="i : ${#numbers.sequence(0, page.totalPages - 1)}" class="page-item">
                    <a th:if="${i} == ${page.number}" th:text="${i + 1}" class="page-link"><span th:text="${i+1}">1</span></a>
                    <a th:if="${i} != ${page.number}" th:href="@{/haizokuMaster/pagenate(page = ${i})}" class="page-link"><span th:text="${i+1}">1</span></a>
                </li>
                <li th:if="${!page.last}" class="page-item">
                  <a th:href="@{/haizokuMaster/pagenate(page = (${page.number} + 1))}" class="page-link" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                    <span class="sr-only">Next</span>
                  </a>
                </li>
              </ul>
            </nav>
            </form>
            <!-- ページング -->
        </div>
        <th:block th:each="entity:${list}">
            <th:content th:if="${!#strings.isEmpty(entity.shitenname)}">
            <div style="border: solid;">
            <p th:text="${entity.shitenname}"></p>
            <p th:text="${entity.totalPrice}"></p>
            <p th:text="${entity.countKeiyaku}"></p>
            <p th:text="${entity.shitenRank}"></p>
            </th:content>
                <div class="card mb-3 mr-1" style="max-width: 375px;">
                  <div class="row no-gutters">
                    <div class="col-lg-6">
                      <img th:src="${entity.filedataString}" class="card-img" alt="...">
                    </div>
                    <div class="col-lg-6">
                      <div class="card-body">
                        <h4 class="card-title">
                            <a th:href="@{'/koinMaster/detail?id=' + ${entity.id}}" th:text="${entity.koinname}">
                            </a>
                        </h4>
                        <p class="card-text"><a th:href="@{'/koinMaster/detail?id=' + ${entity.id}}" th:text="${entity.yakushokuname}"></a></p>
                      </div>
                    </div>
                  </div>
                </div>
            <th:content th:if="${entity.nextShitenIdSameFlg == 1}">
            <p>test</p>
            </div>
            </th:content>
        </th:block>
<!--        <table class="table table-striped table-sm">
            <tr>
              <th>支店名</th>
              <th>年齢</th>
              <th>名前</th>
              <th>役職</th>
            </tr>
            <tr th:each="entity:${list}">
              <td><a th:href="@{'/shitenMaster/detail?id=' + ${entity.shitenmaster.id}}" th:text="${entity.shitenmaster.shitenname}">name</a></td>
              <td><a th:href="@{'/koinMaster/detail?id=' + ${entity.id}}" th:text="${entity.age}">name</a></td>
              <td><a th:href="@{'/koinMaster/detail?id=' + ${entity.id}}" th:text="${entity.koinname}">name</a></td>
              <td><a th:href="@{'/koinMaster/detail?id=' + ${entity.id}}" th:text="${entity.yakushokuname}">name</a></td>
            </tr>
        </table> -->
        <div class="w-100 m-2">
            <!-- ページング -->
            <form method="post" th:action="@{/haizokuMaster/pagenate}" th:object="${page}">
            <nav aria-label="Page navigation example">
              <ul class="pagination">
                <li th:if="${!page.first}" class="page-item">
                  <a th:href="@{/haizokuMaster/pagenate(page = ${page.number} - 1)}" class="page-link" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                    <span class="sr-only">Previous</span>
                  </a>
                </li>
                <li th:each="i : ${#numbers.sequence(0, page.totalPages - 1)}" class="page-item">
                    <a th:if="${i} == ${page.number}" th:text="${i + 1}" class="page-link"><span th:text="${i+1}">1</span></a>
                    <a th:if="${i} != ${page.number}" th:href="@{/haizokuMaster/pagenate(page = ${i})}" class="page-link"><span th:text="${i+1}">1</span></a>
                </li>
                <li th:if="${!page.last}" class="page-item">
                  <a th:href="@{/haizokuMaster/pagenate(page = (${page.number} + 1))}" class="page-link" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                    <span class="sr-only">Next</span>
                  </a>
                </li>
              </ul>
            </nav>
            </form>
            <!-- ページング -->
        </div>
        <a href="/" class="btn btn-outline-secondary">戻る</a>
    </div>
</div>
<footer th:replace="~{layout/component :: footer}"></footer>
</body>
</html>

コード内61行目のdivの開始タグはth:if="${!#strings.isEmpty(entity.shitenname)}"で制御、
コード内86行目のdivの閉じタグはth:if="${entity.nextShitenIdSameFlg == 1}"で制御したいです。

現状Eclipse内では62行目で「終了タグ () がありません。」と警告が出ており、
閉じタグが見つけられていない(?)ようです。

そもそもThymeleafの記述方法としてこのやり方は可能なのか不可能なのか?
また、不可能なのであれば代替策が分かる方がおられましたら、
ご回答よろしくお願いします。

1
  • 67行目近傍の「</th:content>」の前に「<!--/*--> </div> <!--*/-->」を84行目近傍の「<th:content th:if="${entity.nextShitenIdSameFlg == 1}">」の後に「<!--/*--> <div> <!--*/-->」を追加するとどうなりますか?静的なコンテンツとしてdivタグの対応をとることでエラーをなくし、Thymeleafパース時にはコメントとする方法です。 Commented 2021年9月25日 10:11

1 件の回答 1

0

そもそもThymeleafの記述方法としてこのやり方は可能なのか不可能なのか?

状況によっては可能なようです。
https://arakan-pgm-ai.hatenablog.com/entry/2017/03/20/093138
によると

HTML5だとタグを閉じなくてもOKですが、Thymeleaf2.1.x(2.1系)では、それがエラーになります。
Thymeleafが3.0.0以降なら、HTML5の文法で問題なくいけます。

とのことでした。
https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf_ja.html#thymeleaf%E3%81%AF%E3%81%A9%E3%82%93%E3%81%AA%E7%A8%AE%E9%A1%9E%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E5%87%A6%E7%90%86%E3%81%A7%E3%81%8D%E3%82%8B%E3%81%AE
によると

Legacy HTML5 以外は整形式XMLです。Legacy HTML5 モードでは閉じていないタグ・値がない属性・引用符で囲まれていない属性が許容されていますが、Thymeleafはこのモードのファイルを最初に整形式XMLに変換します。それでもHTML5としては正しい状態です(そして実際こちらがHTML5を書くのに推奨されている方法です)。

とのことでした。質問のHTML、実行環境で閉じていないタグ・値がない属性・引用符で囲まれていない属性が許容されるかはわかりませんが、状況によっては可能なようです。


終了タグのない開始タグに、Thymeleafパース時にはコメントとなる終了タグを、同様に開始タグのない終了タグを補うと、発生しているエラーは出なくなると思います。

<th:content th:if="True">
    <div>
        AAAAAAAAAAA
        <!--/*--> </div> <!--*/-->
</th:content>
XXXXXX
<th:content th:if="True">
    <!--/*--> <div> <!--*/-->
        BBBBBBBBBBB
    </div>
</th:content>

Thymeleafの良さのひとつはテンプレートをそのままHTMLとして確認できることだと思います。
できるだけ整合のとれたHTMLにした方がよいと思います。
冗長になりかねませんが、条件が真のときのHTMLと偽のときのHTMLを両方記述するのがいいと考えます。

1
  • ご回答ありがとうございました。thymeleafのバージョン3.0.11なんですけどねえ。。<!--/*--> </div> <!--*/-->こちら入れたら警告は消えましたが、閉じタグの出力は変わらずされませんでした。根本的な解決方法は分からず終いですが、デザイン組み替えて対応しようと思います。ありがとうございましたm(_ _)m
    – shazam
    Commented 2021年10月2日 4:46

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。