Steve234 (2) [Avatar] Offline
#1
Hi,

I've been trying to do the additional exercises in 4.3.7 to improve the filter form.

I'm not sure how to solve the following exercises:

1. Date field validation
2. Replacing the filter count variable with data() method
3. Allowing the user to specify a disjunction or conjunction search

I thought I knew how to solve giving focus to new controls as they're added as follows:

$('select.qualifier > option').live('click', function(event){
$('input.qualifier').focus();
});


However, this doesn't work.

Any help would be much appreciated.
bear.bibeault (675) [Avatar] Offline
#2
Re: Chapter 4.3.7 - Difficulties with exercises
You are confusing the jQuery .focus() method (which creates a focus event handler) with the native JavaScript focus() method.

When you call .focus() on a jQuery wrapped set, you are establishing an event handler.

When you call .focus() on an element, you set focus to that element.

So:

$('input.qualifier').get(0).focus();
Steve234 (2) [Avatar] Offline
#3
Re: Chapter 4.3.7 - Difficulties with exercises
Thanks for your response Bear.

Unfortunately your modification still doesn't give focus to new controls as they're added. I'm guessing this suggests there's something wrong with my code as a whole.

Any ideas?
bear.bibeault (675) [Avatar] Offline
#4
Re: Chapter 4.3.7 - Difficulties with exercises
My example will give focus to whatever the first element in the wrapped set is. Make sure that whatever selector you are using is selecting the element that you want to set focus to.
a1771550 (1) [Avatar] Offline
#5
Re: Chapter 4.3.7 - Difficulties with exercises
try this, and it worked to me:

$(':input.qualifier', filterItem)[0].focus();
KAES (14) [Avatar] Offline
#6
Re: Chapter 4.3.7 - Difficulties with exercises
Can anyone tell me why this isn't working?

$('select.filterChooser').live('change',function(){
var filterType = $(':selected',this).attr('data-filter-type');
var filterItem = $(this).closest('.filterItem');
$('.qualifier',filterItem).remove();
$('div.template.'+filterType)
.children().clone().addClass('qualifier')
.appendTo(filterItem)
.trigger('adjustName');


$('select.qualifier').focus(); //this is working
$('select.qualifier [option]').click(function(){ //this is not working?
$('input.qualifier')[0].focus();
});



$('option[value=""]',this).remove();
});

the first addition does work:

$('select.qualifier').focus();


this is not working:

$('select.qualifier [option]').click(function(){
$('input.qualifier')[0].focus();
});


Can someone please tell me why this is not working/what is happening here.
Thanks
mraj (104) [Avatar] Offline
#7
Re: Chapter 4.3.7 - Difficulties with exercises
Hi KAES,

First, lets clear up some possible confusion. Calling focus(...) on a jQuery wrapped set, with arguments, creates a focus event handler. However, calling focus() on a jQuery wrapped set, without any arguments, will trigger one or more focus events. So, we do not need to extract a DOM element from the wrapped set in order to set the focus on an element -- we can use a jQuery wrapped set if we want. Just be aware that it will trigger the focus event for all elements in the wrapped set.
http://api.jquery.com/focus/

Your first addition,
$('select.qualifier').focus()
unfortunately doesn't work. E.g., it fails if there are more than two filters, and it also fails if you select something like 'Binder' that doesn't add a select element.

Here's what is going on with that selector: it finds all DOM elements of type 'select' with class .qualifier. If you add multiple filters, it will select multiple items from each filter. Calling .focus() on that jQuery wrapped set triggers a focus event on all of the items. Since only one item can actually have the focus at any one time, the last item in the wrapped set ends up with the focus. To see what I mean, add two filters, select 'Category' in each, then go back and select 'Binder' in the first filter -- you'll see that the "contains" select list in the 2nd filter is being selected, since it is the last select.qualifier in the wrapped set.

Here's how I would do it instead: since we want to put the focus on the element that comes next in the DOM, use next(): $(this).next().focus();

Regarding resetting the focus after a select.qualifier changes, I would again use next(), with a change() event handler (instead of click()):
$('select.qualifier').change(function() {
$(this).next().focus();
});

Final code:
$('option[value=""]',this).remove(); // existing code, new code is below
$(this).next().focus();
$('select.qualifier').change(function() {
$(this).next().focus();
});