calling a function on one page from a link on another page

Question

I have an html page (django) that contains several divs(each displaying different data) and one div that has navigation links. I'll call this my main page. I have an external .js file (jQuery) that reveals one display div on the main page and simultaneously hides all of the others (except the navigation div) based on which nav link is chosen.

$(function(){

$("#sl_sectorbr").click(function showSectorMini(){
  $(".minimenu").hide();
  $(".minimenu > *").hide();
  $("#sector_mini").fadeIn("slow");
  $("#sector_mini > *").fadeIn("slow");
});

All of this works fine. My question is, if I want to place "navigation links" on a second html page; that when clicked would both load my main page AND call/execute a specific function like "showSectorMini()" just as if it were clicked from the main page itself — how would I write that code? I'd really appreciate any help I could get.

Answer 1

You should arrange to produce different versions of the page, and put different onload actions into each version. For example, make the div to show a query parameter, and make django fill in the right onload depending on the query parameter. Then put the different query parameters into the links.

Answer 2

You could use the hash - link to http://example.com/#sectionOne and read the hash in your ready function.

Answer 3

As SidneySM suggested, a hash is the standard way of handling this. It could go something like this:

In your external js file:

var initSectorUI = function(){
  if (location.hash) showSectorMini(location.hash);
};

var showSectorMini = function(sector){
  $('#sectors > div').hide();
  $(sector).show();
};

On your other pages:

$(function(){
  initSectorUI();

  $("#navigator a").click(function(){ 
    showSectorMini($(this).attr('href'));
  });
});

<div id="navigator">
  <a href="#one">One</a>
  <a href="#two">Two</a>
</div>
<div id="sectors">
  <div id="one" style="display:none">A one</div>
  <div id="two" style="display:none">A two</div>
</div>