jQuery append не добавляет <tr> и <td>
123
11 ноября 2021, 03:50
делаю подгрузку контента через ajax, всё вроде бы шло хорошо, но когда пытаюсь вывести всё через
$("#articles").append("...")
Происходит странное, всё, что там есть - выводится, кроме тегов <tr> и <td>, единственное, что смог найти это
.on("...")
но как именно его использовать в данном случае - не представляю.
$(document).ready(function(){
/* Переменная-флаг для отслеживания того, происходит ли в данный момент ajax-запрос. В самом начале даем ей значение false, т.е. запрос не в процессе выполнения */
var inProgress = false;
/* С какой статьи надо делать выборку из базы при ajax-запросе */
var startFrom = 30;
/* Используйте вариант $('#more').click(function() для того, чтобы дать пользователю возможность управлять процессом, кликая по кнопке "Дальше" под блоком статей (см. файл index.php) */
window.onscroll = function(ev) {
/* Если высота окна + высота прокрутки больше или равны высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос */
if((window.innerHeight + window.pageYOffset ) >= document.body.offsetHeight && !inProgress) {
$.ajax({
/* адрес файла-обработчика запроса */
url: 'obrabotchik.php',
/* метод отправки данных */
method: 'POST',
/* данные, которые мы передаем в файл-обработчик */
data: {"startFrom" : startFrom},
/* что нужно сделать до отправки запрса */
beforeSend: function() {
/* меняем значение флага на true, т.е. запрос сейчас в процессе выполнения */
inProgress = true;}
/* что нужно сделать по факту выполнения запроса */
}).done(function(data){
/* Преобразуем результат, пришедший от обработчика - преобразуем json-строку обратно в массив */
data = jQuery.parseJSON(data);
/* Если массив не пуст (т.е. статьи там есть) */
if (data.length > 0) {
/* Делаем проход по каждому результату, оказвашемуся в массиве,
где в index попадает индекс текущего элемента массива, а в data - сама статья */
$.each(data, function(index, data){
/* Отбираем по идентификатору блок со статьями и дозаполняем его новыми данными */
$("#articles").append(" <script>\n" +
" jQuery(document).ready(function($){ //когда страница прогрузилась\n" +
" $(function () {\n" +
" $('#form" + data.id + "').submit(function (e) {\n" +
" e.preventDefault();\n" +
" var data = $(this).serialize();\n" +
" $.ajax({\n" +
" type: \"POST\",\n" +
" url: \"favorit.php\",\n" +
" data: data,\n" +
" success: function (result) {\n" +
" $('#result" + data.id + "').html(result);\n" +
" }\n" +
" });\n" +
" });\n" +
" });\n" +
" });\n" +
"</script>" +
"<tr>" +
" <th scope=\"row\"><img src=\"images/no_photo.png\" alt=\"no_photo\" width=\"70\" HEIGHT=\"70\"></th>" +
" <td>" +
" <div class=\"badge badge-danger\">SELLER</div>" +
" <div class=\"badge badge-success\">BUYER</div>" +
" </td>" +
" <td><a href=\"http://$_SERVER['HTTP_HOST']/go.php?rid='.$market['id'].'\" target=\"_blank\">" + data.subject + "</a></td>" +
" <td><div style=\"color: black;\">" + data.message + "</div></td>" +
" <td>" +
" <div class=\"container\">" +
" <div class=\"row\" style=\"color: black;\">" +
" <div class=\"col-2 text-left\">" +
" <i class=\"fa fa-eye\">" + data.view + "</i>" +
" </div>" +
" <div class=\"col-10 text-right\">" +
" a minute ago" +
" </div>" +
" </div>" +
" </div" +
" <hr class=\"p-1 m-1\">" +
" <div class=\"container\">" +
" <form id=\"form" + data.id + "\">" +
" <div class=\"row\"><div class=\"col-12\">" +
" <a href=\"#nul\" onclick=\"window.open('https://www.facebook.com/sharer.php?u=https://myadnote.com/go.php?rid='"+data.id+"\',\\'\\',\\'Toolbar=1,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0,Width=550,Height=400');\"><button class=\"btn btn-icon btn-icon-circle btn-indigo btn-icon-style-3\"><span class=\"btn-icon-wrap\"><i class=\"fab fa-facebook\"></i></span></button></a>\n" +
" <a href=\"#nul\" onclick=\"window.open('https://twitter.com/intent/tweet?url=https://myadnote.com/go.php?rid="+data.id+"\',\'\\',\\'Toolbar=1,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0,Width=550,Height=400');\"><button class=\"btn btn-icon btn-icon-circle btn-indigo btn-icon-style-3\"><span class=\"btn-icon-wrap\"><i class=\"fab fa-twitter\"></i></span></button></a>\n" +
" <a href=\"#nul\" onclick=\"window.open('https://www.linkedin.com/cws/share?url=https://myadnote.com/go.php?rid="+data.id+"\',\'\\',\\'Toolbar=1,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0,Width=550,Height=400');\"><button class=\"btn btn-icon btn-icon-circle btn-indigo btn-icon-style-3\"><span class=\"btn-icon-wrap\"><i class=\"fab fa-linkedin\"></i></span></button></a>\n" +
" <button class=\"btn btn-icon btn-success btn-icon-style-2\">\n" +
" <script src=\"https://kit.fontawesome.com/e8537066ab.js\" crossorigin=\"anonymous\"></script>\n" +
" <span id=\"result" + data.id + "\">';\n" +
" <i class=\"far fa-star\"></i>\n" +
" </span>\n" +
" </button>\n" +
" <input type=\"hidden\" name=\"id\" value=\"" + data.id + "\" >\n" +
" </form>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
" </td>\n" +
"</tr>\n");
});
/* По факту окончания запроса снова меняем значение флага на false */
inProgress = false;
// Увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы
startFrom += 30;
}});
};
};
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<th scope="row"><img src="images/no_photo.png" alt="no_photo" width="70" HEIGHT="70"></th>
<td>
<div class="badge badge-danger">SELLER</div>
<div class="badge badge-success">BUYER</div>
</td>
<td><a href="http://$_SERVER['HTTP_HOST']/go.php?rid='.$market['id'].'" target="_blank">'.$market['subject'].'</a></td>
<td><div style="color: black;">'.$market['message'].'</div></td>
<td>
<div class="container">
<div class="row" style="color: black;">
<div class="col-2 text-left">
<i class="fa fa-eye">'.$market['view'].'</i>
</div>
<div class="col-10 text-right">
a minute ago
</div>
</div>
</div>
<hr class="p-1 m-1">
<div class="container">
<form id="form'.$market['id'].'">
<div class="row"><div class="col-12">
<a href="#nul" onclick="window.open('https://www.facebook.com/sharer.php?u=https://myadnote.com/go.php?rid='.$market['id'].'\',\'\',\'Toolbar=1,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0,Width=550,Height=400');"><button class="btn btn-icon btn-icon-circle btn-indigo btn-icon-style-3"><span class="btn-icon-wrap"><i class="fab fa-facebook"></i></span></button></a>
<a href="#nul" onclick="window.open('https://twitter.com/intent/tweet?url=https://myadnote.com/go.php?rid='.$market['id'].'\',\'\',\'Toolbar=1,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0,Width=550,Height=400');"><button class="btn btn-icon btn-icon-circle btn-indigo btn-icon-style-3"><span class="btn-icon-wrap"><i class="fab fa-twitter"></i></span></button></a>
<a href="#nul" onclick="window.open('https://www.linkedin.com/cws/share?url=https://myadnote.com/go.php?rid='.$market['id'].'\',\'\',\'Toolbar=1,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0,Width=550,Height=400');"><button class="btn btn-icon btn-icon-circle btn-indigo btn-icon-style-3"><span class="btn-icon-wrap"><i class="fab fa-linkedin"></i></span></button></a>
<button class="btn btn-icon btn-success btn-icon-style-2">
<script src="https://kit.fontawesome.com/e8537066ab.js" crossorigin="anonymous"></script>
<span id="result'.$market['id'].'">';
<i class="far fa-star"></i>
</span>
</button>
<input type="hidden" name="id" value="'.$market['id'].'" >
</form>
</div>
</div>
</div>
</td>
</tr>Answer 1
Добавьте ваш код, скорее всего в нём находится ошибка.
В примере ниже видно, что всё работает исправно.
let last = 4;
$('#load').on('click', function(){
let newtable = '';
for(let i = 0; i<4; i++){
last++;
newtable += '<td>'+(last)+'</td>';
}
$('table').append('<tr>'+newtable+'</tr>');
});table, td {
border: 1px solid #999;
}
td {
text-align: center;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table width="100%">
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
</table>
<input id="load" type="button" value="Загрузить ещё">Ужс..
Если уже хотите перебрать массив циклом, то используйте тогда уже
for, вместо$.each()..Зачем добавлять скрипты в DOM, ещё и через цикл?! Это совсем дикость, имхо.
"шаблон".. В JS\JQ не обязательно использоват только двойные кавычки
", можно использовать одинарные или обратную кавычку.
Пример с одинарной кавычкой:
$('body').html('<div class="col-2 text-left">\
<i class="fa fa-eye">'+data.view+'</i>\
</div>');
Пример с обратной кавычкой:
$('body').html(`<div class="col-2 text-left">
<i class="fa fa-eye">${data.view}</i>
</div>`);
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47554 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30492 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23626 visits
- Как через css изменить цвет png изображения? 10347 visits
- Blob video url download 9956 visits
- Php curl запрос через прокси с авторизацией 9206 visits
- Работа с captcha vk api 8088 visits
© "hostciti.net" 18.11.2024 | 19:27