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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

DataObjectManager Module /

Discuss the DataObjectManager module, and the related ImageGallery module.

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

Minor Improvement for Search


Go to End


3 Posts   1411 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, 4102 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.