Заметки программиста

Каждый будний день, ровно в 9, я пишу о себе, о своей работе и о технологиях web программирования123

Posts Tagged ‘ ajax ’

Хорошее название топика, правда? А названия топиков очень важны, по ним приходят из поисковиков и по названию человек сразу понимает то ли это что он искал. Теперь по сути.

Как люди в древнее время (когда не было jQuery) сабмитили форму на AJAX’е? Схема не сложна, но очень муторна, нужно составить либо строку из всех инпутов вида ?id=25&bring_me=pianino&verni_mena_na=nebo, либо в формате JSON, который опять же нужно парсить. Потом появились фреймворки и библиотеки умеющие делать это за нас, нужно было только указать что и куда передаем, т.е. типа того что: { id: document.getElementById(’hidden_id’) .value, bring_me: document.getElementById(’bring_me’) .value, …}, не очень удобно.

И тут появляется ОН jQuery, тот кто покорил самого Гугла! И был написан под него плагин jQuery Form Plugin, который делает всю работу по сабмиту формы за нас. Создаем форму используя самую обыкновенную верстку, без особых дополнений:

<form id="myForm" action="comment.php" method="post">
    Name: <input type="text" name="name" />
    Comment: <textarea name="comment"></textarea>
    <input type="submit" value="Submit Comment" />
</form>

Подключаем jQuery, сам Form Plugin и создаем небольшой обработчик для формы:

<head>
    <script type="text/javascript" src="path/to/jquery.js"></script>
    <script type="text/javascript" src="path/to/form.js"></script>

    <script type="text/javascript">
        // ожидаем загрузки всего документа
        $(document).ready(function() {
            // назначаем 'myForm' обрабатываемой формой и задаем ей простецкую функцию
            $('#myForm').ajaxForm(function() {
                alert("Спасибо за комментарий!");
            });
        });
    </script>
</head>

И все дела! Теперь вместо сабмита формы произойдет AJAX запрос на сервер по ссылке из action с данными из нашей формы! Так же плагин поддерживает и AJAX загрузку файлов! Описание плагина и скачать его можно на этом сайте – http://malsup.com/jquery/form/.

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

TinyMCE Images plugin

TinyMCE Images: Обзор

TinyMCE Images plugin

TinyMCE Images: Загрузка

TinyMCE Images plugin

TinyMCE Images: Удаление

Плагин достаточно требовательный: PHP 5 и GD2 на сервере, Flash Player и JavaScript у пользователя.

Кратко об установке:

  • Создать в корне сайта папку /storage и дать права на запись/чтение
  • В tinyMCE.init:
    • plugins: …,images,…
    • theme_advanced_buttons1: …,images,…
    • relative_urls : false
    • remove_script_host : true

Плагин поддается локализации, у меня их только 2: ru и en.

Постоянная страница TinyMCE Images на dustweb.ru.

Скачать можно с SourceForge, а посмотреть демо можно здесь.

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

Семантическая верстка

Presentation Layer Best Practices — отличная статья, там описывается с какой легкостью и логикой можно заменить однообразное <div><div><div><div>… на что-то более простое и логичное. Ну и естесственно не обошлось без наворотов на JavaScript.

Ajax, о великий

Подборка 25ти Ajax’овых фишек от разных разработчиков. Половина просто лажа, если честно, но есть и неплохие идеи. Статья полезна дизайнерам в том числе!

В закладки программистам

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

Обожаю веб, здесь можно сделать что угодно и так красиво насколько это можно себе представить, на системных приложениях это мало кто увидит, и еще там очень много стандартных интерфейсов, которые всегда выглядят по-разному и уже жестко приелись. На вебе нет гуидлайнов оформления интерфейса, ты не ограничен набором компонентов, к примеру нет необходимости оповещать человека страшенным alert’ом о какой-то ошибке или успешном завершении операции, как вариант — текстовые оповещения на довольно не сложном CSS, прям спешл фор ньюбис (кстати там есть ссылка на очень красивые иконки для сообщений). Выпадающий список вообще не проблема, автокомплит на ajax, я уже писал об этом. А многое по красоте в разы превосходит оффлайн приложения. Крутилка на javascript – очень впечатляет, и не очень сложно встраивается куда нужно.

Леха, мои поздравления! Дашь прокатиться? :)

По работе… не будет меня на работе, по делам в центр еду…