1

делаю подгрузку контента через 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>

2
  • А что выводит console.log( "то, что пойдет в append" ) ? Если оно правильное, метки ajax и json можно убрать, и разбираться со вставкой) 15 ноя 2019 в 14:46
  • Да, как я понимаю, эти метки не нужны, потому что выводится всё, кроме тегов таблицы 15 ноя 2019 в 14:56

1 ответ 1

2

Добавьте ваш код, скорее всего в нём находится ошибка.
В примере ниже видно, что всё работает исправно.

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="Загрузить ещё">


Ужс..

  1. Если уже хотите перебрать массив циклом, то используйте тогда уже for, вместо $.each()..

  2. Зачем добавлять скрипты в DOM, ещё и через цикл?! Это совсем дикость, имхо.

  3. "шаблон".. В 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>`);
3
  • Добавил в вопрос, единственное, не добавил обработчик PHP, но там просто вывод с БД 15 ноя 2019 в 15:09
  • @Apelsin2020, поправил ответ. Честно сказать, как по мне, так проще переписать вывод, чем искать там ошибку.
    – De.Minov
    15 ноя 2019 в 15:23
  • Использовал пример: codeharmony.ru/materials/136 Может есть другой пример для использования? 15 ноя 2019 в 15:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.