Как использовать тег HTML-шаблона с jQuery?
В моем коде происходит какая-то странная ошибка. Я хочу использовать тег шаблона HTML с jQuery, потому что весь остальной мой код - это jQuery, но я нашел только примеры JavaScript с ним. Я пробовал «перевести» с JavaScript на jQuery, это то, что я придумал.
$.getJSON( "../Controller/ControllerBookstore.php?show_books=true", function( data ) {
$.each( data, function( index, value ) {
// let clone = document.getElementById('table-template').content.cloneNode(true);
// clone.querySelector('#id').innerText = value.id;
// clone.querySelector('#author').innerText = value.author;
// clone.querySelector('#title').innerText = value.title;
// clone.querySelector('#isbn').innerText = value.isbn;
let clone = $("#table-template").clone(true);
$("#id",clone).text(value.id);
$("#author",clone).text(value.author);
$("#title",clone).text(value.title);
$("#isbn",clone).text(value.isbn);
//$(".container").append(clone);
$("#header").append(clone);
});
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container">
<div id = "myAlert" class = "alert alert-success collapse">
<span id = "alert-text"></span>
<a id = "alert-close" class = "close" href = "#" aria-label = "Close">×</a>
</div>
<div class = "row" id = "header">
<div class = "col"><h5>ID</h5></div>
<div class = "col"><h5>Author</h5></div>
<div class = "col"><h5>Title</h5></div>
<div class = "col"><h5>ISBN</h5></div>
<div class = "col"><h5>Action</h5></div>
</div>
<template id = "table-template">
<div class = "row">
<div class = "col" id = "id"></div>
<div class = "col" id = "author"></div>
<div class = "col" id = "title"></div>
<div class = "col" id = "isbn"></div>
<div class = "col buttons">
<button class='btn btn-info edit'>Edit</button>
<button class='btn btn-danger delete'>Delete</button>
</div>
</div>
</template>
<div class = "row justify-content-center" >
<form action = "" class = "col-4">
<input id = "id-box" type = "hidden" name = "id">
<div class = "form-group row">
<label class = "col-4">Author</label>
<input id = "author-box" type = "text" class = "form-control col-8" name = "author" placeholder = "Enter the author of the book">
</div>
<div class = "form-group row">
<label class = "col-4">Title</label>
<input id = "title-box" type = "text" class = "form-control col-8" name = "title" placeholder = "Enter the title of the book">
</div>
<div class = "form-group row">
<label class = "col-4">ISBN</label>
<input id = "isbn-box" type = "text" class = "form-control col-8" name = "isbn" placeholder = "Enter the ISBN of the book">
</div>
<div class = "form-group row">
<button id = "submit" type = "submit" name = "save" class = "btn btn-primary col-12">Save</button>
</div>
</form>
</div>
</div>По какой-то причине закомментированный мной код JavaScript работает, но он правильно добавляет только «clone» в мой «.container» на следующей строке под формой. Однако я хочу прикрепить его к моему «.header», но он прикрепляется рядом с заголовком, а не под ним. Код jQuery ничего не делает, он никуда не прикрепляет мой «клон». Надеюсь, я был ясен. Не могли бы вы помочь мне найти причину ошибок?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Необходимо внести несколько изменений:
- У значения
idшаблона есть дефис, который необходимо экранировать в селекторе. В строковом литерале необходимы две обратные косые черты; первый нужен для того, чтобы на самом деле получить в строке обратную косую черту. Остающийся будет интерпретирован селектором. - Клонируйте элемент строки в шаблоне, а не сам шаблон. Однако jQuery не будет знать о DOM в теге
template, поэтому вы можете просто взять содержимое HTML вместо клонирования, а затем снова превратить его в объект jQuery (который создает для него DOM). - Вставьте клон непосредственно перед шаблоном
Код:
let clone = $($("#table\\-template").html()); // <--------
$("#id",clone).text(value.id);
$("#author",clone).text(value.author);
$("#title",clone).text(value.title);
$("#isbn",clone).text(value.isbn);
$("#table-template").before(clone); // <------
Как отмечали другие, атрибуты id должны иметь уникальные значения, поэтому контент вашего шаблона не может иметь свойства id (поскольку он клонируется). Вместо этого используйте атрибуты class.
Большое спасибо, это было очень полезно. :) Я также изменил "id" -s в шаблоне на "class" -es, теперь он работает правильно. :)
ошибка jQuery
Здравствуй, друг. Вы клонируете неправильный элемент, потому что вы создали клон template с идентификатором #table-template. Пожалуйста, внесите это изменение в свой код:
...
let clone = $("#table-template").html();
...
Во-вторых, клонированный код появляется рядом с #header, а не под ним, потому что вы используете класс .row. Я предлагаю создать div ниже #header с id = "body" и добавить внутрь новый контент:
...
// $("#header").append(clone);
-> $("#body").append(clone);
...
Спасибо за Ваш ответ. :) При этом появляются только строки, а значения - нет. Другой комментатор был прав, jQuery не может захватить шаблон, я должен использовать его версию выбора.
Извини за это. Я забыл, когда использование $ ("# table-template"). Html () возвращает только простой текст html, вам нужно использовать jQuery для синтаксического анализа как действительный объект jQuery, а все остальное будет работать. $ ("# шаблон-таблицы"). html () становится $ ($ ("# шаблон-таблицы"). html ()). Другой автор опубликовал такое же решение.
Обратите внимание, что вы не можете повторять идентификаторы на странице. Они уникальны по определению