On click go to page and execute a function

Question

I have a page with multiple elements (page A). It is set up, so all are hidden but one. When you click on a link it will hide the one currently shown and only show the section corresponding to the link you clicked. I have that code working perfectly. I also have a separate page (page B) that has a list of links. When you click one of these links, I would like to load the page with multiple elements (page A) and show the element corresponding with the link clicked on the previous page. Below is the code I have as of now. It loads the page perfectly, but it doesn't show the appropriate element (I think because maybe that element does not exist when the code is run because the page is still loading?).

$(function() {
  $('li').click(function(){ //link that is clicked on
    var currentId = $(this).attr('id'); //capture id of clicked item
    window.location = 'next-page.php'; //load new page
    $('#all-elements').fadeOut(0); //hide all elements
    $('currentId').fadeIn("slow"); //show only corresponding element
    return false;
  });
});

I have set it up so the list item on the first page and the element I would like to show have the same id. My thinking in this is that I could capture the current id and use that value in the function as I do above. I know my problem is similar to the problem found here, but I don't think the # technique will work for what I am doing.

Answer 1

Edit: Nevermind - OP included shorthand version and I learned something new today:

http://api.jquery.com/ready/

-- REMOVE -- Try this. This will make sure no script is called until the DOM is ready.

$(document).ready(function () {
  $('li').click(function(){ //link that is clicked on
    var currentId = $(this).attr('id'); //capture id of clicked item
    window.location = 'next-page.php'; //load new page
    $('#all-elements').fadeOut(0); //hide all elements
    $('currentId').fadeIn("slow"); //show only corresponding element
    return false;
  });
});

Answer 2

This won't work because the code that you are running after the window.location is executed on the current page, not on the page that you are trying to load.

In order to get the page you are loading to execute any javascript, it will have to be on THAT page, not the current one. Modify your code as such, and it should work:

On page B:

$(function() {
  $('li').click(function(){ //link that is clicked on
    var currentId = $(this).attr('id'); //capture id of clicked item
    window.location = 'next-page.php#' + currentId; //load new page
    return false;
  });
});

On page A:

$(function() {
  $('#all-elements').hide(); //hide all elements
  $(window.location.hash).fadeIn("slow"); //show only corresponding element
});

Answer 3

Send the id as a parameter on the url?

window.location = 'next-page.php?id=' + $(this).attr('id');