Textpattern - на русском языке

Sergey · 09-01-2007 22:56:57

Мысль попробовать Ajax в Textpattern мне приходила давно, к сожалению, по различным причинам времени на эксперименты не находилось. После нового года я заключил со своей печенью «пакт о ненападении» и решил потратить свободное время на полезные для себя и человечества вещи.

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

Итак, чтобы свершить задуманное нам понадобится библиотека Jquery, установленный на хост Textpattern и немного свободного времени.
Убеждаемся, что все ингредиенты в куче. Создаем в Textpattern’е новую секцию и называем ее, к примеру “data”. К ней мы будем обращаться, чтобы забрать данные. Делаем шаблон для секции «data», в него помещаем следующий код:

<txp:php>
echo chh_article(array(
'section' => ps('section'),
'limit' => '10',
'listform' => 'cat_article_list'
));
</txp:php>

Где-то на этот форуме пробегал метод про то, как можно обращаться к плагинам. Новости будут отдаваться плагином chh_article, некоторыми атрибутами которого я решил воспользоваться:

‘section’ – переменная, которая указывает, из какой секции будем тянуть новости.
‘limit’ – количество запрошенных новостей.
‘listform’ – форма, которой будет формироваться вывод новости в списке. Ее тоже нужно создать, либо воспользоваться той, что идет как “default”.

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

<script type="text/javascript" src="/js/jquery.js"></script>

В самой странице, среди прочего xHTML вставляем пустой div c идентификатором “ajx_data”:

<div id=”ajx_data”></div>
После этого создаем новый, небольшой javascript в UTF-8 кодировке с функцией “getData” и ее параметром “name”:
function getData(name) {
$("div#ajx_data").load("/data/",{section:name});
};

Функция скрипта, оперируя методами фреймворка, находит на нашей, только созданной странице “div” c идентификатором “ajx_data” и загружает в него данные из секции “data”, передавая параметр “name” в секцию.
С параметром “name” мы разберемся чуть ниже, а пока подключаем созданный скрипт в между тегами <head></head> на странице, точно так же как фреймворк.

Теперь создадим события, отлавливая которые javascript инициирует загрузку новостей из секции “data”.
Возвращаемся к странице, где почти все уже готово для явления нового чуда. Создаем обычную ссылку с необычным параметром:

<a href=”#” onclick=”getData(‘myOneSection’);” >Моя секция</a>

Атрибут onclick=”getData(‘myOneSection’);” вызывает из нашего javascript’a функцию, которая, как мы уже выяснили, загружает в div данные из секции “data”, передавая параметром название секции.

Сохраняемся, вроде бы ничего не забыли.

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

Отредактированно Sergey (23-03-2007 21:36:51)

Jack · 09-01-2007 23:38:28

спасибо,
давно интересовался вопросом применения Ajax в Txp
буду разбираться

AngryCAT · 06-02-2007 22:06:52

Супер! Сегодня попробывал, только с использованием mootools. Остаётся только придумать, как так аккуратно ограничить использование этого Ajax. Думаю, разумнее всего, выводить в ТулТипе выдержку при наведении мыши на заголовок статьи в списке.

Sergey · 07-02-2007 03:36:58

Чем mootools лучше Jquery?

AngryCAT · 07-02-2007 15:18:25

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

Gobbr · 08-07-2007 18:58:27

В процессе переделывания своего блога и заботясь об удобстве пользователей, я решил реализовать интересную, на мой взгляд, фишку, подсмотренную на del.icio.us и memori.ru – переключатель отображения тегов (облако/список).

На мой взгляд использование AJAX в данном случае не только оправдано, но и предпочтительно.
Оба варианта отображения тегов, я уже обкатал с плагином tru_tags. Так же нашел плагин chs_cookie, который может пригодиться для запоминания выбора пользователя.
Сложность же для меня, составляет сама технология AJAX, которой я, признаться, не владею. Было бы великолепно, если бы кто-либо помог мне с этим.

Sergey · 13-07-2007 02:25:20

1. Открываем шаблон секции, где будем организовывать вывод кейвордов в двух вариантах при помощи Ajax.

2. Между тегами <head> и </head> вставляем вызов библиотеки jQuery:

<script type="text/javascript" src="/textpattern/jquery.js"></script>

Я решил вспользоваться той версией, что идет в стандарной поставке вместе с ТП 4.0.5

3. Создаем новый файл, где напишем функцию, которая будет делать всю работу по загрузке. Я назвал файл "ajax.js". Сохраняем файл в кодировке UTF-8 и пишем в него следующую функцию:

function getTag(arg) {
$.post( '/tags/', { sort: arg, },onAjaxSuccess);

function onAjaxSuccess(data) {
$("#replaced").empty().html(data);
}

}

Функция отправляет, используя POST метод, данные в скрипт и загружает их обратно. Отправлять в скрипт мы будем параметр сортировки "arg", а загружать отсортированный результат. Используется функция вот так:

$.post( 'название_секции_откуда_берем_данные', { название_переменной_которая_рассказывает_скрипту_как_сортировать_кейворды:значение_сортировки, },название_функции_которая_обрабатывает_данные_после_загрузки);

Рассмотрим следующую функцию, она вставляет полученные данные на страницу:

function onAjaxSuccess(data) { $("#ID_дива_в_который_вставляем_контент").предвательно_очищаем_его().вставляем_как_html(данные);
}

Эта функция срабатывает, когда контент успешно загружен.

4. Вставляем вызов файла после jquery.js, точно также как и в п.1

5. Открываем шаблон секции и вписываем в то место, где будет облако тегов:

<div id="t_wrapper">
<a href="#list" onclick="getTag('list');">Списком</a> <a href="#cloud" onclick="getTag('cloud');">Облаком</a>
<div id="replaced">
<txp:tru_tags_list />
</div>
</div>

<div id="t_wrapper"> - контейнер для списка кейвордов. Может иметь какой угодно ID. Участвует только в дизайне.
<a href="#list" onclick="getTag('list');">Списком</a> <a href="#cloud" onclick="getTag('cloud');">Облаком</a> - Ссылки, которые вызывают функцию с параметрами сортировки тегов. А функция уже передается скрипты, который я опишу чуть ниже.
<div id="replaced"> - контейнер, в который функция будет вставлять отсортированные кейворды. Название можно менять, но тогда его нужно поменять и в функции onAjaxSuccess в файле ajax.js.
<txp:tru_tags_list /> - первоначальный вызов плагина, для того чтобы у нас открывалась страница с начальным вариантом кейвордов.

6. Теперь напишем скрипт, который принимает параметр сортировки и возвращает кейворды. Выглядит он вот так:

<txp:php>
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){
switch ($_POST['sort']) {
case "cloud":
echo tru_tags_cloud();
break;

case "list":
echo tru_tags_list();
break;
}
exit();
}
</txp:php>

Рассмотрим построчно:
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') - проверям каким образом вызван скрипт. Дело в том, что когда мы запрашиваем данные у скрипта с помощью jQuery, то последняя посылает заголовок "XMLHttpRequest". Эта дает нам возможность определить, что скрипт вызвана Ajax'ом и нужно должным образом прореагировать. В противном же случае, надлежит просто тихо завершиться и никак не обнаруживать себя.

switch ($_POST['sort']) - начало проверки параметра сортировки кейвордов, который мы передали с помощью описанной выше функции "getTag".

case "cloud": - если в параметре сортировки чтоит значение cloud,
echo tru_tags_cloud(); - то вывести отсортированные кейворды как облако.
break; - завершить цикл.
... точно какже поступаем если в параметр сортировки содержит "list".
exit(); - после отработки всех условий завершаем скрипт и выводим html-шаблон, который идет ниже.

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

Вот и все. Надеюсь, что ничего не забыл и не запутал Успехов!

Отредактированно Sergey (13-07-2007 02:44:09)

Sergey · 26-07-2007 14:39:42

Помогло?

PolyGon · 26-07-2007 16:28:26

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

Отредактированно PolyGon (26-07-2007 16:29:48)

Gobbr · 08-08-2007 13:57:00

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

Если четко следовать инструкциям, то работает, но не особо корректно.
Не работает в Опере и IE. Работает в FF, но при подгрузке всместе с тегами выдает ошибки

tag_error <txp:php> -> Warning: Missing argument 1 for tru_tags_cloud() on line 54
и
tag_error <txp:php> -> Warning: Missing argument 1 for tru_tags_list() on line 59

Я еще не успел разобраться что это за ошибки и посмотреть каким образом можно прикрутить туда куки.

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

Создаем страницу tags приблизительно с таким кодом:

<txp:chs_cookie_default cookie="tags">
<txp:tru_tags_list>
</txp:chs_cookie_default>

<txp:chs_if_cookie cookie="tags" value="list">
<txp:tru_tags_list>
</txp:chs_if_cookie>

<txp:chs_if_cookie cookie="tags" value="cloud">
<txp:tru_tags_cloud>
</txp:chs_if_cookie>

В шаблоне основной страницы в <div id="replaced"> прописываем то же самое, чтобы учитывался уже сделанный выбор.
Делаем что бы при нажатии на ссылки «Списком/Облаком» делалась соответствующая запись в куки и при помощи ajax в <div id="replaced"> подгружалась страница tags.

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

Отредактированно Gobbr (08-08-2007 14:00:40)

Nikk · 17-03-2008 21:56:32

Проникся этой темой и решил попробовать что то сделать

Решил совместить плагин Zem_contact и Ajax.

Вот что получилось _www.uniflat.ru/a/
Прошу прощения что в дизайн сайта вписал, хотелось максимально приблизить результат к реальному сайту.

Про то за чем это надо - какой то уж большой необходимости и полезности думаю нет, просто хотелось понять, насколько сложно функции и плагины Textpatterns заставить работать с применением Ajax.
Ясно, что классичекий код отправки email из java скрипта - три строчки кода и библиотек никаких не надо, но просто хотелось понять - можно или нет.

Оказалось все очень просто
Теперь хоть руки себе связыай - охота всюду Ajax запихнуть - знаю - ЗЛО

ps
И почему то не работает ни в Opera ни FireFox

Видимо Jquery - совсем не универсальны выбор
Буду разбираться дальше

Отредактированно Nikk (17-03-2008 23:45:25)

Nikk · 17-03-2008 23:24:56

Сделал следующим образом (пока только для IE ):

Качаем последние версии Jquery- основная библиотека и Jquery.form -плагин для работы с формами с офф сайта _http://jquery.com/

1. Делаем новую секцию - это для эксперимента, а так можно любую существующую взять, назовем ее для простоты 'a' от ajax

2. устанавливаем плагин Zem Contact Reborn

3. настраиваем его, только обязательно настройки формы для ввода сообщения выносим в отдельную txp-форму/ Назовем ее send_cnct_a

Код:

<txp:zem_contact_text label="Ваше имя" min=3 max=30 required="no" name="Name" /><br />
<txp:zem_contact_text label="Ваш телефон" min=7 max=20 required="no" name="Phone" /><br />
<txp:zem_contact_email required="yes" /><br />
<txp:zem_contact_textarea label="Ваше сообщение" min=2 max=5000 required="yes" name="Message" cols=20 /><br />
<txp:zem_contact_serverinfo name="REMOTE_ADDR" label="IP" />
<txp:zem_contact_submit button="yes" label="Отправить"/>

4. проверяем его работу, добавив соответствующий тег в шаблон секции

5. если все работает - тег удаляем

6. Подключаем в Head библиотеки

Код:

<script type="text/javascript" src="/js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>

7. где хотим видеть вывод формы отправки сообщения на странице вставляем пустой или нее пустой div с id="ajax_1".
id может быть любое. Настраиваем div (css, и т.д.) так как мы предполагаеи, чтобы он выглядел после получения данных от скрипта

Код:

<div style="width:90%;" id="ajax_1" name="ajax_1">
<p>Здесь все будет отображаться</p>
</div>

8. в самом начале, после тега <body>, вставляем java скрипт с объявлением функций для работы с ajax

Код:

<script type="text/javascript">

function getData(name) {
if ($.browser.mozilla) {
   alert("Ничего не выйдет - это FF");
    return false; 
};
  var e_to = $('input#Email_to').fieldValue(); 
  $("div#ajax_1").load("/a/",{num:name, Email_to:e_to});
}

function showRequest(formData, jqForm, options) { 
    var queryString = $.param(formData); 
    alert('Данные формы, передаваемые в PHP скрипт: \n\n' + queryString); 
    return true; 
} 
 
function showResponse(responseText, statusText)  { 
    alert('status: ' + statusText + '\n\То, что возвращает сервер: \n' + responseText + '\n\nDIV для данных на странице уже изменился.'); 
}

</script>

9. в созданную txp-форму настроек zem_contact вносим следующие изменения
9.1. в самом конце формы дописываем java скрипт

Код:

<script type="text/javascript">
$(document).ready(function() { 
    var e_to = $('input#Email_to').fieldValue();
    $('input#Email_to_inForm').val(e_to);
    var options = { 
        target:        'div#ajax_1',
        beforeSubmit:  showRequest,   
        success:       showResponse,
        url:           '/a/'
    }; 

    $('form.zemContactForm').ajaxForm(options); 
})
</script>

9.2. в начале списка полей добавляем новое текстовое поле. Когда будете делать рабочую версию - оно абсолютно не нужно, но в данном случае для примера, и для того чтобы можно было выбрать адрес, куда будет отправлено сообщение, ну и для понимания работы другий функций Jquery все таки его добавим. Собственно оно будет выполнять функцию передачи в php скрипт именно адреса - "куда". так как zem_contact не поддерживает на прямую выбор этого адреса? а вызывается zem_contact два раза - для отображения формы ввода и для завершения, то есть отправки сообщения и если атрибут 'to' не заполнен или при первом и втором вызове не совпадает, то zem_contact работать не будет.

Код:

<label>Email-КУДА</label><br />
<input type="text" id="Email_to_inForm" name="Email_to_inForm" value="" maxlength="100" /><br />

10. Добавляем в шаблон секции код для вызова формы отправки сообщения. Можете разместить его где угодно на странице - не принципиально.
В данном случа, код будет содержать поле ввода для задания email адреса "КУДА". Можно было бы как то изящнее это сделать, но для тренировки посчитал этого достаточным. Его нужно заполнять до нажатия на ссылку, по которой будет открываться форма отпраки сообщения.

Код:

<p>
<a href="#" onclick="getData('1');" >Покажет текст - Все работает</a>
<br>
<br />
<br />
<label>До нажатия на ссылку, введите Email-КУДА</label>
<input type="text" id="Email_to" name="Email_to" value="" maxlength="100" />
<br />
<a href="#" onclick="getData('2');" >Отправить сообщение </a>
<br />
</p>

11. Далее добавляем в начало шаблона страницы секции, до doctype собственно php код, который все это и обрабатывает.

Код:

<txp:php>

 if (isset($_REQUEST['zem_contact_submit'])) 
 {
    $e_to=$_REQUEST['Email_to_inForm'];
    echo zem_contact(array(
    'to' => $e_to,
    'label' => 'Zem contact и Ajax',
    'subject'  => 'Эксперименты с Ajax',
    'thanks_form' => 'send_cnct_thanks_a',
    'form' => 'send_cnct_a',
    'show_error' => 'yes'));
    exit();
};

if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')
{
 if (isset($_REQUEST['num'])) 
 {
   if ($_REQUEST['num']==1) echo "<p>Все работает </p>";
   if ($_REQUEST['num']==2)
    {
    $e_to=$_REQUEST['Email_to'];
    echo zem_contact(array(
    'to' => $e_to,
    'label' => 'Zem contact и Ajax',
    'subject'  => 'Эксперименты с Ajax',
    'thanks_form' => 'send_cnct_thanks_a',
    'form' => 'send_cnct_a',
    'show_error' => 'yes'));
    }; 
 }
exit();
} 

</txp:php>

12. Создаем "спасибо -форму"

Код:

<p> Спасибо, Ваше сообщение отправлено администрации сайта. <br/> Вы можете отослать еще одно <a href="#" onclick="getData('2');"> сообщение</a> или перейти <txp:link_to_home>на главную</txp:link_to_home> страницу сайта. </p>

Далее все сохраняем и пробуем
Если ничего не забыл - то должно все работать

Отредактированно Nikk (18-03-2008 00:53:33)

Nikk · 18-03-2008 00:40:02

Для Opera все решилось добавлением к атрибутам div, в котором выводится ответ от сервера атрибута name с таким же значением как и id

В firefox ответ от сервера все равно выводится в новом чистом, блин, окне.

Значит под FF надо отдельно кодить что-ли? Причем не помог апгрейд до версии 2.0.0.6, хотя на офф сайте Jquery пишут, что достаточно версии 1.5+

java скрипт - ЗЛО или FF - ЗЛО ?

Отредактированно Nikk (18-03-2008 00:43:33)

Textpattern - на русском языке

Объявление

#1 09-01-2007 22:56:57

Textpattern и Ajax

#2 09-01-2007 23:38:28

Re: Textpattern и Ajax

#3 06-02-2007 22:06:52

Re: Textpattern и Ajax

#4 07-02-2007 03:36:58

Re: Textpattern и Ajax

#5 07-02-2007 15:18:25

Re: Textpattern и Ajax

#6 08-07-2007 18:58:27

Re: Textpattern и Ajax

#7 13-07-2007 02:25:20

Re: Textpattern и Ajax

#8 26-07-2007 14:39:42

Re: Textpattern и Ajax

#9 26-07-2007 16:28:26

Re: Textpattern и Ajax

#10 08-08-2007 13:57:00

Re: Textpattern и Ajax

#11 17-03-2008 21:56:32

Re: Textpattern и Ajax

#12 17-03-2008 23:24:56

Re: Textpattern и Ajax

Код:

Код:

Код:

Код:

Код:

Код:

Код:

Код:

Код:

#13 18-03-2008 00:40:02

Re: Textpattern и Ajax

Board footer