Поиск по этому блогу

понедельник, 11 июня 2012 г.

Выполнение нескольких запросов AJAX через jQuery .post

Нужно построить приложение, в котором вызовы Ajax будут вложены в друг друга заданное количество раз, а параметры последующих запросов будут задаваться в зависимости от номера вложенности. При этом запросы к серверу должны идти последовательно, один за одним.
Если не возможно использовать синхронные запросы ($.ajaxSetup({async:false});) в силу разных причин (использования jsonp, выполнения других запросов в ajax в это же время или в силу блокировок браузера), то нужно использовать "Отложенный объект", а точнее функцию jQuery.then(). Реализация кода может быть следующей:
var args = ['arg1','arg2','arg3','arg4','arg5','arg6'];
deferredPost(0, 5);
function deferredPost(index, max){    
    var delay = Math.random()*3;
    if (index < max){
        return $.post('/echo/html/', {html:('Response to '+args[index]), delay:delay}, 
        function(data){
            $('#response').append(data+'');
        }).then(function(){
            deferredPost(index+1, max);
        });
    } else {
        return $.post('/echo/html/', {html:('Response to '+args[index]), delay:delay}, 
        function(data){
            $('#response').append(data+'');
        });
    }
}

четверг, 7 июня 2012 г.

Как преобразровать минимизированный код javascript

Думаю, не я один использую минимизированные библиотеки Java Script, но иногда возинкает задача преобразовать код в читаемый вид для отладки или доработки функционала, для этого существует отличный инструмент - JS Beautifier.
После отладки код javascript сжать можно с помощью приложения: http://closure-compiler.appspot.com

среда, 6 июня 2012 г.

Как проверить состояние checkbox-а используя jQuery

Иногда возникает задача проверить состояние чекбокса (checkbox) в форме HTML и в зависимости от его состояния показать/скрыть другие элементы формы. Итак, допустим наш элемент имеет идентификатор "surnameCB", а элемент, который нужно показать/скрыть - "surnameTXT". Одной из возможных реализций задачи показа/скрытия элемента страницы в зависимости от переключателя формы является следующая:
if ($('#surnameCB').is(':checked')) {
    $('#surnameTXT').show();
} else {
    $('#surnameTXT').hide();
} 
или более короткая (но менее удобочитаемая) запись:
$('#surnameCB').is(':checked') ? $("#surnameTXT").show() : $("#surnameTXT").hide();
В данных примерах используется метод .is() вместо .attr(), т.к. начиная с версии 1.6 разработчики не рекомендуют использовать последний для определения состояния флажка, вместо него можно использовать $('#surnameCB').prop('checked'), который возвращает true или false в зависимости от того отмечен флажек или нет
Также этот код можно просто реализовать без использования jQuery:
var surnameCheckbox = document.getElementById('surnameCB');
var surnameInput = document.getElementById('surnameTXT');
// Для совместимости со старыми версиями IE
surnameCheckbox.onchange = function() {
    // Проверка отмечен ли флажком checkbox.
    surnameInput.hidden = this.checked ? false : true;
    //Хотя, вместо hidden лучше использовать surnameInput.style.display для совместимости
};

вторник, 5 июня 2012 г.

Почему лучше не использовать jQuery конструкцию $().ready(handler) в версии библиотеки выше 1.4

В официальной документации по библиотеке jQuery написано, что все три нижеперечисленные конструкции эквивалентны:

$(document).ready(handler)
    $().ready(handler) (this is not recommended)
    $(handler)
Но вот во второй строчке есть приписка "this is not recommended". Стало интересно почему же?
Оказалось, хитрость закопана в истории версий jQuery: В версиях до 1.4 конструкция $() была ссылкой на конструкцию $(document). Поэтому, данный код воспринимался нормально.
Но масса людей начала делать столь безумные вещи как например: $().mouseover() А для того, чтобы получить пустой объект jQuery приходилось делать следующую манипуляцию: $([]).

Поэтому начиная с версии 1.4 конструкция $() вовзращает пустой объект jQuery. Но в версии 1.4 $().ready(fn) оставлена для совместимости. Лучшей практикой по мнению разработчиков библиотеки является использование конструкции: $(document).ready(fn)

среда, 30 мая 2012 г.

Два раза срабатывает событие в функции append() библиотеки jQuery

При выполнении кода:
$(function(){ 
$("#test").append('');
})
Событие onload возникает два раза это связано с тем, что функция append библиотеки jQuery сначала создает требуемый объект (певрое срабатывание события), а потом помещает его в нужной позиции страницы (второе страбатывание). Для того чтобы избежать двойного срабатывания события в функции append() нужно использовать ее в таким способом:
$(function() {
    $("#test").append(
        $("").attr({
            src: "http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg",
            onload: "alert(\'hi\')"
        })
    );
});