CODEWITHSUNDEEP
javascriptjquery
kjarsenal
kjarsenal

Reputation:

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

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.

Oh.... existing class is...

}
/* ------- Interaction Containers Class -------- */
.interactContainers {
padding:8px;
border:#999 1px solid;
display:none;
}

But you probably already knew that!

Steve

Gentlemen...

This is exactly what I need and mine is less complicated than this. Just one div to open with the script. I am a javascript incompetent person so far. :(

How do you dumb this down to my needs?

Seperate page link is: <a href="myprofile.php?id='. $id .'" target="_parent">Email</a></div>

Page it goes to code is:

function toggleSlideBox(x) {
    if ($('#'+x).is(":hidden")) {
            $(".interactContainers").slideUp(200);
            $('#'+x).slideDown(300);

    } else {
        $('#'+x).slideUp(300);
    }
}

and the div is this...

<div class="interactContainers"  id="interactContainers" style="background-color: #EAF4FF;">

I just want to click the link (Email) from one page...have it open the correct persons(id) profile page...and then execute my existing toggleSlideBox javascript.

Is that doable without a bunch or re-code with javascript that I have about an IQ of 4 in. :\

Thank you for any assistance you provide

S

Upvotes: 3

Views: 2958

Answers (3)

tom
tom

Reputation: 2077

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>

Upvotes: 2

s4y
s4y

Reputation: 51715

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

Upvotes: 2

Martin v. L&#246;wis
Martin v. L&#246;wis

Reputation: 127507

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.

Upvotes: 0

Related Questions