Подключение шаблона к скрипту

@Ваник Хачатрян · Регистрация: 29.10.2013

Студворк — интернет-сервис помощи студентам

Есть ajax кнопка Показать еще, при нажатии на ней открываются посты.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
$(document).ready(function(){
 
/* Переменная-флаг для отслеживания того, происходит ли в данный момент ajax-запрос. В самом начале даем ей значение false, т.е. запрос не в процессе выполнения */    
var inProgress = false;
/* С какой статьи надо делать выборку из базы при ajax-запросе */ 
var startFrom = 10;
 
    /* Используйте вариант $('#more').click(function() для того, чтобы дать пользователю возможность управлять процессом, кликая по кнопке "Дальше" под блоком статей (см. файл index.php) */
    $('#more').click(function() {
        
        /* Если высота окна + высота прокрутки больше или равны высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос */
        if($(window).scrollTop() + $(window).height() >= $(document).height() && !inProgress) {
    
        $.ajax({            
            /* адрес файла-обработчика запроса */
            url: '/handlers/tenpost.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){
            
            /* Отбираем по идентификатору блок со статьями и дозаполняем его новыми данными */    
            $("#post-item").append("<p><b>" + data.title + "</b><br />" + data.text + "</p>");
            });
            
            /* По факту окончания запроса снова меняем значение флага на false */
            inProgress = false;
            // Увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы
            startFrom += 10;
            }});   
        }
    });
});

Это

JavaScript
1
2
3
            /* Отбираем по идентификатору блок со статьями и дозаполняем его новыми данными */    
            $("#post-item").append("<p><b>" + data.title + "</b><br />" + data.text + "</p>");
            });

Вид поста как он будет выводится. Как мне туда впихнуть мой html шаблон. (P.S. Использую Twig)

@Para bellum · 06.11.2014, 18:24

Ваник Хачатрян, а какой шаблон? Он большой?

@Ваник Хачатрян · 06.11.2014, 19:23 **[ТС]**

Нет, просто вид одного поста на главной, как тут http://gabl.ga/

Добавлено через 40 минут
Сможете помочь?

@Para bellum · 07.11.2014, 06:31

Ваник Хачатрян, пожалуйста, покажите сам код. Тут, я думаю, лучше использовать clone().

@Ваник Хачатрян · 07.11.2014, 18:34 **[ТС]**

Пример можно?

Добавлено через 24 секунды

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{% extends 'main.html' %}
{% block title %}
{% if catsmenu %}{% for cat in cats %}{{cat.name}}{% endfor %}{% endif %}{% endblock %}
 
{% block content %}
 
{% if info_page %}
<div class="desccat "><strong>Информация о категории: </strong>{{info_page}}</div>
{% endif %}
 
{% if posts == false %}
<div class="post-item "><h1>В данной категории нет записей!</h1></div>
{% endif %}
 
<div id="content">
    {% for post in posts %}
<div class="post-item ">
<h2><a href="/s.php?id={{ post.id }}">{{ post.name }}</a></h2>
<div class="img-conteiner">
<img src="{{ post.image }}" />
</div>
    <p>{{ post.mini_desc|raw }}</p>
    <div class="clear"></div>
    <div class="post-info">
    <span class="date_add">{{ post.date }}</span>
    <span style="background: #0ba0dd;" class="post-rub"><a href="/cat.php?id={{ post.cat }}">Категория: {{ post.cname }}</a></span>
    <span class="views">Просмотров: {{ post.view }}</span>
 {% if auth == true %}
<h2>
    <button class="butdel"><a href="/handlers/delpost.php?id={{ post.id }}">Удалить</button></a>
    <button class="butdel"><a href="/editpost.php?id={{ post.id }}">Редактировать</a></button>
</h2>
{% endif %}
</div>
</div>
{% endfor %}
<button id="more">Дальше</button>
 
</div>
{% endblock %}

Добавлено через 5 часов 34 минуты
Я кинул код уже

@Para bellum · 08.11.2014, 09:56

Ваник Хачатрян, делайте что-то сродни этому:

JavaScript
1
2
// Получаем копию блока с информацией
var postItem = $("#post-item").clone();

Потом делайте:

JavaScript
1
postItem.find('h2').html('Сюда код или текст для заголовка');

Чтобы найти заголовок и вставить в него текст.
По аналогии найдите все элементы, куда нужно подставить данные. В конце вставьте копию в блок с идентификатором "content":

JavaScript
1
$("#content").append( postItem );

На http://jquery.page2page.ru Вы сможете найти все функции работы с jQuery.

@Ваник Хачатрян · 09.11.2014, 14:30 **[ТС]**

Не совсем понял что делать?

@Ваник Хачатрян · 04.12.2014, 16:51 **[ТС]**

Не получается ничего:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 <script type="text/javascript" >$(document).ready(function(){
 
/* Переменная-флаг для отслеживания того, происходит ли в данный момент ajax-запрос. В самом начале даем ей значение false, т.е. запрос не в процессе выполнения */    
var inProgress = false;
/* С какой статьи надо делать выборку из базы при ajax-запросе */ 
var startFrom = 10;
 
    /* Используйте вариант $('#more').click(function() для того, чтобы дать пользователю возможность управлять процессом, кликая по кнопке "Дальше" под блоком статей (см. файл index.php) */
    $('#more').click(function() {
        
        /* Если высота окна + высота прокрутки больше или равны высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос */
        if($(window).scrollTop() + $(window).height() >= $(document).height() && !inProgress) {
    
        $.ajax({            
            /* адрес файла-обработчика запроса */
            url: '../handlers/scroolload.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){
            
            /* Отбираем по идентификатору блок со статьями и дозаполняем его новыми данными */    
                   var postItem = $("#post-item").clone(); 
                   $("#content").append( postItem );
           });
            
            /* По факту окончания запроса снова меняем значение флага на false */
            inProgress = false;
            // Увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы
            startFrom += 10;
            }});   
        }
    });
});</script>

Помогите

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Para bellum 5755 / 4134 / 1508 Регистрация: 06.01.2011 Сообщений: 11,276
	06.11.2014, 18:24
	Ваник Хачатрян, а какой шаблон? Он большой? 0

@Ваник Хачатрян 3 / 3 / 2 Регистрация: 29.10.2013 Сообщений: 230
	06.11.2014, 19:23 [ТС]
	Нет, просто вид одного поста на главной, как тут http://gabl.ga/ Добавлено через 40 минут Сможете помочь? 0

@Para bellum 5755 / 4134 / 1508 Регистрация: 06.01.2011 Сообщений: 11,276
	07.11.2014, 06:31
	Ваник Хачатрян, пожалуйста, покажите сам код. Тут, я думаю, лучше использовать clone(). 1

@Ваник Хачатрян 3 / 3 / 2 Регистрация: 29.10.2013 Сообщений: 230
	09.11.2014, 14:30 [ТС]
	Не совсем понял что делать? 0