Question

I have a account page with links that load the pages with the .load. I am wondering how I can get to the load account info page from another page (not from the account page)? The other page just has a regular link to account.html and if that is loaded then I don’t see the load-account-information.html tab. Can I pass the function loadAccountInfomration in the URL somehow? Thanks!

ACCOUNT PAGE

function loadAccountInformation() {
    $('#accountMain').load("load-account-information.html");
}

<a href="#" onclick="loadAccountInformation()">My Information</a>

OTHER PAGE

<a href="account.html">Account Information</a>

There are multiple load functions on the account page and I just want to know if I can run one in particular on a click from another page.

Answer 1

If you want to run specific scripts on one page from the link on another, you could use hash tags. Append something like #load-account-info to the end of the URL:

<a href="account.html#load-account-info">Account Information</a>

Then check for it on account.html:

$(function() {

    // show account info if #showAccountInfo is present
    showAccountInfo();

    // detect url hash changes and fire off showAccountInfo
    $(window).bind("hashchange", showAccountInfo());

});

function showAccountInfo() {
    if (window.location.hash == "load-account-info") 
        loadAccountInformation();
}

Note: not all browsers support the “hashchange” event. As such, there is a jQuery plugin that adds support.

Edit: added support for detecting clicks on the same page.

^{Sources: Working with single page websites and maintaining state using a URL hash and jQuery, On – window.location.hash – Change?}