Как передать значение из Thymeleaf в вызов Ajax

Question

У меня есть эта таблица, перебирающая список журналов. Я хочу сделать ajax-вызов, чтобы при щелчке по определенной строке он брал идентификатор журнала, щелкнул по нему, получил конкретные данные / информацию журнала и вставил эту информацию в модальный режим. Мне нужна помощь с двумя вещами, во-первых, потому что это динамический URL, я получаю Unicode в URL вместо реального идентификатора. Я попытался добавить [[]] вокруг log.id, но это не работает. Вторая проблема в том, что я даже не уверен, что посылаю идентификатор журнала на вызов ajax. Может кто-нибудь, пожалуйста, дайте мне знать, если я на правильном пути, или как избавиться от Unicode и конвертировать идентификатор в URL?

<table class="table table-striped" data-toggle="table" data-show-toggle="true" data-classes="table-no-bordered" data-striped="true" data-search="true"  data-show-columns="true" data-pagination="true">
     <thead>
        <tr>
            <th>When</th>
            <th>Subject</th>
            <th>Notes</th>
            <th class="text-right"><a class="btn btn-default"><span class="fa fa-pencil"></span></a></th>
            <th class="text-right"><a class="trigger btn btn-default"><span class="fa fa-plus"></span></a></th>
        </tr>
     </thead>
     <tbody>
          <tr th:each="log : ${logs}">
              <td th:if="${log.time!=null}" th:text="${{#temporals.format(log.time,'MM/dd/yyyy HH:mm a')}}"></td>
              <td th:text="${log.subject}"></td>
              <td style="white-space: pre-wrap;" th:text="${log.notes}"></td>
              <td class="text-right"><a th:value="${log}" class="trigger-edit-log"><span class="fa fa-pencil"></span></a></td>
              <td class="text-right"><a th:href="@{|/delete/callLog/${log.id}|}"><span class="fa fa-trash"></span></a></td>
          </tr>
     </tbody>
</table>

Ajax-вызов внутри функции готовности документа:

        $(document).on('click', '.trigger-edit-log', function (event) {
            event.preventDefault();
            console.log($('a').attr('id'));
              $.ajax({
                 url:"/callLogs/${{callLog.id}}",
                 data: "id="+ $('a').attr('id'),
                 success: function(data){
                     $('#editLog').append(data);
                     $('#editLog').html(data);
                     $('#modal-edit-log').iziModal('open');
                 }
              });
        });

    @RequestMapping(value = "/callLog/{id}")
    public String task(@PathVariable("id")CallLog callLog, Model model){
        model.addAttribute("callLog",callLog);
        return "redirect:/callLogs/client/" + callLog.getClient().getId();
    }

Answer 1

Я не до конца понимаю вашу проблему. Исходя из того, что я понимаю, я пытаюсь ответить.

Вы можете использовать th:data на вашем td и установить там значение CallLog.id.

<td class="text-right"><a th:value="${log}"  th:data-calllogid= ="${CallLog.id}"class="trigger-edit-log"><span class="fa fa-pencil"></span></a></td>

Теперь в вашем javascript вы можете получить это значение, как показано ниже.

$(event.relatedTarget).data("calllogid");

Надеюсь, это поможет.

Answer 2

Измените строку в вашем коде:

<td class="text-right"><a th:value="${log}" class="trigger-edit-log"><span class="fa fa- pencil"></span></a></td>

Со следующим:

<td class="text-right"><a href="#" class="trigger-edit-log" th:data-logId="${log.id}" onclick="getLogDetailsForId(this.getAttribute('data-logId'));"><span class="fa fa-pencil"></span></a></td>

И попробуйте этот JavaScript:

function getLogDetailsForId(logId) {
	$.ajax({
	   url:"/callLogs/" + logId,
	   success: function(result){
		   $('#editLog').append(result);
		   $('#editLog').html(result);
		   $('#modal-edit-log').iziModal('open');
	}});
}

PS Попробуйте и убедитесь, что URL-адрес правильный / callLogs / и т. Д. Также проверьте, если вам нужно сообщение / получить ETC ...

Таким образом, вы изменяете html / thymeleaf для передачи идентификатора журнала в функцию javascript getLogDetailsForId (....), и это место, где вы делаете свой вызов ajax.

Как только вы заработаете, я уверен, что вы можете его почистить ...