JSToolbox - все о JavaScript » AJAX

Реализация бесконечной прокрутки на jQuery

admin — Sat, 18 Apr 2009 21:44:49 +0000

Всем вам должны быть хорошо известны интерфейсы просмотра лент новостей, записей блогов, в которых новые записи подгружаются по мере чтения. Новые данные подгружаются в тот момент, когда полоса прокрутки достигает самого низа. Хорошим примером такого интерфейса является Google Reader, а также сайт DZone. Сегодня я покажу, как можно сделать такой интерфейс при помощи jQuery. Приложение будет имитировать работу блога, в котором при загрузке страницы, посредством AJAX будут загружаться первые 10 записей, а остальные будут подгружаться по мере чтения.

Начнем с создания простой HTML страницы, в теле которой имеется всего лишь один div – в него будут подгружаться записи. В этот div добавим элемент

, для того, чтобы использовать его как индикатора ожидания.




	

	




	
		Loading....

Здесь также подключаем скрипт jquery.js, а также стили для блога и записей.

Далее переходим к созданию скрипта, вся функциональность которого будет заключена в объект engine:

var engine = {
	posts : [],
	target : null,
	busy : false,
	count : 5
}

В переменных объекта engine хранятся различные параметры работы скрипта – количество подгружаемых за один раз записей (count), элемент, в который эти записи должны добавляться (target), состояние скрипта (busy), и массив записей (post).

Инициализация скрипта будет производиться функцией init:

init : function(posts, target){
	if (!target)
		return;

	this.target = $(target);

	this.append(posts);

	var that = this;
	$(window).scroll(function(){
		if ($(document).height() - $(window).height() <= $(window).scrollTop() + 50) {
			that.scrollPosition = $(window).scrollTop();
			that.get();
		}
	});
}

Функция принимает два параметра - массив записей и элемент, в который записи должны быть добавлены. В конце функции добавляется обработчик события onscroll для объекта window. Его задача - определять положение полосы прокрутки, и если она находится в крайнем нижнем положении, то вызывать функцию подгрузки записей get(). Фунция get() отправляет AJAX запрос на сервер и, получая в ответ записи блога, добавляет их в элемент target:

get : function() {
	if (!this.target || this.busy) return;

	if (this.posts && this.posts.length) {
		var lastId = this.posts[this.posts.length-1].id;
	} else {
		var lastId = 0;
	}

	this.setBusy(true);

	var that = this;
	$.getJSON('getposts.php', {count:this.count, last:lastId},
		function(data){
			if (data.length > 0) {
				that.append(data);
			}
			that.setBusy(false);
		}
	);
}

Данные о всех записях, которые загружаются с сервера, хранятся в переменной engine.posts. Перед отправкой очередного запроса на сервер, функция get() получает id последнего элемента в этом списке (lastId), для того чтобы передать его в параметрах запроса. Это нужно для того, чтобы серверный скрипт знал, какие записи уже получены, и какие элементы нужно отправить.

Как в функции init(), так и в функции get(), для отображения записей используется функция append(), которая в связке с render() создает HTML код записи и добавляет его в целевой элемент (target):

append : function(posts){
	posts = (posts instanceof Array) ? posts : [];
	this.posts = this.posts.concat(posts);

	for (var i=0, len = posts.length; i < len; i++) {
		this.target.append(this.render(posts[i]));
	}

	if (this.scrollPosition !== undefined && this.scrollPosition !== null) {
		$(window).scrollTop(this.scrollPosition);
	}
},

render : function(obj){
	var xhtml = '';
	if (obj.title) {
		xhtml += ''+obj.title+'';
	}
	if (obj.posted_at) {
		xhtml += 'Posted on: '+obj.posted_at+'';
	}
	if (obj.comments_count) {
		xhtml += 'Comments: ' + obj.comments_count + '';
	}
	xhtml += '' + obj.content + '';
	xhtml += '';

	return xhtml;
}

Еще стоит упомянуть одну небольшую деталь: в обработчике события onscroll я сохраняя позицию полосы прокрутки, чтобы потом, после добавления новых записей, восстановить её. Это нужно для того, чтобы положение полосы прокрутки не изменялось, при добавлении новых записей в конец списка:

// сохраняем значение в обработчике onscroll
that.scrollPosition = $(window).scrollTop();

.......

// восстанавливаем значение в функции append
if (this.scrollPosition !== undefined && this.scrollPosition !== null) {
	$(window).scrollTop(this.scrollPosition);
}

Теперь, после того, как скрипт создан, можно использовать его. Так же как и для большинства скриптов jQuery, добавляем код инициализации в фукнцию ready():

$(document).ready(function(){
	engine.init(null, $("#blog"));
	engine.get();
});

Вот пожалуй и все описание скрипта, как видите он совсем не сложный. Демо приложения можно посмотреть здесь: смотреть демо. Полностью скрипт доступен на github.

Управление табличными данными при помощи jQuery

admin — Thu, 22 Jan 2009 15:33:57 +0000

Update: Внимание! Эта статья устаревшая, а плагин, который здесь используется уже не поддерживается автором и имеет неисправленные ошибки.

В одной из прошлых статей я писал о том, как сделать текст на странице динамически редактируемым. Там был представлен метод редактирования при помощи плагина jEditable. Таким образом можно динамически редактировать любой блок текста на странице. Однако если речь идет о табличных данных, то гораздо удобнее использовать другое решение – плагин tableFormSynch. Этот плагин связывает таблицу с формой, давая возможность динамически редактировать данные в таблице, а также добавлять и удалять записи.

В этой статье я покажу, как сделать простое приложение, реализующее редактирование, добавление и удаление записей таблицы, сохраняя данные при помощи AJAX. Чтобы создать приложение нам будут нужны библиотека jQuery, плагин metadata (требуется для работы плагина tableFormSynch), а также jQuery Form Plugin для сохранения данных формы через AJAX. Но прежде чем мы начнем, предлагаю посмотреть на готовый результат. Смотреть демо пример.

Итак, начинаем с того, что создаем HTML страницу и подключаем к ней необходимые нам скрипты:

Далее добавляем табличные данные, которые мы собираемся редактировать, плюс сюда же добавляем ссылки на редактирование и удаление записи. Здесь есть обязательные условия: для каждой строки таблицы нужно указать ID записи в атрибуте id и метаданные (то есть все данные записи) в атрибуте class. И еще – все строки таблицы должны быть обязательно заключены в тэги :


	Иван
	Иванов
	Программист
	Редактировать | удалить

Следующий шаг – создание формы: она будет располагаться в последней строке таблицы и при загрузке страницы будет не видна. Появляться она будет по надобности, при нажатии на ссылки “добавить запись” или “редактировать”. Форма будет иметь все нужные поля (в нашем случае текстовые поля) и три кнопки – “добавить” и “редактировать”, которые появляются в зависимости от выбранного действия, а также “отмена”, по нажатию на которую форма будет исчезать.

Ну и самая малость – под таблицей размещаем ссылку “добавить запись”:

Добавить запись

Теперь приступим к созданию скрипта нашего приложения. Как полагается для скриптов, написанных под jQuery, заключаем весь наш код в функцию $.ready(), и первое, что мы туда поместим, это вызов функции bindTableToForm(), которая связывает таблицу с формой:

$(document).ready(function() {

	$("#demoTable").bindTableToForm($("#rowEditForm"),"personId");

});

Первым параметром в функцию мы передаем форму, а вторым – название ключевого поля записи, в нашем случае это ID пользователя.

Далее, создаем фукнцию редактирования. Добавляем ко всем ссылкам “редактировать” обработчик, который будет показывать форму редактирования под нужной строкой. Форму заполняем данными при помощи функции populateForm()и здесь же показываем конпку “редактировать” и прячем конпку “добавить”. Таким образом мы переводим форму в режим редактирования. Ну и для красоты подкрашиваем редактируемую строку бледно розовым цветом:

$("a.edit").click(function() {

	$("#addBtn").hide();
	$("#updateBtn").show();

	$(this).populateForm();

	var row = $(this).parent().parent();
	row.find('td').css('background-color','#faa');
	$('#editableRow').insertAfter(row).fadeIn('slow');

	// отмена действия по умолчанию
	return false;
});

При нажатии на кнопку “обновить”, данные формы будут отправляться на сервер через AJAX, и при успешном сохранении, запись в таблице будет обновляться. Выполняем это все в обработчике onclick кнопки:

$("#updateBtn").click(function() {
	$('#rowEditForm').ajaxForm({
		beforeSubmit : function(){
			$('#loading').show();
		},
		success : function(response){
			$('#loading').hide();
			if (response == 1)
				$("#rowEditForm").updateRow();
			else
				alert('Ошибка сохранения данных');

			var rowId = $("input[name='personId']").val();
			var row = $('tr#'+rowId).find('td').css('background-color','#F5F5F5');
			$('#editableRow').fadeOut('slow');
		}
	});
});

Здесь мы используем функцию ajaxForm() для выполнения AJAX запроса с данными формы. При успешном сохранении данных, сервер возвращает значение 1, в любом другом случае, трактуем результат как ошибку. Данные в таблице обновляем фукнцией updateRow().

Далее реализовуем добавление новой записи. Всё делаем также, как и для обновления, только вместо того, чтобы заполнять форму, очищаем её функцией clearForm(). Ну и естественно, вместо кнопки “редактировать” делаем активной кнопку “добавить”:

$("a.add").click(function() {
	$("#addBtn").show();
	$("#updateBtn").hide();

	// очищаем форму
	$("#rowEditForm").clearForm();
	$("input[name='personId']").val(0);

	$('#demoTable tbody').append($('#editableRow'));
	$('#editableRow').fadeIn('slow');

	return false;
});

Обработчик для кнопки “добавить” также мало чем отличается от функции обновления, за исключением того, что сервер возвращает ID новой записи, который затем передается в функцию addRow() для добавления записи:

$("#addBtn").click(function() {
	$('#rowEditForm').ajaxForm({
		beforeSubmit : function(){
			$('#loading').show();
		},
		success : function(response){
			$('#loading').hide();
			if (response == 0)
				alert('Ошибка добавления данных');
			else
				$("#rowEditForm").addRow(response);

			$('#editableRow').fadeOut('slow');
		}
	});
});

Теперь выполним удаление записи – используем для этого функцию deleteRow(). Для отправки запроса на сервер будем использовать функцию $.post(), которая будет отправлять запрос в отдельный файл delete.php. Последний выполняет удаление записи и возвращает 1 если запись удалилась, и 0 если произошла ошибка. В самом начале функции мы получаем ID записи которую необходимо удалить, затем передаем это значение в функцию $.post() в качестве параметра personId, который будет установлен переменной в POST:

$("a.delete").click(function() {

	var id = $(this).parent().parent().attr('id');

	var that = $(this);
	$.post('delete.php',
		{personId : id},
		function(data){
			if (data == 1)
				that.deleteRow();
			else
				alert('Ошибка удаления записи');
		});
	return false;
});

Ну и последняя, самая простая функция – “отмена”. Здесь мы просто прячем форму и закрашиваем все строки формы в стандартный цвет:

$("#cancelBtn").click(function(){
	$("#editableRow").fadeOut("slow");
	$(".tablesCorp td").css('background-color','#F5F5F5');
});

Посмотреть скрипт полностью можно здесь.

После этого нужно еще установить пару обязательных стилей:

#editableRow {display:none}
#addBtn {display:none}

Первая строка прячет форму редактирования, а вторая кнопку “добавить”, которые в начале работы должны быть скрытыми.

Вот и все, наше приложение готово. Буду рад услышать Ваши замечания

До встречи!

смотреть демо скачать демо

Спонсор статьи:
Автошколы, автокурсы и автоинструкторы Москвы
Курсы MBA, бизнес школа мба одесса
Инструктор по вождению – обучение вождению автомобиля в Москве

Редактируемый контент на jQuery

admin — Sat, 20 Dec 2008 22:58:30 +0000

Этот простой туториал посвящен тому, как сделать любой текст на странице динамически редактируемым. В общем виде работает это так: пользователь щелкает мышью по тексту, который нужно отредактировать, в результате чего на этом месте появляется форма для редактирования. После того, как пользователь внес изменения, он нажимает кнопку OK и скрипт автоматически отправляет AJAX запрос на сервер, сохраняя введенные данные. После этого форма исчезает, а на её месте остается отредактированный текст.

Для выполнения такой задачи, нам понадобятся библиотека jQuery и плагин Jeditable.

Начнем с создания HTML страницы, в которой выделим текст, который необходимо редактировать, заключив его в

с классом editable. Здесь же подключаем нужные нам скрипты jquery.js и jquery.jeditable.js:








Lorem ipsum dolor sit amet, consectetur adipiscing elit....



Aenean ut mauris nec nisl varius volutpat....



Aenean pharetra. Curabitur non turpis....

Далее пишем скрипт, который будет инициализировать нужные нам блоки текста:

$(document).ready(function() {
     	$(".editable").editable("/jedit/file.php",
		{
			type      : 'textarea',
		        cancel    : 'Отмена',
		        submit    : 'OK',
		        indicator : '',
			tooltip : "Щелкните чтоб отредактировать этот текст"
		}
	);
});

Здесь селектор $(”.editable”) выделяет нужные нам блоки кода, а фукнция editable инициализирует их с указанными параметрами. Первый параметр – это URL, на который будет отправляться AJAX запрос при сохранении изменений. Второй параметр – это опции. Вкратце опишу, что они значат:

type – указывает на тип элемента редактирования. По умолчанию используется простое текстовое поле (), но можно указать и textarea, как сделано в нашем примере. Также, эта опция может иметь значение select (будет рассмотрено ниже)
cancel – указывает на то, что нужно отображать кнопку “отмена”. По умолчанию кнопки нет, отменить редактирование можно клавишей Esc.
ОК – указывает на то, что нужно отображать кнопку “ОК”, то есть кнопку сохранения изменений. По умолчанию кнопки нет, сохранить изменения можно клавишей Enter.
indicator – индикатор ожидания – форматированный текст (допускаются HTML теги), который будет отображаться при отправке запроса на сервер. Здесь я использовал чтобы показать анимированный индикатор.
tooltip – всплывающая подсказка, которая будет показана при наведении мышки на редактируемый блок текста.

AJAX запрос, который отправляется на сервер, имеет два параметра: id и value:

id=elements_id&value=user_edited_content

Если вы хотите изменить названия этих двух параметров, то это можно сделать, присвоив нужные значения опциям id и name:

 $(document).ready(function() {
     $('.edit').editable('http://www.example.com/save.php', {
         id   : 'elementid',
         name : 'newvalue'
     });
 });

Теперь представьте себе ситуацию, когда пользователю нужно отредактировать какой то короткий кусок текста, однако вводить не что попало, а выбирать некоторое определенное значение. В этом случае было бы удобно вместо текстового поля показывать выпадающий список. Это можно сделать, указав в качестве опции type значение select, а в параметре data указать объект со всеми значениями для списка:

$('#country').editable('/jedit/country.php', {
	data   : " {'U':'Украина','B':'Белоруссия','R':'Россия', 'selected':'U'}",
	type   : 'select',
	submit : 'OK',
        indicator : '',
	tooltip : "Щелкните чтоб выбрать страну"
});

Обратите внимание на значение ’selected’ в объекте data. Таким образом указывается элемент списка, который должен быть выбран. В результате при щелчке мышки на таком тексте, вместо него появится выпадающий список. Пользователю остается только выбрать один из предлагаемых вариантов и сохранить свой выбор, нажав ОК.

Смотреть демо

Спонсор статьи:

Биржа труда – работа николаев

Эксперт-Смета: расчет смет

Клиника Оксфорд Медикал – потенция лечение

Новый плагин для Mootools – Request.Queue

admin — Sun, 07 Dec 2008 21:16:56 +0000

Request.Queue – это новый плагин для библиотеки Mootools, который позволяет последовательно отправлять AJAX запросы на сервер. Работает это так: пользователь создает некоторое количество запросов Request, которые должны быть отправлены на сервер один за одним, затем добавляет их в очередь Request.Queue, после чего для каждого запроса вызывается метод send() в том порядке, в котором они должны быть отправлены.

Рассмотрим следующий пример:

var num1 = new Request({ url: '/wiki/simple.php', data: {num: 1, sleep: 1}, method: 'get',
    onComplete: function(response){ console.log(response) } });
var num2 = new Request({ url: '/wiki/simple.php', data: {num: 2, sleep: 1}, method: 'get',
    onComplete: function(response){ console.log(response) } });
var num3 = new Request({ url: '/wiki/simple.php', data: {num: 3, sleep: 1}, method: 'get',
    onComplete: function(response){ console.log(response) } });
var myQueue = new Request.Queue();
// можно добавлять запросы по одному
myQueue.addRequest('num1', num1);
// ... или сразу несколько
myQueue.addRequests({ num2: num2, num3: num3 });
num1.send();
num2.send();
num3.send();

В этом примере очередь запросов будет отправлять по очереди запросы num1, num2, num3. Каждый из них будет отправляться только после того, как предыдущий завершился.

Стоит отметить, что Request.Queue может отправлять не только по одному запросу за раз, а и по нескольку, если указать для него опцию concurrent (по умолчанию равняется 1). Кроме этой опции, есть также stopOnFailure и autoAdvance (обе по умолчанию равны true). Первая приостанавливает отправку запросов при возникновении ошибки, при этом возобновить отправку запросов можно при помощи функции resume(). Если установить эту опцию в false, то запросы будут отправляться даже если один из них завершился с ошибкой. Вторая опция – autoAdvance автоматически отправляет следующий запрос. Если установить опцию в false, то отправить следующий запрос в очереди можно будет используя функцию runNext().

Как вы уже видели из предыдущего примера, запросы можно добавлять при помощи функций addRequest() и addRequests(). Удалять запросы из очереди можно при помощи функции removeRequest():

var foo = new Request();
myRequestQueue.addRequest('fooRequest', foo);
myRequestQueue.removeRequest(foo);
// или
myRequestQueue.removeRequest('fooRequest');

Если вам нужно полностью очистить очередь запросов, то это можно сделать одной функцией – clear():

myRequestQueue.clear();

Также, объектам Request.Queue можно назначать следующие события:

onRequestStart
onRequestEnd
onRequestSuccess
onRequestComplete
onRequestCancel
onRequestException
onRequestFailure

Узнать подробнее о всех функциях и событиях можно в документации. Скачать скрипт можно здесь – просто отметьте в списке доступных для скачивания плагинов Request.Queue и жмите Download.

Спонсор статьи:
Профессиональное продвижение сайтов, раскрутка в поисковых системах, оптимизация интернет-магазинов.
Живая изгородь своими руками на сайте “Ваш Сад”.
Интернет-магазин dvd – купить dvd-диски в киеве, продажа фильмов DVD почтой, dvd в украине.

Постраничная навигация на jQuery

admin — Mon, 20 Oct 2008 19:56:26 +0000

В последнее время мне пришлось столкнуться с проблемой постраничной навигации (pagination), и, дабы не изобретать велосипед, я сразу же решил поискать готовые решения. Как оказалось, их не так уж и много. В конце концов, я остановил свой выбор на приемлемом для меня решении, о котором и пойдет речь в этой статье. Сие решение представляет собой скрипт, использующий jQuery и способный обеспечивать быструю и простую навигацию используя AJAX. Я несколько изменил исходный скрипт, чтобы получить таблицу с одинаковым количеством строк (в исходном варианте таблица всегда имела размер в зависимости от количества получаемых данных), плюс я добавил эффекты затухания при прорисовке.

Чтобы получить представление о конечном результате этого туториала, предлагаю вам взглянуть на демо.

Создание постраничной навигации начнем собственно с таблицы, которую мы будем заполнять данными:


	Таблица 1: Некоторые произвольные данные
	
		
			Название
			Автор
			Дата
			ID

Как видите, это самая обыкновенная пустая таблица, внутри каждой ячейки которой находится элемент . Сразу же после загрузки страницы, эта таблица будет заполняться данными получаемыми из AJAX запроса. Пустой контейнер ul с классом paginator будет использоваться для хранения ссылок навигации. Эти ссылки будут обновляться после каждого обновления таблицы.

Далее подключаем скрипт пагинатора:

jQuery.fn.pageinate = function (settings) {

	// Настройки по умолчанию
	var settings = jQuery.extend({
		row: function (container, item, i) {},
		page: function (i) {},
		url: "",
		show: 10,
		start_page:1
	}, settings);

	// элемент, который будет использоваться для пагинатора
	settings.pagelist_selector = jQuery(settings.pagelist_selector);

	return this.each(function(_, element){
		// jQuery-wrap element
		element = $(element);

		var page_link_callback_creator = function(i) {
			return function() {
				$(this).html(' ');
				$(this).attr('class','waiting');
				update(i);
			}
		};

		var update = function (page) {

			jQuery.getJSON(settings.url, {page:page, show:settings.show}, function(data){
				// Обрабатываем результаты JSON запроса
				pages = data['pages'];
				posts = data['posts'];

				// прорисовка строк таблицы
				for (var i=0; i < settings.show; i++) {
					if (posts[i])
						settings.row(element, posts[i], i);
					else
						settings.row(element, false, i);
				}

				settings.pagelist_selector.fadeOut(100, function(){
					settings.pagelist_selector.html("");
					// создание пагинатора
					for (i=1; i <= pages; i++) {
						selected = page==i
						page_link = settings.page(i, selected);
						settings.pagelist_selector.append(page_link);

						if(!selected) {
							page_link.click(page_link_callback_creator(i));
						}
					}
					settings.pagelist_selector.fadeIn(100);
				});
			});
		};

		// Первоначальное получение данных
		update(settings.start_page);
	});
}

Код пагинатора реализован в виде jQuery плагина. В самом начале определяются настройки пагинатора - количество строк на странице (show), с какой страницы начинать просмотр (start_page), url для AJAX запросов (url). Однако основными параметрами в этих опциях являются обработчики row и page, которые нужны для прорисовки строк таблицы и пагинатора.

Плагин работает следующим образом: в самом последней строке плагина вызывается функция update(), которая выполняет AJAX запрос к серверу (адрес указан в опции url). Полученные от сервера данные в формате JSON обрабатываются и добавляются в таблицу:

// прорисовка строк таблицы
for (var i=0; i < settings.show; i++) {
	if (posts[i])
		settings.row(element, posts[i], i);
	else
		settings.row(element, false, i);
}

После этого происходит прорисовка пагинатора, используя эффекты затухания (fadeOut и fadeIn).

Теперь рассмотрим скрипт в котором мы будем использвать созданный нами плагин:

$(document).ready(function(){

	$("#list tbody").pageinate({
		url: "server.php",
		pagelist_selector: "#list ul",
		start_page: 1,

		row:function(container, item, i){
			$("#list tbody tr:eq("+i+") td").each(function(i){
				if (!item)
					$(this).html(' ');
				else {
					switch (i){
						case 0:
							$(this).html(''+item['title']+'');
							break;
						case 1:
							$(this).html(''+item['author']+'');
							break;
						case 2:
							$(this).html(''+item['date']+'');
							break;
						case 3:
							$(this).html(''+item['id']+'');
							break;
					}
				}
			});
		},

		page:function(id, selected) {
			return $(''+id+'');
		}
	});

});

Вызывается он обычным для jQuery образом, указывая все перечисленные выше опции - url, pagelist_selector и т.п.:

$("#list tbody").pageinate({});

В качестве обработчиков row() и page() указываем функции, рисующие строку и пагинатор. Как видите, функции несложные, в особенности page(), где просто создается новый элемент li с номером страницы. Если страница текущая, то для созданного элемента указывается класс selected. Обработчик row() несколько сложнее - он целиком и полностью зависит от получаемых от сервера данных. В самом начале функция получает указатели на все ячейки строки (аргумент i указывает на строку таблицы), в которую нужно поместить значение:

$("#list tbody tr:eq("+i+") td").each(function(i){})

Затем, используя функцию each() поочередно добавляем нужные нам данные в соответствующие ячейки используя конструкцию switch. Если в функцию передан пустой аргумент item (пустая ячейка), то в содержимое ячейки очищается (визуально - span там нужен, чтобы пустая ячейка имела те же размеры что и заполненая):

if (!item)
	$(this).html(' ');

Конечно же, это не полнофункциональный пагинатор, как мы его привыкли видеть в обычных приложениях, но я думаю недостающие функции, как ссылки "Вперед" и "Назад", несложно написать самостоятельно.

На сегодня это все.
До встречи!