#javascript #jquery
Вопрос:
после успеха ajax я должен обновить некоторую часть заголовка.
Я извлекаю текущее название td как:
//with this I could get the current td title
let tdTitle = $('.amenity-review-table').find("td[data-unitid='" resp.unit.id "']").attr('title');
и утешительный этот заголовок дает:
<div class='unit-title'><strong>Unit: 101</strong></div><span class=''>Washer/Dryer = <span>1</span></span></br><div class='sm-box unit-note-color d-inline-block'></div><span class='unit-note-popup'>note added 3</span>
Теперь, после успеха ajax, я получу новое обновленное название, и к нему можно будет получить доступ через:
resp.unit.unit_note
, теперь, как только я получу обновление, я должен обновить заметку, показанную в названии td. Итак, в приведенном выше случае:
Я должен обновить текст внутри unit-note-popup
класса до новой заметки, которую можно было бы получить resp.unit.note
. Таким образом, окончательное название выглядит так:
<div class='unit-title'><strong>Unit: 101</strong></div><span class=''>Washer/Dryer = <span>1</span></span></br><div class='sm-box unit-note-color d-inline-block'></div><span class='unit-note-popup'>" resp.unit.unit_note "</span> //my syntax could be wrong here, but this is what I needed
Обновить:
Вот jsfiddle для воспроизведения сценария:
Комментарии:
1. Вы хотите сказать
title
, что атрибут содержит HTML?2. да, я имею в виду этот атрибут заголовка
3. Является
unit-note-popup
ли уникальным атрибутом класса? Потому что это то, чего вы в основном хотите, уникальный способ определить элемент, который вы хотите выбрать.
Ответ №1:
Вам нужно будет разобрать HTML-код в title
атрибуте на то, с чем вы можете работать (например jQuery
, с объектом).
Затем вы можете манипулировать .unit-note-popup
текстом и записывать HTML обратно в атрибут
// Mock data
const resp = {
unit: {
id: 1,
note: "Note added 4!"
}
}
const td = $(`.amenity-review-table td[data-unitid="${resp.unit.id}"]`)
const title = td.attr("title")
const titleEl = $(`<div>${title}</div>`) // parse into an element
titleEl.find(".unit-note-popup").text(resp.unit.note)
td.attr("title", titleEl.html())
/* Make the title attribute visible */
td[data-unitid]:after {
display: block;
color: red;
content: attr(title);
margin: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="amenity-review-table">
<tr>
<td data-unitid="1" title="<div class='unit-title'><strong>Unit: 101</strong></div><span class=''>Washer/Dryer = <span>1</span></span><br/><div class='sm-box unit-note-color d-inline-block'></div><span class='unit-note-popup'>note added 3</span>">
Check out my super awesome HTML title
</td>
</tr>
</table>
Здесь я завернул title
HTML-текст в a <div>
так, чтобы он был инкапсулирован в один родительский элемент. Таким образом, вы можете вернуть внутренний HTML-код для записи нового значения.
Комментарии:
1. Я не знаю, что не так в моем случае, но я не могу заставить это работать, не могли бы вы, пожалуйста, проверить этот jsfiddle? jsfiddle.net/a3t7yfe2/1 и сделайте его обновленным с новым названием после нажатия кнопки
2. моя вина, что это было из-за опечатки идентификатора единицы вместо идентификатора единицы