Question

How do I go about loading a page via ajax and directly moving to a particlur section via an internal link.? I know a way of going about it is appending #[sectionId] to the url or query string.

I’ve tried appending #linkId to the href attribute value but jQuery seems to truncate all characters after the # character.

Context:
I’m using the JQuery Tabs UI and have a tab associated with a panel. The panel contains a list of links- list of contents- plus the main contents. Given the list of contents preceeds the main contents, I’d like to be able to click a link and directly move the associated section.

$('.helpNoteTabs').tabs({
        load: function (event, ui) {
            $('a', ui.panel).live("click", function () {
                $(ui.panel).load(this.href );
                return false;
            });
        },
        ajaxOptions: {
            data: { dataj: "", sourceFile: sourceFileName, table: "" },
            cache: false,
            type: "POST",
            success: function (data, textStatus) {
            }
        }
    });

I’ve got a the list of Contentents rendered as follows:

<li><a href=""mocks/FetchHelpNote.asp?sourceFile=sc_mna#helpFooter"" class=""helpNoteDialogIndexLink"">" & recordset("title") & "</a></li>"

Note: I’ve only appended the #helpFooter to the href attribute above value as a test to see if the footer section move up in view. On Clicking and inpecting the posted url with Firebug. I realize the the # character and characters after it is truncated:
Post: mocks/FetchHelpNote.asp?sourceFile=sc_mna

The layout is as follows in my Tab Panel.

List of Contents

linkOne

linkTwo

Contents.

linkOne

linkOneContent

linkTwo

linkTwoContent

The goal would be to allow an end user to click the link and move to the relevant section via the internal link.

Answer 1

#, . and others are special characters, you need to escape them with \\

from jquery selectors :

If you wish to use any of the meta-characters ( such as !”#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, you must escape the character with two backslashes: \\. For example, if you have an element with id=”foo.bar”, you can use the selector $(“#foo\\.bar”).