@id_aspin
Good guy

Почему у меня при обновлении страницы чз AJAX(подгрузка контента) некоторые записи сливаются?

3 файла index.php
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#cont').scrollPagination({

		nop     : 10, // Количество запрашиваемых из БД записей
		offset  : 0, // Начальное смещение в количестве запрашиваемых данных
		error   : 'Записей больше нет!', // оповещение при отсутствии данных в БД
		delay   : 500, // Задержка перед загрузкой данных
		scroll  : true // Если true то записи будут подгружаться при прокрутке странице, иначе только при нажатии на кнопку 
		
	});
});
-->
</script>
</head><body>
<div id=cont></div>
</body>
</html>

javascript.js
(function($) {

	$.fn.scrollPagination = function(options) {
		
		var settings = { 
			nop     : 10, // Количество запрашиваемых из БД записей
			offset  : 0, // Начальное смещение в количестве запрашиваемых данных
			error   : 'Записей больше нет!', // оповещение при отсутствии данных в БД
			delay   : 500, // Задержка перед загрузкой данных
			scroll  : true // Если true то записи будут подгружаться при прокрутке странице, иначе только при нажатии на кнопку 
		}
		
		// Включение опции для плагина
		if(options) {
			$.extend(settings, options);
		}
		
		return this.each(function() {		
			
			$this = $(this);
			$settings = settings;
			var offset = $settings.offset;
			var busy = false; // переменная для обозначения происходящего процесса
			
			// Текст кнопки, на основе параметров
			if($settings.scroll == true) $initmessage = 'loading';
			else $initmessage = 'click to load';
			$this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>');
			
			// Функция AJAX запроса
			function getData() {
				
				// Формируется POST запрос к ajax.php
				$.post('ajax.php', {
						
					action        : 'scrollpagination',
				    number        : $settings.nop,
				    offset        : offset,
					    
				}, function(data) {
						
					// Информируем пользователя
					$this.find('.loading-bar').html($initmessage);
					
					// Если возвращенные данные пусты то сообщаем об этом	
					if(data == "") { 
						$this.find('.loading-bar').html($settings.error);	
					}
					else {
						
						// Смещение увеличивается
					    offset = offset+$settings.nop; 
						    
						// Добавление полученных данных в DIV content
					   	$this.find('.content').append(data);
						
						// Процесс завершен	
						busy = false;
					}	
						
				});
					
			}	
			
			getData(); // Запуск функции загрузки данных в первый раз
			
			// Если прокрутка включена
			if($settings.scroll == true) {
				// .. и пользователь прокручивает страницу
				$(window).scroll(function() {
					
					// Проверяем пользователя, находится ли он в нижней части страницы
					if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {
						
						// Идет процесс
						busy = true;
						
						// Сообщить пользователю что идет загрузка данных
						$this.find('.loading-bar').html('loading');
						
						// Запустить функцию для выборки данных с установленной задержкой
						// Это полезно, если у вас есть контент в футере
						setTimeout(function() {
							
							getData();
							
						}, $settings.delay);
							
					}	
				});
			}
			
			// кроме того конент может быть загружен нажатием на кнопку
			$this.find('.loading-bar').click(function() {
			
				if(busy == false) {
					busy = true;
					getData();
				}
			
			});
			
		});
	}

})(jQuery);

и ajax.php
<?php
mysql_connect('la.la.la.la', 'luuser', '123456963') or die('Проблема с подключением к серверу');
mysql_select_db('mydb');
$offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();
$postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();
$run = mysql_query("SELECT * FROM vislushano_letters ORDER BY id DESC LIMIT ".$postnumbers." OFFSET ".$offset);
while($row = mysql_fetch_array($run)) {
if($row[5]==1)
{
	if (strlen($row[4])>3)
	{
	$image="><center><img style='width:800px;margin:0px;' src='".$row[4]."'></center>";
	}else 
	{$image="class=logo style='opacity:0.5;-webkit-filter: blur(4px);'><strong>В<or>ы</or><gr>с</gr><bl>л</bl>у<or>ш</or><gr>а</gr><bl>н</bl>о</strong>";}
	$author = $row[2];
	$id = $row[0];
	$message = strip_tags($row[1],"<br><img><p></p>");
		if ($row[3]!=date('o-m-d'))
	{$date = $row[3];
	}
	else
	{$date= "Сегодня";
	}
    print "<br>
	<table class=content cellpadding=0 cellspacing=0 border=0>
	<tr><td ".$image."</td></tr>
	<tr><td class=message>$message</td></tr>
	<tr><td class=info><strong>Добавил: $author | Дата: $date</strong><div onclick='gobyid($id);' class=comment><noscript><a href=''><img src='cm.png'</a></noscript></div></td></tr>
	</table>";
}
}
?>

До прокрутки страницы отображаются записи без изображений нормально.
5bee8fb52e26428485d817b50954a17b.png
После подгрузки новых записей в одну запись (в тело таблицы) добавляется еще несколько постов.
6fdee30d5a97464cb84a17af0b71a5c2.png

Почему оно не может нормально отображаться?
  • Вопрос задан
  • 2935 просмотров
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Зачем нам вот эти портянки? В реальности нужно:
— содержание ответа на AJAX запрос (в любом браузере есть Network)
— кусок дерева до отправки запроса и построенного после ответа с 2-мя-3-мя блоками (в любом браузере есть анализатор кода)
— строки CSS, отвечающего за эти блоки
— кусок скрипта, показывающий, как и куда вставляется этот ответ

Или можно дать просто ссылку на проект, если не в состоянии подготовить вопрос.
Вопросы, знаете ли, задавать нужно уметь. Да.

id_aspin, вот вам прямая подсказка:
JS:
$this.append('<div class="content"></div>...');
...
$this.find('.content').append(data);

PHP:
<table class=content cellpadding=0 cellspacing=0 border=0>

Догадались?
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
кривая верстка
Ответ написан
Комментировать
@mayorovp
Одну ошибку вам уже нашел @Petroveg, вот вам вторая.
offset увеличивается только после успешного получения данных от сервера, а повторный вызов getData может произойти раньше. В таком случае на сервер отправится два запроса с одинаковым offset.

По-хорошему, надо еще до ajax-запроса заранее создать элемент, куда будет записываться результат, и запомнить ссылку на него в переменной. Offset же следует увеличивать сразу после запроса, не дожидаясь его окончания.
Ответ написан
Комментировать
@id_aspin Автор вопроса
Good guy
Спасиб, но скрипт я только нашел и добавил к себе. Посмотрим.. если не выйдет буду дальше искать
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы