Приветствую всех!

Сегодня хочу показать небольшой пример использования библиотеки jQuery для работы с параметрами ссылок.

Предположим на нашей странице есть ссылка, клик по которой отправляет запрос на выполнение некоторой операции. Пускай это будет удаление какого-нибудь объекта.

HTML разметка такой ссылки может выглядеть следующим образом.

<a class="delete" href="http://www.simplecoding.org/script.php?action=delete_object&object_id=1">Удалить</a>

Как видите, ссылка содержит два параметра (action и object_id), значения которых PHP скрипт сможет получить из массива $_GET.

Теперь, мы хотим выполнить удаление объекта с помощью AJAX запроса. Изменять ради него ссылку нет никакой необходимости. Просто назначаем обработчик для события click.

$('a.delete').click(function() {
  return false;
});

Этот код блокирует отправку обычного запроса при клике по ссылке. Нам нужно получить параметры и отправить AJAX запрос.

В обработчике события click получить значение атрибута href ссылки можно следующим образом.

$(this).attr('href')

Затем нужно найти в этой строке параметры. Тут есть два варианта.

1) Если вам достаточно параметров, указанных в атрибуте href и вы не хотите их изменять, то просто передать методам $.ajax (или $.post, или $.get) строку с параметрами запроса.

Т.е. код будет выглядеть примерно так

var params = $(this).attr('href').split('?');
$.post('ajax_delete.php', params[1], function(response) {
    console.log(response);
} );

Здесь мы с помощью метода split разбили запрос на две части (по знаку вопроса), и передали методу $.post второй элемент массива params. Для данного примера он выглядит так
action=delete_object&object_id=1

2) Если перед отправкой AJAX запроса нужно изменить/удалить/добавить какие-то параметры, то удобнее всего преобразовать строку с параметрами в хеш.

Для этих целей существует специальный плагин – parseQuery

Использовать его можно так.

var params = $.parseQuery($( this ).attr( 'href' ).split('?'));

В результате вы получите хеш

{
	action: delete_object,
	object_id: 1
}

Код отправки AJAX запроса при этом не изменяется. Точно также передаёте переменную params во втором параметре метода $.post.

В заключение посмотрите код обработчика целиком.

$(document).ready(function() {
	$('a.delete').click( function() {
		var params = $(this).attr('href').split('?');
		$.post('ajax_delete.php', params[1], function(response) {
			console.log(response);
		});
		return false;
	});
});

Как видите, задача решается с помощью минимального количества кода. И если у посетителя будет отключен JavaScript, то ничего особенного не произойдет. При кликах по ссылкам будут отправляться обычные запросы.

Если есть вопросы или замечания, пишите.

Успехов!

Интересно почитать

Платежный модуль Robokassa для Magento с поддержкой.

Нужна фотокнига? В наличие фотокниги образцы, множество видов дизайна и верстки

Приветствую всех!

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

Возможно, в каких-то случаях виноваты разработчики сервиса, но часто проблема заключается в ограничениях, которые накладывают браузеры. Рассмотрим загрузку файлов на сервер. В большинстве случаев вам предложат стандартное поле с кнопкой выбора файла с вашего компьютера и/или поле, в котором можно указать URL файла, размещенного где-нибудь в Сети.

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

Проблемы начинаются с первого же шага. Даже если вы четко понимаете, где искать URL и хорошо умеете пользоваться инструментами вроде firebug, то всё равно потребуется несколько кликов мышкой чтобы получить нужный адрес. Было бы гораздо удобнее просто перетянуть нужную картинку из одного окна браузера в другое.

Пример реализации такого интерфейса я покажу в этой статье. Если хотите, можете посмотреть, как он работает на демонстрационной страничке или скачать архив с исходниками.

Обратите внимание! Данный пример работает только в браузере Google Chrome. По-идее, поддержка всех необходимых технологий есть в Firefox и Safari, но с ними я пока не разбирался.
В качестве объектов для «перетягивания» я брал в основном картинки с википедии. Было замечено несколько проблем связанных с не латинскими символами в URL картинок, но чтобы не перегружать пример проверками и преобразованиями я их оставил как есть.

Принцип работы

Стандарт HTML5 предусматривает поддержку «перетягивания» объектов страницы (Drag and Drop). Кстати, пример простейшей реализации D&D я уже показывал – Drag & Drop с использованием HTML5. И, кроме того, есть довольно много JavaScript библиотек, реализующих поддержку D&D.

Но тут важно понимать, что если необходимо «перетягивать» картинки со сторонних ресурсов, то использовать библиотеки не получится. Т.к. вы не сможете добавить свой JS код на чужую страницу. А для того, чтобы загрузить картинку, нам нужно получить её URL, т.е. браузер должен вместе с перетягиваемым объектом передавать и его параметры (например, атрибут src картинки или весь тег img).

В этом случае мы можем создать на своей странице «приёмник» картинок. Это будет обычный div которому назначен обработчик события drop. Если пользователь «сбросит» картинку над этим div'ом, то будет вызван обработчик и в первом параметре он получит объект, содержащий информацию о перетягиваемой картинке.

Дальше всё достаточно просто. Если мы получили нужный URL, то можно отправить AJAX-запрос серверному скрипту, который выполнит загрузку файла.

Реализация

Начнём со страницы нашего приложения.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Images Upload</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
		<div id="images"></div>
		<div id="img_target"></div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script src="main.js"></script>
    </body>
</html>

На ней размещены два блока: images – здесь будем показывать загруженные изображения и img_target – на этот блок нужно перетягивать картинки.

Внизу страницы подключаем библиотеку jQuery и скрипт main.js, который будет отправлять информацию о перетянутых изображениях на сервер.

Рассмотрим main.js

$(function() {
    $('#img_target')
        .bind('dragenter', function(event) {
            $(this).addClass('drop_here');
            return false;
        })
        .bind('dragleave', function(event) {
            $(this).removeClass('drop_here');
            return false;
        })
        .bind('dragover', function(event) {
            return false;
        })
        .bind('drop', function(event) {
            $(this).removeClass('drop_here');
			var srcRegex = /src=\"([^\s]+)\"/ig;
            var data = event.originalEvent.dataTransfer.getData('text/html');
			var img_data = srcRegex.exec(data);
			$.post('upload.php', {'file_url':img_data[1]}, function(res) {
				var response = eval('(' + res + ')');
				$('#images').append($('<img src="' + response.file_url + '" />'));
			});
            return true;
        });
});

Здесь мы назначаем обработчики событиям dragenter, dragleave и dragover. Все они должны просто возвращать false и, чтобы как-то проинформировать пользователя о том, что можно «сбрасывать» картинку, в обработчике dragenter устанавливаем CSS класс drop_here для блока-приёмника.

Основная часть работы выполняется в обработчике события drop. При возникновении этого события мы читаем информацию о «сброшенном» объекте и «вырезаем» значение атрибута src, т.е. URL картинки (строки 16-18). Информация передается в объекте event.originalEvent.dataTransfer (строка 17).

Затем формируем обычный AJAX запрос и в качестве параметра передаём ему найденный URL.

Серверный скрипт (upload.php) получит URL изображения на удалённом сервере и загрузит его. А в ответе на AJAX запрос он отправит новый URL загруженной картинки.

В свою очередь, обработчик AJAX-запроса создаст тег img и вставит его в блок images. Таким образом, загруженные картинки будут появляться над полем загрузки.

Рассмотрим upload.php

<?php

define('BASE_URL', 'http://localhost/tests/images-upload/');

function upload_from_url($file_url) {
	$url_segments = explode('/', $file_url);
	$file_name = urldecode(end($url_segments));
	if (false !== $file_name) {
		$file_name_parts = explode('.', $file_name);
		if (in_array(strtolower(end($file_name_parts)), array('jpeg','jpg','png','gif'))) {
			$destination=fopen("upload/".$file_name,"w");
			$source=fopen($file_url,"r");
			$maxsize=300*1024;
			$length=0;
			while (($a=fread($source,1024))&&($length<$maxsize)) {
				$length=$length+1024;
				fwrite($destination,$a);
			}
			fclose($source);
			fclose($destination);
		}
	}
	$new_file_url = BASE_URL.'upload/'.$file_name;
	return $new_file_url;
}

$res = array('err' => 'Не указан URL файла');

if (isset($_POST['file_url'])) {
	$new_url = upload_from_url($_POST['file_url']);
	$res = array('file_url' => $new_url);
}

echo json_encode($res);

Принцип работы следующий. Читаем URL картинки и пытаемся её загрузить (строки 29-32).

Если картинка загружена, сохраняем её в папку upload. Получение картинки с удалённого сервера осуществляется с помощью функций fread. Файл читаем блоками по 1кБ (строки 15-18). Такой подход позволяет прервать загрузку файла, если его размер превышает заданный предел (в данном случае 300кБ).

После загрузки файла формируем для него URL и отправляем браузеру в формате JSON.

Как видите, реализовать такой загрузчик несложно. И пользоваться им достаточно удобно. Естественно, основным недостатком является поддержка HTML5 браузерами, точнее её отсутствие

Тем не менее, если вы создаёте интерфейс для сотрудников какой-нибудь компании, и можете оговорить тип браузера, то HTML5 вполне можно использовать.

Успехов!

Интересно почитать.

Фотокнига — фантастический сюрприз для любимого мужчины. Попробуйте сами!

Правильно подготовим 3-ндфл при покупке квартиры за 2011 год, дадим инструкции для получения вычета

Нужно распарсить сайт? Интересный пример как написан парсер на php. Можно даже скачать скрипт парсера.

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

Сразу хочу уточнить, что в этой статье под термином «информер» я имею в виду блок на странице, содержащий информацию, полученную с другого ресурса. Информация может быть какая угодно: курсы валют, погода, данные счетчиков, последние твиты и т.п.

Результат, который должен получиться, можно посмотреть на демонстрационной страничке или запустив пример из архива.

Подключение информера

Существует два основных варианта.

1) Ресурс, который является источником информации, предоставляет код для вставки на вашем сайте. Обычно это JS код, который подгружает данные и формирует внешний вид информера. При этом, иногда владельцы запрещают менять оформление и содержимое информера. В этом случае выбор у вас небольшой: либо пользоваться тем, что дают, либо нет.

2) Данные можно получить в XML или JSON формате. Этот вариант гораздо интереснее, т.к. вы полностью контролируете внешний вид информера и можете выводить только те данные, которые вам нужны. Кроме того, появляется выбор между вариантами загрузки данных.

Т.к. по первому варианту обсуждать, в общем-то, нечего, остановимся на втором.

Получение данных

Тут тоже два варианта.

1) Отправить запрос из PHP скрипта при формировании страницы.

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

2) Получать данные с помощью AJAX запроса.

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

Сразу хочу отметить, что оба подхода имеют много общего.

Дело в том, что запрос к стороннему серверу в любом случае придётся отправлять из PHP скрипта. Причина – Same Origin Policy, которую используют все современные браузеры. Эта политика не позволяет JS коду получить доступ к данным, загруженным с другого домена.

Обойти это ограничение можно с помощью JSONP, но реализовать его поддержку должны разработчики сервиса, от которого вы хотите получить данные. Подробнее на эту тему вы можете почитать здесь, здесь и здесь.

В общем, я покажу пример создания информера с использованием JavaScript, но, при желании, его несложно будет переделать под первый вариант.

Источник данных

Для этого примера используем данные о курсах валют, которые предоставляет ресурс pfsoft.com.ua в XML формате. Посмотреть их можно здесь.

Разметка информера

Тут всё просто.

<ul id="rates"><li>Загрузка данных...</li></ul>

Т.к. данные будут загружаться с помощью AJAX запроса, то показываем посетителю сообщение о том, что загрузка начата. Когда данные будут загружены, мы вставим их в список.

Клиентский скрипт

Принцип работы следующий. После загрузки страницы отправляем AJAX запрос на свой сервер. PHP скрипт получает данные от сервера pfsoft.com.ua и отправляет их браузеру.

JS код получает XML строку с данными, находит в ней нужные элементы и добавляет их в список (исходные данные содержат курсы примерно двух десятков валют, но вряд ли имеет смысл выводить их все).

var curCodes = ['RUB', 'USD', 'EUR'];
$(document).ready(function() {
	$.get('getrates.php', function(data) {
		if (data != 'ERR') {
			var rates = '';
			$(data).find('Valute').each(function(key, value) {
				var curCode = $(value).find('CharCode').html();
				if (-1 != $.inArray(curCode, curCodes)) {
					rates += '<li>' + $(value).find('Nominal').html()
						+ ' ' + curCode
						+ ' = ' + $(value).find('Value').html() + ' грн.' + '</li>';
				}
				$('#rates').html(rates);
			});
		}
		else {
			$('#rates').html('<li>Данные не доступны</li>');
		}
	});
});

Прежде всего, создаём массив с кодами валют, которые нужно показать в информере.

Затем, отправляем AJAX запрос (строка 3). PHP скрипт, который выполняет загрузку данных, называется getrates.php.

Если при получении данных возникли ошибки, выводим соответствующее сообщение (строка 17), в противном случае – начинаем обработку XML строки.

Обратите внимание! Мы можем работать с XML данными точно так же, как и с HTML страницей.

Просто создаём объект jQuery ($(data)) и получаем возможность использовать методы find, html, each и т.д.

Здесь мы находим все теги Valute, которые содержат данные об отдельной валюте, а затем из них выбираем код валюты, её курс и формируем элемент списка.

При этом проверяем, указана ли данная валюта в массиве curCodes (строка 8). Кстати, обратите внимание, метод $.inArray возвращает -1 если указанный элемент отсутствует в массиве.

После этого вставляем данные в список (строка 13).

Серверная часть

Рассмотрим скрипт getrates.php.

require_once('ratescache.php');

$rCache = new RatesCache();
//$rCache->expired = 30;

//пробуем получить данные из кеша
if (FALSE === ($data = $rCache->get())) {
	//если данные в кеше устарели, пытаемся получить их от сервера pfsoft.com.ua
	$data = @file_get_contents('http://pfsoft.com.ua/service/currency/');
	//если сервер недоступен, пробуем получить данные из устаревшего кеша
	if (FALSE === $data) {
		$data = $rCache->get(TRUE);
	}
	else {
		//обновляем данные в кеше, предварительно изменяем кодировку на UTF-8
		$rCache->save(iconv('windows-1251','utf-8',$data));
	}
}

if (FALSE !== $data) {
	//отправляем данные
	echo $data;
	exit;
}
//отправляем сообщение об ошибке
echo 'ERR';

Логика работы довольно простая. Получить данные и отправить их браузеру, но при этом используется немного не стандартный кеш.

Прежде всего, хочу объяснить зачем нужен кеш.

Во-первых, его использование сокращает время загрузки данных.

Во-вторых, если у вас посещаемый сайт, и вы будете запрашивать данные для каждого посетителя, то администраторы источника данных могут вас просто забанить (за нагрузку).

В-третьих, кеш позволит получить данные для информера даже если pfsoft.com.ua не доступен.

Итак, алгоритм работы следующий.

1) Создаём экземпляр класса кеша (строка 3) и пробуем получить данные из него (строка 7).

2) Если данные в нём устарели, пробуем получить их от сервера pfsoft.com.ua (строка 9).

3) Если и сервер не отвечает, пытаемся получить данные из устаревшего кеша (строка 12). Кстати, это единственная причина, из-за которой я написал собственную реализацию кеша. Класс RatesCache содержит два метода get и set, причем вызов get(true) вернёт данные, даже если кеш устарел.

4) Если сервер pfsoft.com.ua вернул данные, то обновляем кеш и отправляем их браузеру (строка 16).

5) Если данные получить не удалось (кеш не существует и сервер не отвечает), отправляем сообщение об ошибке (строка 26).

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

Результаты

На мой взгляд, показанный здесь вариант создания информера один из самых удобных. С одной стороны он не замедляет формирование страницы (за счет AJAX загрузки), с другой – формируется достаточно быстро (за счет использования кеша).

К тому же, частично устраняется зависимость от источника данных. Посетитель увидит курсы валют, правда устаревшие. Как только источник данных станет доступным кеш будет обновлён.

Как всегда, я буду рад ответить на ваши вопросы и замечания!

Интересно почитать

Необычный пример рекламы ресторана от практичных японцев.

Пять способов привлечения клиентов для фирм на b2b-рынке

В этой части я хочу рассказать о некоторых особенностях реализации AJAX запросов в компоненте CGridView.

Предположим, у нас есть таблица, и мы создали для неё модель и скрипты для выполнения CRUD операций (с помощью встроенного генератора Yii).

Пусть таблица называется countries, содержит список стран с двумя полями (id, name).

В этом случае, страница управления записями будет доступна адресу

index.php?r=countries/admin

В нижней части страницы находится пагинатор (листалка). Клик по ссылке с номером страницы приведет к отправке ajax запроса. Но вот тут появляется одна из особенностей. Этот ajax запрос возвращает не только новую страницу с данными, но и всю страницу целиком. Начиная от doctype и заканчивая закрывающим тегом html.

Если на странице ничего, кроме таблицы нет, то это не проблема. Но если мы разместим на ней несколько виджетов, для формирования которых нам потребуется выполнить дополнительные запросы к БД, то смысла в такой ajax пагинации окажется немного.

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

Сделать это несложно. Для начала вынесем из представления views/countries/admin.php код, который выполняет формирование таблицы в отдельный файл – views/countries/admingrid.php.

Речь идет об этом фрагменте

<?php $this->widget('zii.widgets.grid.CGridView', array(
	'id'=>'countries-grid',
	'dataProvider'=>$model->search(),
	'filter'=>$model,
	'columns'=>array(
		'c_id',
		'c_name',
		array(
			'class'=>'CButtonColumn',
		),
	),
)); ?>

На его место в views/countries/admin.php добавляем следующий код.

<?php
$this->renderPartial('admingrid', array('model'=>$model));
?>

Идея в том, что если мы получим ajax запрос, то возвращать будем только содержимое admingrid.php, если запрос будет обычный – всю страницу.

Теперь переделываем метод actionAdmin контроллера.

public function actionAdmin()
{
	$model=new Countries('search');
	$model->unsetAttributes();  // clear any default values
	if(isset($_GET['Countries']))
		$model->attributes=$_GET['Countries'];

	if (isset($_GET['ajax'])) {
		$this->renderPartial('admingrid',array(
			'model'=>$model,
		));
	}
	else {
		$this->render('admin',array(
			'model'=>$model,
		));
	}
}

Здесь добавлена дополнительная проверка (строка 8). Класс CGridView имеет свойство ajaxVar, которое по-умолчанию равно ajax. Это свойство задает имя GET параметра, который указывает, что данный запрос является ajax запросом.

Если этот параметр установлен, мы используем метод renderPartial, который возвращает браузеру только содержимое представления admingrid. В противном случае, вызываем метод render, который формирует всю страницу целиком.

Внешне в работе страницы ничего не изменилось, но если вы посмотрите с помощью firebug’а ответы сервера на ajax запросы, то разница будет заметной.

Теперь сделаем просмотр записей с помощью AJAX.

По-умолчанию, если мы нажмем на кнопку просмотра (в последней колонке таблицы), то мы попадем на страницу соответствующей записи.

Мы изменим это поведение. Добавим под таблицей блок, в котором будут отображаться подробные сведения о выбранной записи, т.е. содержимое представления views/countries/admingrid.php.

Чтобы не менять стандартное поведение кнопок в таблице мы добавим к ней ещё один столбец со ссылками «Предпросмотр».

При клике по этой ссылке под таблицей появится подробная информация о данной записи.

Приступим.

Добавляем новую колонку в таблицу. Для этого изменим файл admingrid.php следующим образом.

<?php
$this->widget('zii.widgets.grid.CGridView', array(
	'id'=>'countries-grid',
	'dataProvider'=>$model->search(),
	'filter'=>$model,
	'afterAjaxUpdate'=>'function(id, data) {$.fn.setPreviewLinksHandler(id, data);}',
	'columns'=>array(
		'c_id',
		'c_name',
		array(
			'class'=>'CButtonColumn',
		),
		array(
			'type'=>'raw',
			'value'=>'CHtml::link("Предпросмотр", array("countries/view", "id"=>$data->c_id, "ajax"=>"preview"), array("name"=>"previewLink"))',
		),
	),
)); ?>

Здесь есть нюансы. Во-первых, при добавлении столбца необходимо указать, что он имеет тип raw, иначе по-умолчанию Yii применит фильтры к его содержимому.

Во-вторых, нам нужно назначить каждой ссылке обработчик события onClick. Причем, сделать это необходимо как при первоначальной загрузке страницы, так и при «перелистовании».

Для этого мы используем свойство afterAjaxUpdate (строка 6). Ему присваиваем JavaScript функцию, которая будет вызвана после обновления таблицы с помощью ajax метода.

Теперь напишем функцию setPreviewLinksHandler. Для этого создаём файл js/previewlinks.js.

$(function() {
	$.fn.setPreviewLinksHandler = function(id, data) {
		$("a[name=previewLink]").click(function() {
			var link = $(this);
			$.get(link.attr('href'), function(data) {
				$('#preview').html(data);
			});
			return false;
		});
	};
	$.fn.setPreviewLinksHandler();
});

Эта функция получает в качестве параметров id блока с таблицей и её содержимое (data). Но, т.к. содержимое таблицы мы менять не будем, то и эти параметры нам не нужны.

Наша функция setPreviewLinksHandler ищет все ссылки, у которых атрибут name равен previewLink и назначает им обработчик события onClick.

Этот обработчик формирует и отправляет ajax запрос, который возвращает подробную информацию о записи.

Тут обратите внимание, что при отправке ajax запроса используется атрибут href ссылки, таким образом, при отключенном JS клик по ссылке будет отправлять пользователя на страницу с подробной информацией о записи.

Рассмотрим метод actionView контроллера.

public function actionView()
{
	if (isset($_GET['ajax'])) {
		$this->renderPartial('viewrow',array(
			'model'=>$this->loadModel(),
		));
	}
	else {
		$this->render('view',array(
			'model'=>$this->loadModel(),
		));
	}
}

Здесь мы проверяем, есть ли в параметрах запроса атрибут ajax, и если он есть, показываем представление viewrow. При этом используется метод renderPartial. В противном случае, просто показываем представление view.

viewrow.php создаём по тому же принципу, что и admingrid.php. Перемещаем код создания виджета CDetailView в viewrow.php.

<?php $this->widget('zii.widgets.CDetailView', array(
	'data'=>$model,
	'attributes'=>array(
		'c_id',
		'c_name',
	),
)); ?>

А в view.php добавим

<?php $this->renderPartial('viewrow', array('model'=>$model)); ?>

В результате этих манипуляций подробные сведения о записи будут появляться под таблицей при клике по ссылке «Предпросмотр».

Я надеюсь, что никого не запутал своими объяснениями Чтобы вам удобнее было экспериментировать, выкладываю архив с исходниками этого примера и дампом базы (предварительно вам нужно будет создать приложение Yii).

Если есть вопросы или замечания, пишите! Особенно интересуют альтернативные варианты решения таких задач

Интересно почитать

Компания Intelsib предлагает продвижение сайта в интернете, поисковиках, а также его аудит.

О том, что фреймворки позволяют сократить время разработки, знают все. Но иногда при этом появляются самые неожиданные ограничения.

По-идее, так и должно быть. Каким бы универсальным не пытались сделать фреймворк разработчики, всегда чем-то приходится жертвовать. Точнее искать компромисс между количеством кода, который должен написать пользователь и гибкостью.

В этой статье я хочу показать пример такой ситуации, и, естественно, её решение.

UPD: Более удачное решение данной проблемы приведено в комментариях.

Не так давно я опубликовал статью Yii PHP фреймворк: создаем поле с автозаполнением, в которой рассказывал об использовании виджета CAutoComplete.

Алгоритм его работы довольно прост.

1) Создать текстовое поле (тег input).
2) Подключить плагин jQuery Autocomplete и файлы CSS стилей.
3) Подключить плагин к текстовому полю.

При этом, все настройки виджета CAutoComplete задаются при его подключении в PHP массиве.

Т.к. основную работу выполняет Autocomplete, то логично было бы предположить, что в настройках виджета можно задать все параметры этого плагина. Для большинства параметров, так оно и есть, но с параметром extraParams возникли проблемы.

В документации сказано.

Extra parameters for the backend. If you were to specify {bar:4}, the autocompleter would call my_autocomplete_backend.php?q=foo&bar=4 (assuming the input box contains "foo"). The param can be a function that is called to calculate the param before each request.

Дополнительный параметр для бэкенда. Если вы указали {bar:4}, плагин отправит запрос my_autocomplete_backend.php?q=foo&bar=4 (предполагается, что текстовое поле содержит текст "foo"). Параметр может быть функцией, которая вызывается чтобы рассчитать значение параметра перед отправкой каждого запроса.

Т.е. вы можете задать настройки для CAutoComplete следующим образом.

$this->widget('CAutoComplete',
     array(
         'extraParams'=>array('mypar'=>'myval'),
         'url'=>array('countries/autocomplete'),
     )
 );

И такой вариант будет работать.

Но если вы захотите использовать в качестве значения функцию, например

'extraParams'=>array('mypar'=>'function() {return $("#myselect").val();}'),

то этот JS код выполняться не будет.

Примечание. Показанная здесь функция возвращает значение из выпадающего списка (myselect).

Дело в том, что функция передается в виде стоки (в кавычках) и JS код при этом, естественно, не выполняется.

Решить проблему можно так.

1) Создаём js файл с таким кодом.

jQuery("#country").setOptions({
'extraParams':{'mypar':function() {return $("#myselect").val();}}}
);

2) Подключаем его к нужной странице.

$cs = Yii::app()->clientScript;
$cs->registerScriptFile(Yii::app()->request->baseUrl.'/js/autocomplete_config.js', CClientScript::POS_END);

Здесь autocomplete_config.js – название вашего скрипта.

Как видите, решение достаточно простое, но не очень красивое. Часть настроек виджета будет задана в PHP файле, часть в JS.

Если вы знаете более удачные варианты, буду рад выслушать и обсудить

До встречи!

Интересно почитать

Удобный и недорогой стол для кассы отечественной разработки

В прошлой статье я начал рассказывать о создании редактируемого html списка с возможностью сортировки записей. Мы рассмотрели структуру БД, создали страницу со списком, подключили JS скрипты и разобрали добавление записей.

Осталось немного доделать

Демо-версия находится здесь

Также вы можете скачать архив с этим примером

Удаление существующих записей

Рассмотрим серверную часть removenote.php.

try {
	if (!isset($_POST['id'])) {
		throw new Exception('Не указан id записи');
	}
	//подключаемся к базе
	require_once('db.php');
	//удаляем запись (id записи приходит в формате note_id, приставку note_ вырезаем)
	$dbh->exec('DELETE FROM notes WHERE id='.$dbh->quote(substr($_POST['id'], 5)));
	$result = array();
	$result['id'] = $_POST['id'];
	//отправляет отчет браузеру
	echo json_encode($result);
} catch(Exception $e) {
	echo json_encode(array('err'=>'Ошибка: '.$e->getMessage()));
}

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

Клиентская часть немного сложнее.

Ссылкам «Удалить» назначается обработчик события click.

.click(removeLi)

function removeLi() {
	//определяем id текущей записи
	var noteId = $(this).parent().attr('id');
	//запрашиваем подтверждение
	if (confirm('Точно удалить?')) {
		//отправляем запрос
		$.post('removenote.php', {'id':noteId}, function(data) {
			var response = eval('('+data+')');
			if (response['err'] != null) {
				alert(response['err']);
			} else {
				$('#' + response['id']).detach();
				//проверяем, остались ли записи в списке
				var notes = $('#sortable li');
				if (notes.length == 0) {
					//удаляем сам список и форму сортировки записей
					$('#sortable').detach();
					$('#changeOrder').detach();
					//добавляем сообщение "Записи отсутствуют"
					$('<h2>Записи отстутствуют</h2>').insertAfter('#addNewNote');
				}
			}
		});
	}
	return false;
}

Этот обработчик определяет id тега li, в котором расположена ссылка, запрашивает подтверждение удаления и отправляет ajax запрос серверу.

После получения ответа от сервера, он удаляет запись из списка с помощью метода .detach() и проверяет, остались ли в списке другие записи. Если не осталось – список вместе с формой сортировки записей также удаляется.

Изменение текста записей

Как и раньше, начинаем с серверной части. Скрипт update.php.

try {
	//проверяем, пришли данные или нет
	if (!isset($_POST['value'])
			|| '' == $_POST['value']
			|| !isset($_POST['id'])
			|| '' == $_POST['id']) {
		throw new Exception('Не указаны данные записи');
	}
	//подключаемся к базе
	require_once('db.php');
	//защита от XSS
	$note = htmlspecialchars($_POST['value']);
	//формируем запрос на изменение записи...
	$stmt = $dbh->prepare('UPDATE notes SET note=:note WHERE id=:id');
	//... и выполняем его
	$stmt->execute(array(':note'=>$note, ':id'=>substr($_POST['id'], 2)));
	$dbh = null;
	//тут мы не используем JSON формат, т.к. это требование плагина jeditable
	echo $note;
} catch(Exception $e) {
	echo 'Ошибка: '.$e->getMessage();
}

От браузера скрипт получает id записи и новый текст.

После выполнения обычных проверок, мы подключаемся к БД и отправляем запрос на изменение записи. При этом с помощью функции htmlspecialchars мы заменяем теги на их эскейп последовательности (защита от XSS). Защита от SQL Injection выполняется с помощью стандартных средств PDO.

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

Клиентская часть.

Чтобы сделать текст записей редактируемым, мы для каждого тега span (который находится внутри li) выполняем метод editable.

var editableOptions = {
	indicator : 'Сохраняю...',
	tooltip : 'Сделайте двойной клик, чтобы изменить текст',
	event : 'dblclick',
	cancel : 'Отмена',
	submit : 'Сохранить'
};

$('span.note').editable('update.php', editableOptions);

В параметрах этого метода передаём адрес скрипта, который выполняет обновление записи на сервере, и объект editableOptions, который содержит настройки плагина. В данном случае мы указываем (параметр event), что плагин должен вставить форму редактирования при двойном клике по тексту. Одинарный клик, который используется по-умолчанию, нам не подходит, т.к. в этом случае форма будет появляться при каждой попытке перемещения записи.

Кроме события (dblclick) которое открывает форму редактирования, указанного в параметре event, для настройки плагина мы указали только надписи на кнопках и текст подсказок.

Запрос серверу плагин отправляет сам, после клика по кнопке «Сохранить».

Изменение порядка записей

Самая интересная часть

Принцип довольно простой. После того, как пользователь рассортирует записи в нужном порядке, он нажимает кнопку «Сохранить сортировку». При этом запускается обработчик, который формирует массив с записями вида

{
	'id':'id записи',
	'order': порядковый_номер_записи_в_отсортированном_списке
}

Затем этот массив преобразовывается в форма JSON и отправляется серверу.

Примечание. Для преобразования в формат JSON используется плагин jquery-json.

Выглядит клиентская часть следующим образом.

function updateOrder() {
	var notes = $('ul#sortable li');
	//проверяем количество записей в списке
	if (notes.length > 0) {
		var order = [];
		//формируем массив
		//просматриваем список в обратном порядке, т.к. записи выводятся в порядке
		//убывания значений в поле note_order (это позволяет при создании записи
		//присваивать ей максимальный порядковый номер и размещать в начале списка).
		$.each(notes.get().reverse(), function(index, value) {
			order.push({'id': $(value).attr('id'), 'order': index});
		});
		//отправка запроса (метод toJSON добавлен плагином json-2.2)
		$.post('changeorder.php', {'neworder':$.toJSON(order)}, function(data) {
			var response = eval('('+data+')');
			if (response.status == 'OK') {
				$('ul#sortable').effect("highlight", {}, 3000);
			}
			else {
				alert(response.mes);
			}
		});
	}
	return false;
}

Обратите внимание, мы обрабатываем массив с элементами списка в обратном порядке (используется метод .reverse()). Это сделано потому, что записи выводятся в порядке убывания значений в поле note_order. Как я объяснял ранее, такой подход позволяет упростить определение номеров сортировки при создании новых записей.

Если данные успешно сохранены, подсвечиваем список, в противном случае – выводим сообщение об ошибке.

Серверный скрипт (changeorder.php).

try {
	//проверяем полученные данные
	if (!isset($_POST['neworder']) || count($_POST['neworder']) > 5000) {
		throw new Exception('Недопустимые данные');
	}
	//подключаемся к БД
	require_once('db.php');
	//создаём запрос на обновление
	$stmt = $dbh->prepare('UPDATE notes SET note_order=:note_order WHERE id=:id');
	//преобразовываем строку в JSON формате в массив объектов
	$data = json_decode($_POST['neworder']);
	if (null == $data) {
		throw new Exception('Недопустимый формат');
	}
	//обновляем записи
	foreach ($data as $note) {
		$stmt->execute(array(':note_order'=>$note->order, ':id'=>substr($note->id, 5)));
	}
	$dbh = null;
	//отправляем отчет браузеру
	echo json_encode(array('status'=>'OK'));
} catch(Exception $e) {
	echo json_encode(array('status'=>'ERR', 'mes'=>'Ошибка: '.$e->getMessage()));
}

Здесь мы проверяем полученные данные и в цикле обновляем все записи. Используется обычный UPDATE запрос. Преобразование из JSON формата в PHP массив выполняется с помощью функции json_decode.

Как видите, пример получился довольно объёмный, но большая часть кода относится к различным проверкам. Поэтому, надеюсь, общую идею вы поняли

Если у вас будут вопросы или замечания, пишите, буду рад обсудить!

Довольно давно я написал статью о том, как с помощью библиотек Prototype и Scriptaculous добавить возможность редактирования и удаления записей обычному html списку (вообще-то это был цикл статей 1, 2, 3, 4, 5).

С тех пор несколько читателей просили доработать пример и добавить возможность сортировки записей.

Переделывать тот пример я не буду, т.к. Prototype сейчас практически не использую, лучше покажу, как решить задачу с помощью jQuery.

Сформулируем требования.

Необходимо создать html список с возможностями:

- изменение записей;
- удаление записей;
- изменение порядка записей.

Кроме того, необходимо предусмотреть возможность создания новых записей.

В общем, работать это будет примерно так.

Сразу же даю ссылку на архив с исходниками.

Теперь разберём принцип работы.

На сегодняшний день сохранить данные html списка можно двумя способами.

1) На стороне сервера в БД. При этом, после каждого изменения (удаления, создания новой) записи будет отправляться запрос серверу.

2) В браузере, при условии, что он поддерживает HTML5 или есть доступ к какому-нибудь другому хранилищу. Этот способ работает быстрее и не требует постоянного подключения к интернету, но поддерживается не всеми браузерами. В частности, в IE работать не будет.

Поэтому я остановился на первом варианте.

Итак, наше приложение состоит из двух частей: клиентской и серверной.

Клиентская часть представляет собой HTML страницу и набор JS скриптов, которые отправляют запросы, позволяют сортировать список и т.п.

Серверная – это набор PHP скриптов, которые обрабатывают запросы и работают с базой данных. Я не использовал фреймворк в этом примере, поэтому получился набор отдельных скриптов под каждую операцию. При использовании фреймворка эти скрипты станут методами контроллера и, естественно, вы сможете использовать встроенную библиотеку для работы с БД.

Кстати, для этого примера я выбрал базу sqlite, но, т.к. доступ к ней осуществляется с помощью PDO, то вы легко сможете заменить её, например, на MySQL (достаточно будет изменить параметры подключения).

Подключение к БД

Выполняется скриптом db.php, сяостоящим всего из одной строки.

$dbh = new PDO('sqlite:data/data.sqlite');

Тут предполагается, что база находится в файле data.sqlite, расположенном в папке data.

Структура БД.

Т.к. задача у нас достаточно простая, мы обойдёмся одной таблицей с тремя полями:

id – первичный ключ;
note – текст записи;
note_order – порядковый номер записи в списке (с помощью этого поля осуществляется сортировка).

Создание страницы со списком

Выполняется скриптом index.php

<?php
try {
	//подключаемся к базе
	require_once('db.php');
	//получаем все записи
	$query = $dbh->query('SELECT * FROM notes ORDER BY note_order DESC');
	$result = $query->fetchAll();
	$dbh = null;
} catch(Exception $e) {
	$error = 'Ошибка: '.$e->getMessage();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>jQuery Sortable Notes</title>

	<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />

	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
	<script type="text/javascript" src="js/jquery.jeditable.mini.js"></script>
	<script type="text/javascript" src="js/jquery.json-2.2.min.js"></script>
	<script type="text/javascript" src="js/init.js"></script>
</head>
<body>
	<h1>Заметки</h1>
	<form action="addnew.php" method="post" id="addNewNote">
		<p>
		<input type="text" name="notetext" id="notetext" size="40" />
		<input type="submit" value="Добавить заметку" />
		</p>
	</form>
<?php
	//выводим сообщение об ошибке или формируем список записей
	if (isset($error)) {
		echo '<h2>'.$error.'</h2>';
	} else {
		if (count($result) > 0) {
			echo '<ul id="sortable">';
			foreach ($result as $row) {
				echo '<li id="note_'.$row['id'].'" class="editable"><span class="note" id="n_'.$row['id'].'">'.$row['note'].'</span><a href="#"><img src="images/delete.png" alt="Удалить" /></a></li>';
			}
			echo '</ul>';
?>
	<form id="changeOrder" method="post" action="changeorder.php">
		<p><input type="submit" value="Сохранить сортировку" /></p>
	</form>
<?php
		} else {
			echo '<h2>Записи отстутствуют</h2>';
		}
	}
?>
</body>
</html>

Прежде всего, мы подключаемся к базе и получаем список записей. Затем, формируем страницу. На странице размещаем:

- форму добавления новой записи;
- список записей (или сообщение о том, что они отсутствуют);
- форму обновления порядка записей.

Обратите внимание на разметку списка.

<ul id="sortable">
	<li id="note_58" class="editable">
		<span class="note" id="n_58">Заметка 1</span>
		<a href="#"><img src="images/delete.png" alt="Удалить" /></a>
	</li>
</ul>

В атрибутах id хранится значения поля id соответствующих записей в БД. Приставки note_ и n_ добавлены для совместимости со стандартом (значение атрибута id не может начинаться с цифры).

Каждый тег li содержит текст записи и ссылку «Удалить».

Сортировка списка

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

Сделать список сортируемым можно одной строчкой кода (в файле init.js)

$('#sortable').sortable();

Добавление новых записей

Рассмотрим скрипт addnote.php

try {
	//проверяем, пришел текст записи или нет
	if (!isset($_POST['notetext']) || '' == $_POST['notetext']) {
		throw new Exception('Не указан текст записи');
	}
	//подключаемся к БД
	require_once('db.php');
	//находим запись с максимальным значением в поле order
	$query = $dbh->query('SELECT note_order FROM notes ORDER BY note_order DESC LIMIT 1');
	$result = $query->fetchAll();
	if (0 == count($result)) {
		$order = 1;
	} else {
		$order = $result[0]['note_order'] + 1;
	}
	//вставляем новую запись, поле note_order новой записи будет на единицу больше,
	//чем у найденной записи
	$notetext = htmlspecialchars($_POST['notetext']);
	$dbh->exec('INSERT INTO notes (note, note_order) VALUES ('.$dbh->quote($notetext).', '.$order.')');
	$result = array();
	//получаем id созданной записи
	$result['id'] = $dbh->lastInsertId();
	$result['note'] = $notetext;
	$result['note_order'] = $order;
	$dbh = null;
	//отправляем результаты браузеру
	echo json_encode($result);
} catch(Exception $e) {
	echo json_encode(array('err'=>'Ошибка: '.$e->getMessage()));
}

Прежде чем добавлять в базу запись, нам нужно определиться с её номером сортировки. Форма находится над списком, поэтому будет логично, что запись появится сразу под ней, т.е. в начале списка.

Чтобы не создавать отрицательные номера сортировки, я решил выводить список в порядке убывания этих номеров (значений в поле note_order). Поэтому первая запись списка будет иметь максимальный номер.

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

Затем выполняем обычный запрос создания записи, получаем её id и отправляем его браузеру.

Теперь рассмотрим клиентскую часть.

Записи у нас будут создаваться с помощью AJAX запросов, поэтому назначаем форме обработчик события submit.

$('#addNewNote').submit(function() {
	var note = $('#notetext').val();
	if (note != '') {
		//отправка запроса
		$.post('addnew.php', {'notetext':note}, function(data) {
			var response = eval('('+data+')');
			if (response['err'] != null) {
				alert(response['err']);
			} else {
				var list = $('#sortable');
				//если список отсутствует
				if (list.length == 0) {
					//удаляем текст "Записи отстутствуют"
					$('h2').detach();
					//создаем список
					$('<ul id="sortable"></ul>').sortable().insertAfter($('#addNewNote'));
					//создаем форму "Сохранить сортировку"
					createChangeOrderForm().insertAfter($('ul#sortable'));
				}
				//вставляем новую запись в список
				createLi(response['id'], response['note']).prependTo('#sortable');
			}
		});
	} else {
		alert('Вы забыли ввести текст заметки');
	}
	return false;
});

В нём мы проверяем, заполнено ли поле с текстом записи, и отправляем AJAX запрос скрипту addnew.php.

После получения ответа сервера мы либо выводим сообщение об ошибке, либо добавляем новую запись. При добавлении записи проверяем, существует ли список вообще и, если нет, создаём его. Обратите внимание, что при создании списка мы делаем его сортируемым (метод sortable()).

Отдельно рассмотрим функцию создания элемента списка (тег li).

function createLi(id, note) {
	var note = $('<span class="note" id="n_' + id + '">' + note + '</span>').editable('update.php', editableOptions);
	var link = $('<a href="#"><img src="images/delete.png" alt="Удалить" /></a>').click(removeLi);
	return $('<li id="note_' + id + '" class="editable"></li>').append(note).append(link);
}

Здесь мы устанавливаем классы и id элементов и назначаем обработчики событий. Всего обработчиков два:

- обработчик двойного клика по тексту записи (он создаётся методом .editable, подробнее о нём чуть позже);

- обработчик клика по ссылке «Удалить» (позже мы его тоже подробно рассмотрим).

На этом я сегодня остановлюсь. Остальные функции мы рассмотрим в следующий раз.

Если есть вопросы или замечания, пишите, постараюсь ответить.

До встречи!

UPD. Дописал продолжение jQuery + плагины: сортировка и редактирование списка (часть вторая)

Сегодня вряд ли у кого-то вызывает сомнения популярность твиттера, и многие блоггеры размещают в сайдбаре ленту сообщений с этого сервиса. Вообще, это хорошая идея, особенно если тематика сообщений в твиттере совпадает с тематикой блога, но её можно развить.

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

Сделать это несложно. Добавляем подходящие twitter-ленты в отдельный список и публикуем его ленту. В этой статье я покажу, как создать такой виджет с помощью JavaScript.

Сразу даю ссылки на пример и архив с исходниками.

Примечание. Скорее всего, подобные возможности есть в существующих twitter плагинах, но собственное решение всегда легче настраивать , к тому же, сделать нужно совсем немного.

Для начала немного теории.

Получение списка твитов.

Как вы, наверное, знаете twitter предоставляет разработчикам довольно неплохой API для работы с сервисом. Им мы и воспользуемся. Потребуется всего одна функция GET list statuses. Она возвращает список твитов выбранного списка.

Принцип её работы следующий. Нужно отправить обычный GET запрос вида.

http://api.twitter.com/1/user/lists/list_id/statuses.format

где user – имя пользователя, который создал список;
list_id – название списка;
format – формат возвращаемых данных (доступны три варианта: xml, json и atom).

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

http://api.twitter.com/1/simplecoding/lists/webdev/statuses.json

Здесь simplecoding – имя пользователя (т.е. мой аккаунт в твиттере), а webdev – название списка. Т.к. работать мы будем на JS, то удобнее всего использовать json формат. Но вручную просматривать полученные данные удобнее в xml, т.к. большинство браузеров позволяет сворачивать xml теги. Так или иначе, если вы планируете работать с твиттером, просмотреть эти данные будет интересно.

Переходим к созданию виджета.

Чтобы виджет было удобно использовать на разных сайтах, я решил написать плагин к jQuery, который будет получать список твитов и вставлять их в указанный контейнер (например, тег div). Оформление виджета сделаем с помощью CSS.

Создаём страницу, на которой будет находиться виджет.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <title>My Twitter List</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <h1>My Twitter List</h1>
    <div id="mylist"></div>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="twitterlist.jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#mylist').twitterList();
        });
    </script>
</body>
</html>

Для виджета мы создали тег div (строка 10), затем подключили файлы библиотеки jQuery и нашего плагина (twitterlist.jquery.js, строки 11, 12).

Запуск плагина выполняется с помощью метода twitterList(). В параметрах этого метода можно указать имя пользователя и название списка, твиты из которого нужно показать. Например

twitterList({'user':'maxsite', 'list':'bloggers'})

Рассмотрим сам плагин

(function($) {
    $.fn.twitterList = function(settings) {
        //дефолтные настройки
        var config = {
            'user' : 'simplecoding'
            ,'list' : 'webdev'
        };
        //применяем настройки, указанные пользователем
        if (settings) $.extend(config, settings);
        //сохраняем указатель на блок, в который нужно вставить твиты
        var twitterBlock = this;
        //получаем список твитов

        //шаблон для поиска ссылок в твитах
        var pattern = /(http\S+)/gi;

        $.getJSON('http://api.twitter.com/1/' + config.user + '/lists/' + config.list + '/statuses.json?per_page=10&callback=?'
            , function(twites) {
                //добавляем твиты в блок на странице
                $.each(twites, function(i, tweet) {
                    //добавляем к ссылкам тег a
                    var text = tweet.text.replace(pattern, '<a href="$1">$1</a>');
                    //создаём тег div с текущим твитом...
                    var curTweet = $('<div class="tweet">' + text + '</div>');
                    //...вставляем его в список
                    curTweet.appendTo(twitterBlock);
                });
            }
        );
    };
})(jQuery);

Если вы никогда не писали плагинов для jQuery и не использовали JSONP, то этот код вызовет вопросы. Поэтому я очень советую прежде чем приниматься за этот пример прочитать две статьи: Создаем плагин для jQuery и XSS с использованием JSONP и jQuery или любые другие материалы на эти темы.

Здесь мы только кратко рассмотрим, что происходит при запуске плагина.

1) Сохраняем параметры, указанные пользователем в хеше config.

2) Сохраняем имя блока, в который нужно вставлять твиты в переменной twitterBlock.

3) Создаём регулярное выражение для поиска ссылок в твитах. Твиты мы получим в виде обычного текста, поэтому вставлять теги <a> нужно будет самостоятельно.

4) Отправляем запрос серверу твиттера. Тут к запросу мы добавили два параметра: per_page=10 (количество твитов, которые мы хотим показать) и callback=? (имя функции, которой будут переданы полученные данные). Вместо знака вопроса jQuery подставит сгенерированное имя функции. Саму функцию мы объявляем во втором параметре метода getJSON.

5) Формируем список твитов. Эта операция выполняется в анонимной функции (строки 18-27), которая будет вызвана сразу после получения данных от twitter'а. Мы получим массив объектами, которые содержат данные каждого твита.

В данном случае нам нужно только вывести текст твита (он находится в атрибуте text) и сформировать ссылки. В нашем случае получить текст можно с помощь tweet.text, а создать ссылки – с помощью
replace(pattern, '<a href="$1">$1</a>'),
вместо $1 будет подставлена ссылка (совпадение с первой маской в регулярном выражении).

Вставку твита в список выполняем с помощью метода appendTo (строка 26).

Всё! Плагин работает. Естественно, функциональность виджета минимальная, но её несложно расширить. Например, можно добавить фотографии пользователей, ссылки на их ники и т.п. (всю эту информацию мы получаем в массиве с данными твитов).

Кроме того, возможно, вы захотите сделать фильтрацию твитов по каким-нибудь ключевым словам. Ограничений практически нет.

Я планирую продолжить эту тему, поэтому буду рад любым советам, пожеланиям и идеям!

До встречи!

Полезные ссылки.

На нашем портале вы найдёте полезные инструменты, которые помогут выбрать недвижимость, а также интересные статьи и объявления.

Попали в незнакомый город и боитесь заблудиться? В такой ситуации вам пригодятся GPS навигаторы от ведущих мировых производителей.

В вашей квартире старые окна и вы мёрзнете зимой? Решить проблему поможет установка пластиковых окон. Они не только сохранят тепло, но и защитят от шума.

Приветствую всех!

В этой статье речь пойдёт о том как использовать Yii PHP framework и плагин к jQuery под названием jqGrid. Я не буду повторяться и рассказывать о том, что из себя представляют Yii и jqGrid и зачем они нужны. Вы легко найдёте все мои заметки на эту тему с помощью поиска по блогу (кстати, все статьи о Yii вынесены в отдельный раздел).

Когда я проводил этот эксперимент, меня интересовали два момента:

1) подключение jgGrid;

2) преобразование данных, полученных с помощью CActiveDataProvider в формат понятный для jgGrid.

С первым пунктом всё более-менее понятно. jqGrid представляет собой набор JS и CSS файлов, которые нужно подключить к странице.

Для этих целей в Yii предусмотрены специальные методы: registerScriptFile и registerCssFile. Можно, конечно, просто прописать теги script в представлении, но делать этого не рекомендуется, т.к. в этом случае фреймоворк не сможет отслеживать повторные подключения скриптов.

Примечание. Подробнее о работе с JS и CSS файлами можно почитать здесь.

Т.к. я просто экспериментировал, я сделал тестовое представление (testjqgrid.php)

//подключение CSS файлов и JS скриптов
$cs = Yii::app()->clientScript;

$cs->registerCssFile(Yii::app()->request->baseUrl.'/jqgrid/css/ui.jqgrid.css');
$cs->registerCssFile(Yii::app()->request->baseUrl.'/jqgrid/css/ui-lightness/jquery-ui-1.7.2.custom.css');

$cs->registerScriptFile(Yii::app()->request->baseUrl.'/jqgrid/js/jquery-1.3.2.min.js');
$cs->registerScriptFile(Yii::app()->request->baseUrl.'/jqgrid/js/i18n/grid.locale-ru.js');
$cs->registerScriptFile(Yii::app()->request->baseUrl.'/jqgrid/js/jquery.jqGrid.min.js');
?>
<table id="list"></table>
<div id="pager"></div> 

<script type="text/javascript">
$(function() {
	jQuery("#list").jqGrid( {
		url : '<?php echo $this->createUrl('blogs/jqgriddata'); ?>',
		datatype : 'json',
		mtype : 'GET',
		colNames : [ '#', 'Name', 'URL', 'API' ],
		colModel : [ {
			name : 'b_id',
			index : 'b_id',
			width : 60
		}, {
			name : 'b_name',
			index : 'b_name',
			width : 120
		}, {
			name : 'b_url',
			index : 'b_url',
			width : 150,
			align : 'right'
		}, {
			name : 'b_api',
			index : 'b_api',
			width : 80,
			align : 'right'
		} ],
		pager : '#pager',
		rowNum : 10,
		rowList : [ 10, 20, 30 ],
		sortname : 'invid',
		sortorder : 'desc',
		viewrecords : true,
		caption : 'Blogs'
	});
});
</script>

Как видите, сначала мы регистрируем скрипты и файлы стилей, затем вставляем тег для таблицы (строка 12) и тег для панели навигации.

Примечание. В этом примере использован первый попавшийся контроллер (BlogsController). Кроме того, для получения данных используется модель Blogs. Зачем она нужна, в данном случае не принципиально, мы просто будем отображать записи из таблицы с помощью jqGrid.

В конце представления находится код настройки jqGrid. Таблица будет содержать 4 колонки с названиями: «#», «Name», «URL» и «API», а соответствующие поля в таблице имеют названия: «b_id», «b_name», «b_url» и «b_api».

И, конечно, нужно указать адрес скрипта, который будет формировать данные для таблицы (строка 18, параметр url).

Формирование таблицы.

Т.к. jqGrid получает данные с помощью AJAX запросов, то мы добавим два метода в контроллер. Первый – actionJqgrid, будет формировать страницу с таблицей, т.е. просто загружать представление. Второй – actionJqgriddata, предназначен для обработки AJAX запросов.

public function actionJqgrid() {
	$this->render('testjqgrid');
}

public function actionJqgriddata() {
	$dataProvider=new CActiveDataProvider('Blogs', array(
		'pagination'=>array(
			'pageSize'=>$_GET['rows'],
			'currentPage'=>$_GET['page']-1,
		),
	));
	$responce->page = $_GET['page'];
	$responce->records = $dataProvider->getTotalItemCount();
	$responce->total = ceil($responce->records / $_GET['rows']);
	$rows = $dataProvider->getData();
	foreach ($rows as $i=>$row) {
		$responce->rows[$i]['id'] = $row['b_id'];
		$responce->rows[$i]['cell'] = array($row->b_id, $row->b_name, $row->b_url, $row->b_api);
	}
	echo json_encode($responce);
}

Рассмотрим их подробнее. Как я уже говорил, метод actionJqgrid просто загружает представление. Получать данные из базы нам не нужно, т.к. при создании таблицы jqGrid всё равно отправит AJAX запрос на их получение.

С методом actionJqgriddata ситуация немного сложнее. Дело в том, что нам нужно преобразовать данные, которые возвращает CActiveDataProvider в формат, понятный jqGrid.

Для этого мы создаём объект $responce и в нём сохраняем:

1) page – номер текущей страницы;

2) records – общее количество записей;

3) total – общее количество страниц;

4) rows – массив с данными. Каждый элемент этого массива должен содержать id текущей записи и массив cell с данными ячеек. Этот массив мы формируем с помощью цикла (строки 16-19).

После это преобразовываем $responce в JSON формат и возвращаем браузеру.

Как видите, принцип достаточно простой, но код получается объёмный. В принципе, есть расширение eziiui, которое упрощает работу с jqGrid, но судя по отзывам, оно ограничивает ваши возможности в использовании jqGrid, поэтому я им не пользовался.

Может быть стоит написать расширение, которое будет преобразовывать данные из CActiveDataProvider в JSON формат? Или есть другие идеи?

Полезные ссылки

Блоггер, заходи на новый форум блоггеров, общайся и зарабатывай.

Не бойтесь холода, подберите себе шарфы интернет магазин.

Тему этого поста подсказал мне читатель по имени Alex, за что ему большое спасибо.

Речь о компонентах zii, которые, начиная с версии 1.1, входят в состав фреймворка, и активно используются утилитой yiic при генерации кода.

К сожалению, документация по этим компонентам есть только в виде API (комментарии к исходникам) и её явно недостаточно.

Ситуация следующая. Если вас полностью устраивает код, который генерирует yiic – никаких проблем. Но вот что-то изменить или добавить какие-нибудь возможности уже сложнее.

Рассмотрим такую ситуацию. Для одной из таблиц в БД вы создали стандартный набор CRUD операций. И вам нужно в таблицу с перечнем записей добавить дополнительную кнопку. На первый взгляд, задача довольно простая, т.к. таблица генерируется с помощью виджета 'zii.widgets.grid.CGridView' и среди компонентов zii есть CButtonColumn, который специально предназначен для создания колонок с кнопками. Т.е. задача заключается в настройке этого компонента.

Чтобы было понятнее, рассмотрим небольшой пример.

Создаём новое приложение
yiic webapp .
По-умолчанию в нём есть sqlite база с одной таблицей (данными пользователей)

Создаём модель
yiic shell
model User tbl_user

и CRUD интерфейс
crud User

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

При этом страница управления записями (index.php?r=user/admin) содержит таблицу с перечнем записей и столбцов с кнопками «View», «Update», «Delete». Я сделал скриншот (несколько колонок убрал, чтобы уменьшить ширину таблицы).

Взгляните на код, который создаёт стандартную таблицу с тремя кнопками.

<?php $this->widget('zii.widgets.grid.CGridView', array(
	'dataProvider'=>$dataProvider,
	'columns'=>array(
		'id',
		'username',
		'password',
		'email',
		array(
			'class'=>'CButtonColumn',
		),
	),
)); ?>

В массиве columns перечисляем названия столбцов таблицы. Если имя столбца совпадает с полем таблице, то оно будет заполнено соответствующими данными. В последнем элементе указан массив с одним элементом 'class'=>'CButtonColumn'. Этого достаточно для создания трёх стандартных кнопок.

Попробуем добавить ещё один столбец с кнопкой «AJAX запрос». Для этого добавим ещё один элемент в массив 'columns'

array(
	'class'=>'CButtonColumn',
	'buttons'=>array(
		'preview'=>array(
			'label'=>'AJAX запрос',
			'url'=>'…',
			'click'=>'…',
		),
	),
	'template'=>'{preview}',
),

Принцип следующий. В элементе 'buttons' нужно указать массив с новыми кнопками. При этом ключ каждого элемента этого массива является названием кнопки. Его мы должны использовать в элементе 'template' для того, чтобы показать кнопку в таблице. Название необходимо заключит в фигурные скобки. При этом можно добавить в одну ячейку сразу несколько кнопок, например, так:
'{view} {update} {delete}'.

Для каждой кнопки необходимо указать массив с параметрами.
'label' – содержит текст, который будет отображаться на кнопке.
'url' – PHP выражение, которое сформирует ссылку для данной кнопки.
'click' – JS функция, которая будет назначена в качестве обработчика клика по кнопке.

Кроме того, можно указать картинку и массив с html атрибутами с помощью параметров 'imageUrl' и 'options'. Но сейчас речь не о них. У меня больше всего вопросов вызвали 'url' и 'click'.

Расписывать свои ковыряния в исходниках я не буду. Лучше сразу покажу решение.

В параметре 'url' нужно записать PHP выражение, которое сформирует URL, в виде строки, т.е. в кавычках. Например,

'url'=>'Yii::app()->createUrl("user/getuser")'

При этом будут доступны две переменные: $row и $data. Первая содержит номер строки, вторая – объект с данными текущей записи. Т.е. добавить в запрос GET параметр с email’ом пользователя можно так:

'url'=>'Yii::app()->createUrl("user/getuser", array("email"=>$data->email))'

Для того, чтобы проверить отправку AJAX запросов я добавил в контроллер метод actionGetuser. Он ищет пользователя по его email'у.

public function actionGetuser() {
	if (isset($_GET['email'])) {
		$user = User::model()->find('email=:email', array(':email'=>$_GET['email']));
		if (null !== $user) {
			echo $user->username;
		} else {
			echo 'unknown';
		}
	} else {
		echo 'unknown';
	}
}

Напишем функцию, которая будет выполнять отправку запроса. Я добавил её прямо в представление.

<?php
$js_preview =<<< EOD
function() {
	var url = $(this).attr('href');
	$.get(url, function(response) {
		alert(response);
	});
	return false;
}
EOD;
?>

<?php $this->widget('zii.widgets.grid.CGridView', array(
	'dataProvider'=>$dataProvider,
	'columns'=>array(
		'id',
		'username',
		'password',
		'email',
		array(
			'class'=>'CButtonColumn',
		),
		array(
			'class'=>'CButtonColumn',
			'buttons'=>array(
				'preview'=>array(
					'label'=>'AJAX запрос',
					'url'=>'Yii::app()->createUrl("user/getuser", array("email"=>$data->email))',
					'click'=>$js_preview,
				),
			),
			'template'=>'{preview}',
		),
	),
)); ?>

Как видите, текст JS функции присвоен переменной $js_preview. Эту переменную мы и указываем в параметре 'click'.

Принцип работы следующий.

1) Получаем URL данной кнопки (с помощью $(this).attr('href')). Он уже содержит email в качестве GET параметра.

2) Отправляем AJAX запрос (с помощью $.get).

3) Показываем результат (alert(response)).

Как видите, кода нужно написать минимум, но, повторюсь, очень хотелось бы почитать подробное руководство от разработчиков о компонентах zii

Если есть замечания или вопросы, пишите, обсудим

Интересно почитать

Дейтинг – хорошая возможность заработать на своих интернет-проектах.

Спастись от жары не сложно. Достаточно купить сплит-системы.