0

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.

webwrks
  • 11,158
  • 5
  • 24
  • 21
  • 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 Sep 11 '11 at 21:13
  • @webwrks do you want to load different pages with the same function? I still didn't get your question right. – LoneWOLFs Sep 11 '11 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 Sep 11 '11 at 21:21
  • you can write click events for each of the links look into http://api.jquery.com/click/ – LoneWOLFs Sep 11 '11 at 21:28

3 Answers3

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?

Community
  • 1
  • 1
Chad Levy
  • 10,032
  • 7
  • 41
  • 69
  • 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? – webwrks Sep 11 '11 at 22:01
  • OK, I added support for that. The `showAccountInfo()` function will be called on page load and when the hashes change. – Chad Levy Sep 11 '11 at 22:27
1

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

    })

}
Jacob Lowe
  • 698
  • 7
  • 16
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();
});
Phil Parsons
  • 2,857
  • 22
  • 15
  • 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... – webwrks Sep 11 '11 at 21:13
  • 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. – Phil Parsons Sep 11 '11 at 21:36