Failure to Transfer Focus

[iwato]

The PROBLEM:  The problem can be observed on the internet at overview.html.  After the page opens:

1. Find the words Weekly Podcasts in the page's navigation bar and click on them.
2. After the page opens find the Seven Gates subscription form. 
3. Find the select control called Select a Language and click on it.
4. Scroll to the bottom of the list until you arrive at the Not found? option and click where it says Click and enter!

If the focus transfers to the newly opened window, then you can see something that I cannot.  This failure to transfer focus is the problem. 

QUESTION:  Why does the following code fail to realize the aforesaid mentioned transfer of the focus from the window containing the phrase Click and enter! to the newly opened, blank window?  In effect, users cannot enter a missing language without first placing the cursor into the newly opened window.  They cannot simply being typing after they click on the words Click and enter!.  Alas.

HTML

<div id='pc_language_options' style='clear:both;'>
    <label for='pc_tongue'>Native Tongue:<span class="formlabel">*</span></label>
    <span class="rightfloat">
        <select id="pc_tongue" name="language" style="width:auto;">
            <option selected value="0">Select Language</option> 
                    ...
            <optgroup label='oceania'>
                <option value=mi>Maori</option>
                <option value=haw>Hawaiian</option>
                <option value=sm>Samoan</option>
            </optgroup>
            <optgroup label='Not found?'>
                <option id="not_found" value='other_tongue'>Click and enter!</option>
            </optgroup>
        </select>
    </span>
</div><!-- end div#pc_language_options -->
<div id='pc_other' style='margin-top:0.8em;'>
    <span class="rightfloat"><input id='pc_other_input' type='text' name='other' value=''></span>
</div><!-- end div#pc_other -->
<label id="pc_tongue_error" class="error" for="pc_tongue">This field is required.</label>

JAVASCRIPT

$('#pc_other').hide();
$('#pc_tongue').change(function() {
    if ($('#pc_tongue').val() == 'other_tongue') {
        $('#pc_other').show().focus();
    } else {
        $('#pc_other').hide().focusout(function(){
            $("label#pc_tongue_error").hide();					
        });
    }
});

By the way,  this is hardly where my experimentation stopped.  I have tried many ways using different combinations of the show(), hide(), focus(), focusin(), blur(), and focusout() functions -- and these, both with and without callback  functions.  Unfortunately, to no avail.  I have learned, in effect, many different ways to mess up what already works, but I simply cannot get it to work with the desire enhancement -- a transfer of focus.

Roddy

Edited February 18, 2018 by iwato

[dsonesuk]

Unless its changed, focus is limited to inputs and anchor elements, so targeting elements other than these is your problem.

From https://api.jquery.com/focus/

The focus e vent is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.

Edited February 18, 2018 by dsonesuk

[iwato]

Yes, Dsonesuk.  You are so often, so accurate.  You deserve the highest accolade.

I am now targeting the <input> form control directly, rather than the <div> element in which it is contained.  All it took was an additional line of code.  My future users will have much for which to thank you.

The new implementation has already begun.  You can see it in the Weekly Podcasts panel of the Grammar Captive mainpage.

Roddy

p.s.  The FIX

$('#pc_other').hide();
$('#pc_tongue').change(function() {
    if ($('#pc_tongue').val() == 'other_tongue') {
        $('#pc_other').show();
	$('#pc_other_input').focus();
    } else {
        $('#pc_other').hide().focusout(function(){
            $("label#pc_tongue_error").hide();					
        });
    }
});

 

Edited February 18, 2018 by iwato