Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

DataObjectManager Module /

Discuss the DataObjectManager module, and the related ImageGallery module.

Moderators: martimiz, UncleCheese, Sean, biapar, Willr, Ingo, swaiba, simon_w

Minor Improvement for Search


Reply


3 Posts   1038 Views

Avatar
Gene

Community Member, 41 Posts

29 September 2009 at 6:25am

Edited: 29/09/2009 6:26am

Hi UncleCheese,

There were a few things bothering me about the search box (I use it a lot). If you don't mind, I have attached two small changes for dataobject_manager.js. First, I borrowed the keycodes to ignore from YUI's autocomplete javascript. Second, I added an optional 'focus' param to the request function so that the Search bar doesn't lose focus after your results are displayed.

      // Search
      var request = false;
      $container.find('#srch_fld').focus(function() {
         if($(this).attr('value') == "Search") $(this).attr('value','').css({'color' : '#333'});
      }).unbind('blur').blur(function() {
         if($(this).attr('value') == '') $(this).attr('value','Search').css({'color' : '#666'});
      }).unbind('keyup').keyup(function(e) {
            if ((e.keyCode == 9) || (e.keyCode == 13) || // tab, enter
               (e.keyCode == 16) || (e.keyCode == 17) || // shift, ctl
               (e.keyCode >= 18 && e.keyCode <= 20) || // alt, pause/break, caps lock
               (e.keyCode == 27) || // esc
               (e.keyCode >= 33 && e.keyCode <= 35) || // page up, page down, end
               (e.keyCode >= 36 && e.keyCode <= 38) || // home, left, up
                (e.keyCode == 40) || // down
               (e.keyCode >= 36 && e.keyCode <= 40) || // home, left, up, right, down
               (e.keyCode >= 44 && e.keyCode <= 45) || // print screen, insert
               (e.keyCode == 229) // Korean XP fires 2 keyup events, the key and 229
            ) return;

            
            if(request) window.clearTimeout(request);
            $input = $(this);
            request = window.setTimeout(function() {
               url = $(container_id).attr('href').replace(/\[search\]=(.)*?&/, '[search]='+$input.attr('value')+'&');
               refresh($container, url, '#srch_fld');
            },500)
         e.stopPropagation();
      });

and ...

function refresh($div, link, focus)
{
    // Kind of a hack. Pass the list of ids to the next refresh
    var listValue = ($div.hasClass('RelationDataObjectManager')) ? jQuery('#'+$div.attr('id')+'_CheckedList').val() : false;
       
    jQuery.ajax({
    type: "GET",
    url: link,
    success: function(html){
          if(!$div.next().length && !$div.prev().length)
             $div.parent().html(html);
          else
            $div.replaceWith(html);
   
         if(listValue) {
             jQuery('#'+$div.attr('id')+'_CheckedList').attr('value',listValue);
         }

         var $container = jQuery('#'+$div.attr('id'));
         $container.DataObjectManager();


         if (typeof focus == 'string') {
            $container.find(focus).focus();
         }

      }
    });
}

Avatar
UncleCheese

Forum Moderator, 4096 Posts

29 September 2009 at 7:16am

Love it!!! I tried to get that working a while back because I had a client complaining about it, but I eventually gave up. I'm not totally nuts about adding one more customization to the refresh() function, but, hey, I'll take it. Very nice. I've tested and checked in the code.

Avatar
Gene

Community Member, 41 Posts

29 September 2009 at 7:33am

Edited: 29/09/2009 7:35am

You're right. It would be cleaner (and more JQuery like) to do it as a callback function.

instead of...

refresh($container, url, '#srch_fld');

//...
function refresh($div, link, focus)
//...
if (typeof focus == 'string') {
   $container.find(focus).focus();
}

do...

refresh($container, url, function($newcontainer) {
   $newcontainer.find('#srch_fld').focus();
});
//...
function refresh($div, link, callback)
//...
if (typeof callback == 'function') {
   callback($container);
}

The key is passing the new container element back. When I tried using a callback the first time I was using the old DOM element and it didn't work. Anyway, now it doesn't feel as dirty as passing in a focus param.