jQuery - run a function from another page

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

JavaScript runs in the browser and so no you won't be able to call it remotely. You will need to have access to the same script on your "other page" and add the loadAccountInformation function as a click handler to the link in the same way you do on the accounts page.

If you want to run the function once you arrive on the accounts page from the other page then you can call it once the page has loaded. Something like...

$(function () {
  loadAccountInformation();
});

Answer 2

It sounds like your trying to run a ajax call from ajax inserted content.

The cool thing about using ajax within jquery is callbacks. plus it super easy to use.

function loadAccountInformation() {
    $('#accountMain').load("load-account-information.html", function () {
        var ele = $(this);
        ele.find('a').bind('click', function(){
              ele.load('url');
        })

    });
}

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

if thats what your looking for that will work i suggest that you modulize a little more with something like this

function loadInfo(url){
    $('#accountMain').load(url, function () {
         attachEvents();
    } )
}

function attachEvents(){
    //Add In selector or selectors that can target ajax links
    $('#linkArea').find('a').unbind('click').bind('click' function(){
       var url = this.href;

       loadInfo(url);

    })

}

Answer 3

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?}