Hyperlinking to a bookmark in a non-selected jQuery tab not working

[Bred]

Hi guys,

I'm trying to (bookmark) link to an input field when there's a validation error (such as you've not given a value to a required field X).

I'm using jQuery to divide the form's content over two "tabs".

My HTML is the following:

<span id="form" class="tabs tabs-normal grid100">
    <div class="grid100 margin-bottom-medium">
        <ul class="margin-bottom-high">
            <li><a href="#exercise">Exercise</a></li>
            <li><a href="#measurements">Measurements</a></li>
        </ul>
    </div>
 
    <!-- default section -->
    <div id="exercise">
        <div class="grid100 margin-bottom-medium">
            <!-- alot of other non-relevant form elements -->
            <div class="grid10 align-right padding-vertical-low rgutter5">
	            <strong>Name</strong>
	    </div>
            <div class="grid40">
                <input id="name" class="input-string-large padding-low type-string required" type="text" value="<?php echo $name; ?>">
                <p><span class="tip">The name of the exercise.</span></p>
            </div>
            <div class="grid45 padding-vertical-low">
                <span class="error_inline colour-error" id="error_title"><strong><span id="error_title_txt"></span></strong></span>
            </div>         
        </div>	    
    </div>
 
    <!-- measurements section -->
    <div id="measurements">
         <!-- a lot of non-relevant form elements  -->
    </div>
</span>

The jQuery simply is

$(".tabs").tabs();

The jQuery tabs are behaving sensibly, but if for example I'm on the "Measurements" tab, submit an incomplete form, receive the following validation error..

You've not provided a <a href="#name">name</a>.

.. and then click the validation error's "#name" hyperlink, the tab doesn't change to "Exercise" (from "Measurements").

Not sure if this is jQuery related, but I assumed it is because the "#name" hyperlink worked fine if I'm on the "Measurements" tab when it's clicked.

Any help is appreciated.

[paul_wilkins]

When the page loads, you can check window.location.hash which then allows you to activate the appropriate tab so that it's visible.

[Bred]

I see what you're saying, but the validation is done using ajax i.e. the page does not reload. Additionally, how would I associate an id with a tab i.e. it knows the "name" id is in the "Exercise" tab?

[paul_wilkins]

I see what you're saying, but the validation is done using ajax i.e. the page does not reload. Additionally, how would I associate an id with a tab i.e. it knows the "name" id is in the "Exercise" tab?

You could check for it from within the context of the exercise tab

if ($(window.location.hash, '#exercise').length > 0) {
    // it's contained within the exercise tab
}

Or you could use the .parents() method to check to see if the element with an id of name is contained within the one with an id of exercise

if ($(window.location.hash).parents('#exercise')) {
    // it's contained within the exercise tab
}

The former is more efficient, but there are a number of different ways in which this can be achieved.

[Bred]

Thanks for that.

For anyone reading and wondering what my final workaround solution was, here's the code..

$('a.linkto-invalid-field').live( 'click', function(){
    // iterate through the tabs list
    $('#tabs-list li a').each(function(){ 
        // if the currently iterated tab contains the hyperlinked invalid field that's been clicked
        // then change the currently selected tab to it, and then exit
        if ($(window.location.hash, $(this).attr("href")).length > 0) {
            var index = $('#form a[href="'+$(this).attr("href")+'"]').parent().index();
            $('#form').tabs('select', index);
            return;
        }
    });
});

1) I added a class, ".linkto-invalid-field" for each hyperlinked invalid field in the error.

2) I added an id "#tabs-list" to the list containing the tabs.