クォーテーションのエスケープ処理が上手く行きません

Question

前提・実現したいこと

Javaでwebシステムを作っています。
ボタンによって、ラベルをテキストボックスに変えるJavaScriptを作成しようとしておりますが、クォーテーションのエスケープ処理がうまくいきません

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

<script>$(&quot;#1button&quot;).on(&quot;click&quot;, function(){ $(&quot;#1hoge&quot;).css( &quot;display&quot;, &quot;none&quot;); $(&quot;#1hogeEdit&quot;) .css( &quot;display&quot;, &quot;&quot;) });</script>

上記のようなhtmlが生成されてしまい、"が'に変わってくれていません

該当のソースコード

<th:block th:each="list: ${list}" th:object="${list}">
    <script th:text="
    '$(&quot;#' + *{id} + 'button&quot;).on(&quot;click&quot;, function(){
        $(&quot;#' + *{id} + 'hoge&quot;).css( &quot;display&quot;, &quot;none&quot;);
        $(&quot;#' + *{id} + 'hogeEdit&quot;)
            .css( &quot;display&quot;, &quot;&quot;)
    });'
    "></script>
    </th:block>

試したこと

"を¥'や¥"に変えてみたりもしましたが、それはそれで上手く行きませんでした

Answer 1

こちら試してみてはいかがでしょうか。

ThymeleafでJavaScriptを利用する

Comments

[kanako23]

<th:block th:each="list: ${list}" th:object="${list}">
<script th:inline="javascript" th:text="
/*<![CDATA[*/
$('#/*[[ *{id} ]]*/button').on('click', function(){
$('#/*[[ *{id} ]]*/hoge').css( 'display', 'none');
$('#/*[[ *{id} ]]*/hogeEdit')
.css( 'display', '')
});
/*]]>*/
"></script>
</th:block>

という風に変えてみましたが、以下のエラー文が出てしまいました

Caused by: org.attoparser.ParseException: Could not parse as expression: "
/*<![CDATA[*/
$('#/*[[ *{id} ]]*/button').on('click', function(){
$('#/*[[ *{id} ]]*/hoge').css( 'display', 'none');
$('#/*[[ *{id} ]]*/hogeEdit')
.css( 'display', '')
});
/*]]>*/

Caused by: org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: "
/*<![CDATA[*/
$('#/*[[ *{id} ]]*/button').on('click', function(){
$('#/*[[ *{id} ]]*/hoge').css( 'display', 'none');
$('#/*[[ *{id} ]]*/hogeEdit')
.css( 'display', '')
});
/*]]>*/]

[A-pZ]

th:text内で使うのではなく、
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/

/*]]>*/]
</script> で記述するものです。

[kanako23]

<th:block th:each="list: ${list}" th:object="${list}">
<script type="text/javascript" th:inline="javascript">
$('#[[ *{id} ]]button').on('click', function(){
$('#[[ *{id} ]]hoge').css( 'display', 'none');
$('#[[ *{id} ]]hogeEdit')
.css( 'display', '')
});
</script>
</th:block>

で、想定していた仕様にすることが出来ました！ありがとうございました！

[A-pZ]

d(・ω・ nice.