И снова о внимательности и аккуратности

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

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


XMLHttpRequest cannot load http://domain-name.example/test?params. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://test.local' is therefore not allowed access.

А вот приблизительный вид запросов:

$.ajax({
    url : 'http://domain-name.example/test?params',
    dataType : 'jsonp',
    jsonp : 'callbackFuncName',
});

и

$.ajax({
    url : ' http://domain-name.example/test?params2',
    dataType : 'jsonp',
    jsonp : 'callbackFunc2Name',
});

И вот второй вызов и давал ошибку.

Если внимательно посмотреть, то видно, что вся разница в вызовах — это пробел в значении url перед http.

Не знаю ж откуда он там взялся, это пробел. Но мне он стоил нескольких часов гугления и экспериментов. Узнал за это время что-то новое для себя по ajax, jsonp etc.

Когда заметил пробел и убрал его, то всё замечательно заработало!

Так что вот. Очередной призыв быть внимательным и аккуратным со своим кодом :)

P.S. А вообще удивительно, хотя я могу не охватывать все варианты, но почему в строке url не выразается на уровене библиотеки jQuery пробел в начале строки.

Незнание закона не освобождает от ответственности, или почему надо читать документацию jQuery… И не только :)

Мелочь, но отняла время: оказывается, читать доки по jQuery полезно :)
Задача простая: если длина значения в текстовом поле меньше некой величины, то кнопка остаётся неактивной, то есть disabled. Действовал по доступной мне логике:


if( length >= someValue ) {
    btn.removeProp( 'disabled' );
} else {
    btn.prop( 'disabled' , true );
}

И вот если первое условие отрабатывало, то второе, то есть при удалении символов из поля, когда длина значения становилась меньше someValue, нет! И кнопка оставалась «включённой». Потыкался, потыкался, полез в гугл, первая же ссылка, весьма давняя, дала ответ с отсылкой на документацию.
А там оказывается написано:

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

То есть метод removeProp() полностью удаляет такое свойство, и добавить его методом prop() не представляется возможным. Всё просто и очевидно.
И вышеприведенный код должен быть таким:


if( length >= someValue ) {
    btn.prop( 'disabled', false);
} else {
    btn.prop( 'disabled', true );
}

Надо чаще читать доки!

Маскирование данных

В заголовке написал «маскирование», но точнее будет «форматирование данных по заданной маске». Это бывает удобно использовать для форматирования того, что вводит в форму пользователь, например, номера телефона. Скажем, посетитель вводит подряд цифры своего номера, например, +79041234567 а мы на лету преобразуем этот номер в более удобный для восприятия и привычный формат +7 (904) 123-45-67. По службе возникла необходимость отформатировать данные, вводимые пользователями, в частности, номер кредитной карты и телефон. Поначалу стал писать свой велосипед, но к счастью наткнулся на весьма и весьма годный jquery-плагин для маскирования данных, коим и не преминул воспользоваться! Если у вас есть необходимость в форматировании данных по маске, то, думаю, jQuery-Mask-Plugin легко решит эту задачу. На сайте хороший набор примеров и краткая, но вполне исчерпывающая документация.
И простой пример с форматированием номера кредитной карты:
Читать далее Маскирование данных

Форма заказа хостинга на sweb.ru

Уже больше двух лет наверно прошло после запуска, а мне по-прежнему очень нравится как получилась форма заказа на свебе. Тем более приятно, что в её создании принимал непосредственное участие.
Всё просто, очевидно, быстро работает.
Да и не видел пока еще форм заказа проще.

Название Censored

Очень долгий проект — первые страницы были сделаны еще в начале декабря 2008, некоторые добавления уже в конце мая 2009. Всего около 30 шаблонов.
Вплотную познакомился с jQuery. Конечно, код не кодерский, но вполне работоспособный.
Как обычно кастомные контролы, закругления и тени. Что мне понравилось, как я сделал, так это выбор города и упрощенный «аккордеон» собственного изготовления. Готовые аккордеоны не устроили своей громоздкостью и множеством излишеств. В моем варианте весь аккордеон занял полтора десятка строк.

jQuery('a', '#accord').each(function(){
        if ($(this).next('ul').length > 0)
            $(this).css({
                color: '#000'
            });
        $(this).click(function(event){
            if ($(this).next('ul').length > 0) {
                event.preventDefault();
            }
            $(this).addClass('selected');
            $(this).next().show('slow');
            $('ul', $(this).parent().siblings()).hide('slow');
            $('a', $(this).parent().siblings()).removeClass('selected');
        })
    })

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

главная страница сайта
главная страница сайта

Что мне не нравится на этом сайте — это огромные формы. Мне трудно представить, что  кто-то станет заполнять их полностью. Например вот такую

пример формы
пример формы

Эту форму надо не просто заполнить, проставив галочки где надо. Надо при заполнении учитывать, чтобы сумма некоторых полей составляла ровно 100%.