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.

Why would you need to pass the loadAccountInformation function anyway? It seems a fairly simple function. Can you simply include the same function code in the HTML of the other page? — Paul Grime
– Paul Grime, Commented Sep 11, 2011 at 21:13
@webwrks do you want to load different pages with the same function? I still didn't get your question right. — LoneWOLFs
– LoneWOLFs, Commented Sep 11, 2011 at 21:16
no the reason why I can't run it on load is that I have other links on the page. I just want to link to this particular link (and others once I figure out how to do it) from another page. — webwrks
– webwrks, Commented Sep 11, 2011 at 21:21
you can write click events for each of the links look into api.jquery.com/click — LoneWOLFs
– LoneWOLFs, Commented Sep 11, 2011 at 21:28

Community · Accepted Answer · 2017-05-23 12:06:27Z

4

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

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Sep 11, 2011 at 21:31

Chad Levy

10.1k8 gold badges44 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

webwrks Over a year ago

the problem I now face is that was a menu link and if it is clicked from the menu (with the account page loaded) it doesn't load up. Is there a way to force it to reload?

Chad Levy Over a year ago

OK, I added support for that. The showAccountInfo() function will be called on page load and when the hashes change.

Jacob Lowe · Accepted Answer · 2011-09-11 21:30:50Z

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);

    })

}

Phil Parsons · Accepted Answer · 2011-09-11 21:13:58Z

0

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();
});

edited Sep 11, 2011 at 21:13

answered Sep 11, 2011 at 21:02

Phil Parsons

2,88724 silver badges16 bronze badges

2 Comments

webwrks Over a year ago

thx but the problem with this is I only want to run this on that particular click because I have other links on this page and can't just run this whenever the page loads...

Phil Parsons Over a year ago

Ok so if I think I understand what you are trying to achieve, running the function conditionally from certain incoming links then Paperjam's answer would be your best bet.

Collectives™ on Stack Overflow

jQuery - run a function from another page

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related