hudson@work » jquery http://hudson.su статьи о web-разработке, менеджменте IT проектов и контроле качества Fri, 20 Jan 2012 13:15:39 +0000 en hourly 1 Symfony: прячем фильтры в админ-генераторе http://hudson.su/2010/09/09/symfony-hide-filters-in-admin-generator/ http://hudson.su/2010/09/09/symfony-hide-filters-in-admin-generator/#comments Thu, 09 Sep 2010 12:08:55 +0000 hudson http://hudson.su/?p=1602 Фильтры в админ-генераторе штука хорошая, но всегда думаешь куда бы их пристроить на странице. Если полей в модели больше чем 3-5 это становится проблемой. Предлагаю вашему вниманию небольшой трюк по этому поводу. Нам потребуется JQuery, любимый редактор и немного терпения:

Для начала посмотрим как выглядит DOM для блока админ-генератора:

И он же “вживую”:

Что мы хотим с этим сделать?

  • Спрятать фильтры для этого и всех остальных админ-генераторов.
  • Для отображения заиметь ссылку или кнопку.
  • Потратить как можно меньше времени на это.

Как мы это будем делать? Для начала скачаем и подключим к проекту JQuery. Я это сделаю при помощи плагина sfJqueryReloadedPlugin. Вы же можете поступать как вам нравится.

Далее создадим ссылку, кликая на которую можно будет показать/скрыть фильтры:

jQuery(function() {
  // прячем/показываем фильтры
  var filter_show_hide = $('<a>') // создаем DOM элемент
    .attr('href','#')
    .attr('id','filter-show-hide')
    .html('toggle filters ∇')
    .css('fontWeight', 'bold') // немного стиля
    .css('margin', '5px')
    .click(function(){
      $('#sf_admin_bar').toggle();
      if( $("#filter-show-hide").html() == 'toggle filters ∇' ) // изменяем текст ссылки
        $("#filter-show-hide").html('toggle filters Δ');
      else
        $("#filter-show-hide").html("toggle filters ∇");
      return false;
    });
});

Обратите внимание на то что мы меняем html тело ссылки – дельта (свернуть) , набла (развернуть). Можно использовать картинки, стрелочки и все что вам нравится.

После этого нам остается добавить нашу кнопку-ссылку над фильтрами и скрыть фильтр по умолчанию:

jQuery(function() {
  // ...
  $('#sf_admin_bar')
    .before(filter_show_hide) // размещаем ссылку перед фильтром
    .hide(); // скрываем фильтры
});

И добавить несколько стилей:

<style type="text/css">
  #sf_admin_bar {
    float:none; /* чтобы блок не плавал справа - теперь он располагается над списком */
    display: none; /* прячем фильтры средствами CSS - в принципе скриптом при загрузке можно и не прятать - это паранойя */
  }
  #sf_admin_bar .sf_admin_filter form table {
    width: 700px; /* делаем немного пошире таблицу с фильтрами */
  }
</style>

И вуаля:


Быстро, просто, не геморно. ))

Code with fun!

]]> http://hudson.su/2010/09/09/symfony-hide-filters-in-admin-generator/feed/ 4 JQueryUI accordion и checkbox http://hudson.su/2010/03/21/jqueryui-accordion-i-checkbox/ http://hudson.su/2010/03/21/jqueryui-accordion-i-checkbox/#comments Sun, 21 Mar 2010 18:57:25 +0000 hudson http://hudson.su/?p=1228 Пока нет времени на “большую” и “полезную” статью, публикую небольшой сниппет.

Цель:

в jquery ui аккордеоне в шапке блока требуется разместить чекбокс и повесить на его onclick некий хэндлер.

<div id="my-accordion">
 <h3>
 <a href="#">
 <input type="checkbox" onclick="someFunction();">
 Title
 </a>
 </h3>
 <div id="">
 content
 </div>
</div>

Проблема:

в чекбоксе не ставится галка при клике на нее (более того, добиться нормальной работы чекбокса даже программным способом не получается).

Решение:

вставить перед аккордеоном или в onLoad блок следующий код:

$("#my-accordion h3 input").click(function(evt) {
  evt.stopPropagation();
});

После этого с чекбоксом можно нормально работать.

]]> http://hudson.su/2010/03/21/jqueryui-accordion-i-checkbox/feed/ 0 Асинхронный пул на jQuery http://hudson.su/2010/02/17/asynchronous-pool-on-jquery/ http://hudson.su/2010/02/17/asynchronous-pool-on-jquery/#comments Wed, 17 Feb 2010 08:30:41 +0000 hudson http://hudson.su/?p=943 Приведенный ниже скрипт имеет скорее теоретический нежели практический интерес.

Итак, постановка задачи:

  • Есть скрипт получения некоего набора данных (JSON).
  • Требуется на основе этого набора данных циклически вызывать асинхронный запрос, который выполняет действия на основе входных данных от первого скрипта.
  • При этом требуется лимитировать число одновременно запущенных асинхронных процессов (чтобы не порождать десятки или даже сотни запросов сразу).

Алгоритм решения:

  • Получить JSON с данными для последующей обработки.
  • Для каждого элемента в полученных данных:
  • – Если пул не заполнен – запустить асинхронный процесс.
  • – Если пул заполнен – ждать пока в пуле освободится слот.
  • По окончанию обработки данных очистить пул.

Проблема:

  • Если организовывать опрос пула циклически, съедается 100% одного ядра CPU, начинает дико тормозить интернет-обозреватель и в конце концов может аварийно завершить работу.

Как можно реализовать скрипт для данной задачи – смотрите ниже:


Начнем с приминания травы – заготовим каркас страницы:

<html>
<head>
 <title>asynchronous pool on jquery demo</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script>
// тут будет наш скрипт
</script>
<div>
 <div id="stat">тут статистика</div>
 <div id="ajax-results">тут результаты</div>
</div>
</body>
</html>

Небольшая теоретическая вводная по эмуляции многопоточности в javascript: http://javascript.ru/blog/tenshi/mnogopotochnyi-yavaskript. Что дает эта статья? Способ избежать 100%-й загрузки CPU. Применяем:

<script>
/**
 * Emulate mulithreading
 */
Function.prototype.process = function( state ){
  var process = function(){
  var args = arguments;
  var self = arguments.callee;
  setTimeout( function( ){
      self.handler.apply( self, args );
    }, 500 )
  }
  for( var i in state ) process[ i ]= state[ i ];
  process.handler= this;
  return process;
}

Sleep позволяет добиться некоего подобия многопоточности, так как “форкает” таймер с callback-функцией, где переопределяется self.handler. Также нам понадобится менеджер пула:

/**
 * Pool manager
 */
 $.poolManager = function( input, id, data ){
   switch( input.message ){
     case 'start':
       if( this.state !== 'wait' ) return this( input, id, data );
       this.state = 'run';
       this.iteration = 0;
     case 'next':
       if( this.state !== 'run' ) return;
       this.iteration++;
       if( !$.pushInPool( id, data ) ) return this( { message: 'next' }, id, data ); // no slot in pool
       return this( { message: 'finish' } );
     case 'finish':
       if( this.state !== 'run' ) return;
       this.state= 'wait';
       return;
     return;
   }
}.process({ state: 'wait' })

Пока этот код нам ничего не дает. Добавим стартер процесса:

/**
 * Main entry point
 */
 $.main = function(){
   $.results_container = $( "#ajax-results" );
   $.results_container.html( "" );
   $.results_container.append( $( "<div>" ).html( "Chunk size: " + $.pool_settings["chunk_size"] + "; Pool size: " + $.pool_settings["pool_size"] ) );

   // get data
   $.getJSON(
     "getData.php",
     {chunk_size: $.pool_settings["chunk_size"]},
     function( data ) {
       for( i in data ){
         $.poolManager( {message:"start"}, "i-"+i, data[i] );
       }
     }
   );
   // flush pool when finished
   $.threads_pool = [];
 }

В данной функции получаем данные и запускаем цикли их обработки. Изначально вместо for(…) $.poolManager(…) была конструкция вида

  • для каждого чанка
  • пока не добавлен в пул запусти таймер на N милисекунд

Логичная вроде бы конструкция. Только вот она и съедала 100% CPU, приводила к подвисанию и даже крэшу браузера. Давайте теперь взглянем на вставку задачи в пул:

/**
 * Push active work in pool
 */
 $.pushInPool = function( id, data ){
   if( $.sizeof( $.threads_pool ) < this.pool_settings["pool_size"] ){
     $.threads_pool.push( id );
     $.workChunk( id, data );
     return true;
   }
   return false;
 }

Тут все просто – если размер пула равен критическому, возвращаем “ложь”, если нет, то добавляем в массив значение с ID треда и запускаем воркер для текущего чанка. Воркер выглядит так:

/**
 * Do one chunk of work
 */
 $.workChunk = function( id, data ){
   $.results_container
     .append( $( "<div>" )
     .html(
       "Iteration. Working with " + $.sizeof( data ) + " items"
       + "<div id="+id+" style='display:inline;'><img src='indicator.gif'>"
   ));
   $.ajax({
     type: "POST",
     url: "doAction.php",
     data: {},
     success: function( data, textStatus, XMLHttpRequest ){
       $.success_threads++;
       $( "#"+id ).html( " - <b style='color:green;'>OK</b>" );
     },
     complete: function( XMLHttpRequest, textStatus ){
       $.removeFromPool( id );
       $("#stat").html("").append("Success: " + $.success_threads + "<br>Failed: " + $.failed_threads + "<br>Success percentage: " + (($.success_threads)/($.success_threads+$.failed_threads))*100 );
     },
     error: function( XMLHttpRequest, textStatus, errorThrown ){
       $.failed_threads++;
       $( "#"+id ).html( " - <b style='color:red;'>FAILED</b>" );
     }
 });
 }

Самый главный тут – ajax запрос, он же, вне зависимости от того как отработает, удаляет процесс из пула:

/**
 * Remove finished work from pool
 */
 $.removeFromPool = function( id ){
   for( i in $.threads_pool ){
     if( $.threads_pool[i] == id ){
       $.threads_pool.splice( i, 1 );
       return true;
     }
   }
   return false;
 }

Для удаления делаем проход по пулу и ищем ID текущего чанка и если находим, вырезаем при помощи splice.

Вот в общем-то и все.

Можете попробовать демо.

Или скачать пример себе:

  • распакуйте его в любой директории вашего веб-сервера, где выполнится PHP скрипт и запустите asynchronous-pool-on-jquery.php.
  • В комплект входят также:
  • getData.php – скрипт эмулирует отдачу JSON данных
  • doAction.php – воркер, который имеет случайную задержку (чтобы локально все отрабатывало не так быстро) и с вероятностью около 50% он возвращает error 500 – для того чтобы протестировать исключение чанка из пула при ошибке.

Вот в общем-то и все. Надеюсь было интересно )

]]> http://hudson.su/2010/02/17/asynchronous-pool-on-jquery/feed/ 0 Иконки в jQuery UI. Небольшой хинт по смене классов ui-state-default/ui-state-hover. http://hudson.su/2010/02/02/jquery-ui-icons-hover-hint/ http://hudson.su/2010/02/02/jquery-ui-icons-hover-hint/#comments Mon, 01 Feb 2010 23:33:13 +0000 hudson http://hudson.su/?p=801 Замечательный фреймворк jQuery имеет не менее замечательную библиотеку jQuery UI. С ними мне живется в общем-то хорошо, но иногда вылезают всякие забавные грабли. Об одних я расскажу двумя строчками ниже.

Нынешние грабли связаны со стандартными иконками jQueryUI. В приложении ThemeRoller они отличненько регируют на наведение мыши:

Обычно я этими иконками не пользуюсь, но вот прижало, потребовалось сделать – чтобы быстро и красиво. Иконки вставить по образу и подобию не сложно:

<ul id="icons" class="ui-widget ui-helper-clearfix">
   <li class="ui-corner-all ui-state-default">
     <span class="ui-icon ui-icon-circle-triangle-w"></span>
   </li>
 </ul>

Кул. НО. Не сразу, но я заметил что на hover они не реагируют. Копание в кишках UI не помогло, классы которые я пытался выдрать из примера работали (если работали) некорректно. Однако, немного порывшись в подгружаемых скриптах обнаружил следующий код:

$(function(){
 //...
 //hover states on the static widgets
 $('#dialog_link, ul#icons li').hover(
   function() { $(this).addClass('ui-state-hover'); },
   function() { $(this).removeClass('ui-state-hover'); }
 );
});

Как говорится, ларчик просто открывался ) Hover класс биндится средствами jQuery после загрузки страницы. А еще у этих иконок плюс в том что они выполнены одним спрайтом и на hover не приходится подгружать отдельные картинки (теоретически туда можно и что-то свое дорисовать, но еще не пробовал).

Надеюсь вам этот совет поможет сэкономить 30-60 минут и потратить их на что-то полезное.

]]> http://hudson.su/2010/02/02/jquery-ui-icons-hover-hint/feed/ 10 jquery.maphilight.js – патч для IE8 http://hudson.su/2009/09/30/jquery-maphilight-js-patch-ie8/ http://hudson.su/2009/09/30/jquery-maphilight-js-patch-ie8/#comments Tue, 29 Sep 2009 23:31:00 +0000 hudson http://hudson.su/?p=98 Забавный плагин для подсветки AREA элементов в MAP – jquery.maphilight.js (http://plugins.jquery.com/project/maphilight). Как работает – лучше посмотреть официальную документацию. Все бы ничего, но последний апдейт датирован весной 2008 года, когда IE 8 еще не было. Соответственно в нем он и не работает:

Недопустимый аргумент.  jquery.maphilight.min.js, строка 1 символ 1166

(в несжатом файле jquery.maphilight.min.js, строка 63). Как оказалось, это дело поправимое. Строки 63 и 64 выглядят так:

document.createStyleSheet().addRule("v\:*", "behavior: url(#default#VML); antialias: true;"); //IE8 chokes on this line.
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");

Их нужно заменить на:

document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
var style = document.createStyleSheet();var shapes = ['shape','rect', 'oval', 'circ', 'fill', 'stroke', 'imagedata', 'group','textbox']; 
$.each(shapes,    function()
    {        style.addRule('v\:' + this, "behavior: url(#default#VML); antialias:true");
    }
);

Это работает ;)
Оригинал решения найден тут: http://stackoverflow.com/questions/1169162/any-alternatives-for-the-jquery-hilight-plugin

По мотивам бага создан запрос разработчику. Будет ли исправлен неизвестно, но найти его можно тут: http://plugins.jquery.com/node/10552

]]> http://hudson.su/2009/09/30/jquery-maphilight-js-patch-ie8/feed/ 0 Cистемная ошибка: -1072896658 (system error: -1072896658) http://hudson.su/2008/05/17/system-error-1072896658/ http://hudson.su/2008/05/17/system-error-1072896658/#comments Sat, 17 May 2008 09:16:00 +0000 hudson http://hudson.su/?p=63 Отладка javascript-ов в IE обычно вызывает в сознании массу непечатных слов в адрес его разработчиков. Эта заметка посвящается тем, кто сталкивался с невразумительной ошибкой, выдаваемой Internet Explorer-ом при использовании Ajax с php-библиотекой xajax:

Ошибка: системная ошибка: -1072896658 или Error: system error: -1072896658
 
Ошибка возникает из-за того, что в ответе серверверного скрипта в заголовках HTTP указана кодировка, которую Internet Explorer не может распознать. Например, cp1251 (вместо windows-1251), или utf8 (вместо UTF-8). Названия кодировок должны быть в соответствии со стандартами IE, а не так, как можно было бы предположить. Посмотреть список поддерживаемых кодировок можно на msdn: Character Set Recognition.

 

Устранить проблему можно следующими способами:
  • перед созданием объекта xajax задать константу XAJAX_DEFAULT_CHAR_ENCODING с кодировкой, которая будет выдаваться по умолчанию во всех заголовках, выдаваемых через xajaxResponse:

define (’XAJAX_DEFAULT_CHAR_ENCODING’, ‘windows-1251′);

  • задать кодировку в самом объекте xajaxResponse перед его возвращением:

$responseObject->setCharacterEncoding(’windows-1251′);

  • выдавать явно кодировку в http-заголовках ответа:

header(’Content-Type: text/html; charset=windows-1251′);

 

—
От себя добавлю что встречался с этой ошибкой когда хотел познакомиться с jQuery и в .htaccess имел неверно прописанную с точки зрения IE кодировку (UTF8 вместо UTF-8).

Взято здесь (надеюсь Алекс не против :) )
 

]]> http://hudson.su/2008/05/17/system-error-1072896658/feed/ 0