SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Manchester
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    Code HTML4Strict:
    <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
    Code JavaScript:
    $(".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..

    Code HTML4Strict:
    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.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    When the page loads, you can check window.location.hash which then allows you to activate the appropriate tab so that it's visible.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Manchester
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Bred View Post
    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

    Code javascript:
    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

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Manchester
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that.

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

    Code JavaScript:
    $('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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •