开发者

Process anchor (hash) links with jQuery and Ajax

开发者 https://www.devze.com 2023-01-29 17:24 出处:网络
Suppose I want to navigate to the following link: http://www.mysite.com/feature#linktosection The content of http://www.mysite.com/feature is loaded with jQuery ajax, so I cannot navigate to #linkt

Suppose I want to navigate to the following link:

http://www.mysite.com/feature#linktosection

The content of http://www.mysite.com/feature is loaded with jQuery ajax, so I cannot navigate to #linktosection until the ajax content has been loaded. Once it is loaded I need to navigate (maybe simulate a click) to #linktosection

This is my jQuery ajax call:

$('.changecontext-button').click(function()
{
    $.ajax({                          开发者_运维问答                                 
        type: "POST",                                                  
        url: $(this).attr('href'),
        success: function(data) {
            diffSection.html(data);
        },
        error: function(xhr, textStatus, errorThrown) {
            diffSection.html(xhr.responseText);
        }
    });
});

Do you know how to do this with jQuery?

An alternative could be parsing the href link and separate it into a base url and an anchor url. The, on success I could use a jQuery selector to get the anchor link and simulate a .click().

Is there any other better alternative, using jQuery or JavaScript?

Thanks in advanced.


Finally, I implemented it as follows:

$('.changecontext-button').click(function()
{
    var targetUrl = $(this).attr('href');
    $.ajax({                                                           
        type: "POST",                                                  
        url: targetUrl,
        success: function(data) {
            diffSection.html(data);
            var anchor = getAnchor(targetUrl);
            if (anchor)
            {
                $(anchor).click();
            }
        },
        error: function(xhr, textStatus, errorThrown) {
                diffSection.html(xhr.responseText);
        }
    });
});

...

function getAnchor(url)
{
    var index = url.lastIndexOf('#');
    if (index != -1)
        return url.substring(index);
}


After your content has loaded:

$('a[name=' + window.location.hash + ']').get(0).scrollIntoView();


This is, what works for me, when called after content is loaded:

window.location.hash = window.location.hash
0

精彩评论

暂无评论...
验证码 换一张
取 消