使用 onclick 事件更改对象 html 标记的数据答案

【问题标题】：Change data of object html tag with onclick event使用 onclick 事件更改对象 html 标记的数据
【发布时间】：2018-09-23 18:34:36
【问题描述】：

我正在使用 Thymeleaf 和 Sprin Boot 我的页面中有这样一个对象：

然后我想在 onclick 事件后更改对象的内容：我选择了一个日期，在我确认后，我向服务器发送请求，我必须在对象内显示答案（pdf）

我该怎么做？

这是整个页面：

    <div class="row">
        <div class="col">
            <h5 style="color:red;">Seleziona data</h5>
            <div class="input-group input-group-prepend col-4">
                <span class="input-group-text far fa-calendar-alt"></span>
                <input type="text" class="form-control date" data-provide="datepicker" id="dataProgrammazione" ></input>
            </div>
            <button type="button" class="btn btn-primary" th:text="#{conferma}" onclick="cambiaData();"></button>
        </div>
    </div>
    <div class="row">
        <object class="col" th:data="@{/programmazione/pdf?dataProva=16/04/2018}" type="application/pdf" height="800" width="800" id="pdf"></object>
    </div>

    <script type="text/javascript">

        function cambiaData(){
            $.ajax({
                type: 'GET',  
                url: MY_URL+$("dataProgrammazione").val(),
                success: function(results) {
                    alert(results);
                    $('#pdf').data(results);
                }
            });
        }

        $(function(){
            $(".date").datepicker({
                todayBtn: "linked",
                language: "it",
                todayHighlight: true
            });
        });
    </script>

【问题讨论】：

标签： javascript ajax spring spring-boot thymeleaf

【解决方案1】：

你可以这样做：

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
        function cambiaData(){
            $('#pdf').attr("data", [[ @{'NEW_URL_WITH_NEW_DATA}]]+$("#data").val());
        }

        $(function(){
            $(".date").datepicker({
                todayBtn: "linked",
                language: "it",
                todayHighlight: true
            });

        });
    /*]]>*/
    </script>

和

<div class="row">
        <h5 style="color:red;">Seleziona data</h5>
        <div class="input-group input-group-prepend col-2">
            <span class="input-group-text far fa-calendar-alt"></span>
            <input type="text" class="form-control date" data-provide="datepicker" id="data" th:value="${#dates.format(#dates.createNow(), 'dd/MM/yyyy')}"></input>
        </div>
        <button type="button" class="btn btn-primary" th:text="#{conferma}" onclick="cambiaData();"></button>
</div>
<div class="row">
    <object class="col" th:data="@{URL}" type="application/pdf" height="800" width="800" id="pdf"></object>
</div>

【讨论】：