Разработка сайтов на UMI.CMS
Знать UMI.CMS в совершенстве невозможно.
Даже сами разработчики знают о ней не все...

UMi

Ursa Minor

AJAX в UMI.CMS. Часть 2

Некоторое время назад я рассматривал яваскриптовый класс для ajax-отправки запросов в среде UMI.CMS. За прошедшее время пришел к мысли, что класс неплохо бы доработать...

Что хочется от яваскрипта:

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

Пишем класс. Как всегда, я рассчитываю на использование фреймворка Mootools, в данном случае версии 1.2.5.1.  Версия 1.3 очень хороша, но напрочь лишена совместимости; посему пока воздерживаюсь от ее использования. Если вы фанат jquery, то рецепт здесь.

Это код для mootools 1.2



var umiRequest = new Class({
    Implements: [Events, Options],
    options: {
        url: '/content/get_ajax_content/',
        method: 'post',
        callback: function(text){return text},
        params: new Hash,
        mode: 'update' //update or result
    },
    initialize: function (){
        var params = Array.link(arguments, {options: Object.type, elements: $defined});
        this.setOptions(params.options || null);
    },
    setValue: function(key, value){
        this.options.params.set(key,value);
    },
    setValues: function(values){//must be an object
        this.options.params.extend(values);
    },
    send: function (request){
        this.cook = document.cookie;//получаем все куки
        request.setHeader('Cookie', this.cook);
        request.send();
    },
    commit: function(){
        if(!this.options.url) alert('Не указан целевой адрес!');//здесь бы хорошо сделать более умную обработку ошибки
        var _self = this;
        var data = this.options.params.toQueryString();
       
        var request = new Request({
            method: this.options.method,
            url: this.options.url,
            data: data,
            evalScripts: true,
            onComplete: function(text){
                if(_self.options.mode == 'result') return text;
                else _self.options.callback(text);
        }
        });
        this.send(request);
    }
});

Это код для mootools 1.3

var umiRequest = new Class({
    Implements: [Events, Options],
    options: {
        url: '/content/get_ajax_content/',
        method: 'post',
        callback: function(text){return text},
        params: new Object({}),
        mode: 'update' //update or result
    },
    initialize: function (){
        var params = Array.link(arguments, {options: Object.type, elements: $defined});
        this.setOptions(params.options || null);
    },
    setValue: function(key, value){
        this.options.params[key] = value;
    },
    setValues: function(values){//must be an object
        this.options.params.append(values);
    },
    send: function (request){
        this.cook = document.cookie;//получаем все куки
        request.setHeader('Cookie', this.cook);
        request.send();
    },
    commit: function(){
        if(!this.options.url) alert('Не указан целевой адрес!');
        var _self = this;
        var data = Object.toQueryString(this.options.params);

        var request = new Request({
            method: this.options.method,
            url: this.options.url,
            data: data,
            evalScripts: true,
            onComplete: function(text){
                if(_self.options.mode == 'result') return text;
                else _self.options.callback(text);
            }
        });
        this.send(request);
    }
});

 

Параметры:

  • url - адрес server-side обработчика
  • method - метод передачи данных
  • callback - функция обратного вызова
  • params - хеш параметров, из которых будет сформирована QUERY_STRING (объект Hash в терминологии Mootools)
  • mode - указывает, следует ли вернуть результат в чистом виде или что-то с ним сделать; предусмотрен был на этапе создания, но пока не использовался.

Методы:

  • setValue - задать пару ключ-значение, которые будут добавлены в QUERY_STRING.
  • setValues - то же, но передается Hash. Удобно использовать, когда данные берутся из формы
  • send - отправка формы. Только для совместимости с более ранними версиями
  • commit - отправка формы

 

Пример использования

Допустим, имеем форму

 

<div id="form_container">
    <form onsubmit="return false;">
        <input type="text" name="value1">
        <input type="text" name="value2">
        <input type="submit" name="submit" onclick="ajax_send(this)">
    </form>
</div>

 

function ajax_send(el){
    var form = $(el).getParent('form');

    var callback = function(text){
        $('form_container').empty().set('html',text);
        //по получении ответа удалить код формы
        //и полученный ответ вставить на ее место как html
    }

    var request = new umiRequest({
        url: '/content/query/',
        callback: callback
    });
    request.setValue('mode','mail');//задаем некий дополнительный параметр

    //получаем данные из формы;
    //столь длинная запись - чтобы получить на выходе корректный Hash.
    //В идеале, надо бы перенести это в класс. Доработайте;)
    request.setValues(form.toQueryString().parseQueryString());

    request.commit();
}

 

Еще вариант для версии 1.4. Отличется тем, что в прежних версиях создавался новый объект, в котором вызывался объект Request. Здесь же наследуется сам встроенный объект Request

var umiRequest = new Class({
    Extends: Request,
    options: {
        url: '/content/get_ajax_content/',
        method: 'post',
        callback: function(text){return text},
        params: new Object({}),
        evalScripts: true,
        onComplete: function(text){
            if(this.options.mode == 'result') return text;
            else this.options.callback(text);
        },
        mode: 'update' //update or result
    },
    initialize: function (){
        var params = Array.link(arguments, {options: Object.type, elements: $defined});
        this.setOptions(params.options || null);
        this.parent();
    },
    setValue: function(key, value){
        this.options.params[key] = value;
    },
    setValues: function(values){//must be an object
        Object.append(this.options.params,values);
    },
    commit: function(){
        if(!this.options.url) alert('Не указан целевой адрес!');
        var data = Object.toQueryString(this.options.params);
        this.cook = document.cookie;//получаем все куки
        this.setHeader('Cookie', this.cook);
        this.send({data: data});
    }
});

Новости

30.10.2016

Обновлено описание макроса для вывода всех элементов справочника UMI.CMS с учетом версии 14.

 

21.07.2015

Памятка по обновлению до debian 8.1. Приятно вкусить все плюшки PHP 5.6

11.11.2014

Как выполнить SQL-запрос из bash-скрипта. Памятка

11.11.2014

Как отследить нагрузку сайта на сервер.

06.11.2014

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

05.11.2014

Выкладываю как заготовку свой слайдер изображений на mootools

Все обновления