javascript — CSS Guru http://starhack.ru Верстка сайтов, использование CSS, Javascript, jQuery, веб-разработка Wed, 04 Dec 2013 15:18:37 +0000 ru-RU hourly 1 https://wordpress.org/?v=5.7.7 http://starhack.ru/neznanie-zakona-ne-osvobozhdaet-ot-otvetstvennosti/ http://starhack.ru/neznanie-zakona-ne-osvobozhdaet-ot-otvetstvennosti/#respond Mon, 18 Nov 2013 14:46:40 +0000 http://starhack.ru/?p=870 = someValue ) { btn.removeProp( 'disabled' ); } else { btn.prop( 'disabled' , true ); } �? вот если … Читать далее Незнание закона не освобождает от ответственности, или почему надо читать документацию 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 );
}

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

]]>
http://starhack.ru/neznanie-zakona-ne-osvobozhdaet-ot-otvetstvennosti/feed/ 0
Маскирование данных http://starhack.ru/maskirovanie-dannyx/ http://starhack.ru/maskirovanie-dannyx/#respond Sun, 03 Nov 2013 21:33:20 +0000 http://starhack.ru/?p=852 Читать далее Маскирование данных]]> В заголовке написал «маскирование», но точнее будет «форматирование данных по заданной маске». Это бывает удобно использовать для форматирования того, что вводит в форму пользователь, например, номера телефона. Скажем, посетитель вводит подряд цифры своего номера, например, +79041234567 а мы на лету преобразуем этот номер в более удобный для восприятия и привычный формат +7 (904) 123-45-67. По службе возникла необходимость отформатировать данные, вводимые пользователями, в частности, номер кредитной карты и телефон. Поначалу стал писать свой велосипед, но к счастью наткнулся на весьма и весьма годный jquery-плагин для маскирования данных, коим и не преминул воспользоваться! Если у вас есть необходимость в форматировании данных по маске, то, думаю, jQuery-Mask-Plugin легко решит эту задачу. На сайте хороший набор примеров и краткая, но вполне исчерпывающая документация.
�? простой пример с форматированием номера кредитной карты:

]]>
http://starhack.ru/maskirovanie-dannyx/feed/ 0
Origin null is not allowed by Access-Control-Allow-Origin http://starhack.ru/origin-null-is-not-allowed-by-access-control-allow-origin/ http://starhack.ru/origin-null-is-not-allowed-by-access-control-allow-origin/#respond Thu, 13 Jun 2013 13:11:08 +0000 http://starhack.ru/?p=819 Читать далее Origin null is not allowed by Access-Control-Allow-Origin]]> Если вы пользователь брузера Chrome, то при попытке протестировать ajax на локальной машине, не разворачивая сервер, у вас ничего не получится. В консоли браузера вы можете увидеть подобную ошибку:


Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. 
XMLHttpRequest cannot load file:///C:/some-file. Origin null is not allowed by Access-Control-Allow-Origin. 

Для решения проблемы есть два пути. Всё-таки развернуть сервер локально, хоть тот же denwer, или же запускать Chrome со следующим параметром:


--allow-file-access-from-files

Для добавления этого параметра к запуску сделайте так:

  1. кликните по иконке Chrome правой кнопкой мыши
  2. выберите пункт Свойства
  3. во всплывшем окне в закладке Ярлык в поле Объект к строке запуска Chrome, например, C:\Users\user-name\AppData\Local\Google\Chrome\Application добавьте вышеприведенную строчку ‐‐allow-file-access-from-files. В итоге должно получиться C:\Users\user-name\AppData\Local\Google\Chrome\Application ‐‐allow-file-access-from-files
  4. перезапустите браузер

Теперь можно спокойно проверять свои ajax-запросы на локальных файлах.
�?сточник знания. Очень помогло. Долго тупил, почему не работает. Вроде всё правильно написано, но ничего не происходит!

]]>
http://starhack.ru/origin-null-is-not-allowed-by-access-control-allow-origin/feed/ 0
Комментарии в JSON http://starhack.ru/kommentarii-v-json/ http://starhack.ru/kommentarii-v-json/#comments Sat, 08 Jun 2013 16:38:08 +0000 http://starhack.ru/?p=812 Читать далее Комментарии в JSON]]> Плохо не знать теории. Взялся за работу с JSON. Передаются на клиент данные в виде JSON, на клиенте шаблонизируем с помощью handlebars, всё красиво вроде. Тестовый объект с данными был написан в теле HTML страницы. Всё работало.
Перенёс код копипастом в отдельный файл .json, стучусь к нему аяксом, запрос проходит, но ничего не происходит. Смотрю в ответ, а там parsererror. Ничего не понимаю. Удаляю всё, создаю простенький тестовый json-файл.


{
    "test" : "value"
}

Всё работает.
А вся разница между тестовым и рабочим JSON’ом, что в в тестовом нет комментариев. В рабочем я закомментировал лишнее. Стоило убрать комментарии и всё заработало. Буду знать.

]]>
http://starhack.ru/kommentarii-v-json/feed/ 4
Поле формы с именем submit http://starhack.ru/v-forme-pole-s-imenem-submit/ http://starhack.ru/v-forme-pole-s-imenem-submit/#respond Fri, 05 Apr 2013 09:28:50 +0000 http://starhack.ru/?p=683 Читать далее Поле формы с именем submit]]> Для именования полей в форме не стоит использовать имена (или ID), совпадающие с методами объекта формы. То есть reset и submit. Это важно, если вам необходимо отправлять форму с помощью javascript.
При попытке отправить форму методом submit() вы увидите в консоли:

Uncaught TypeError: Property 'submit' of object #<HTMLFormElement> is not a function

Коротко дело здесь в следующем. Когда вы «стучитесь» к методу формы submit() привычным способом (вариант для jQuery), как-то так:

<form id="testForm">
    <input name='submit'/>
    <input type='submit' id='testButton' value="test"/>
</form>

<script>
    var form = document.getElementById('testForm'),
        button = document.getElementById('testButton');
    form.onsubmit = function(){
        return false;
        //отключаем обычный сабмит, чтобы отправить форму
        //с помощью javascript
}
    button.onclick = function(){
    form.submit();
}
</script>


— вы получите ошибку на строчке form.submit(). Почему?

Когда вы пытаетесь отправить форму командой form.submit(), вы пытаетесь обратиться к методу формы по имени submit. Но на деле обращаетесь к элементу по имени submit. О чём вам и сообщает консоль, что HTMLFormElement submit не является функцией!
Столкнулся с этим буквально на днях, хотя такое поведение форм уже обсуждалось.

Простое резюме: не стоит использовать в форме поля с именем submit. Да и reset тоже, потому как получите аналогичную ошибку.

]]>
http://starhack.ru/v-forme-pole-s-imenem-submit/feed/ 0