-1

I have two clickable elements in HTML like this:

HTML

var node1 = $('<a href="#" class="list-group-item"">' + fileName1 + '</a>');
var node2 = $('<a href="#" class="list-group-item"">' + fileName2 + '</a>');

They belong to the page with url say:

http://foobar/examples.html

They have onclick listeners attached to them that retrieve some data from the server and display it on the webpage

Javascript

node1.click(function () {/*Displays table1*/})
node2.click(function () {/*Displays table2*/})

I want to change the URL for the two clicks just so that if I open the URL in a fresh tab, I get the node element clicked and the data visible. For example, conceptually, the following URL should point to the node1 clicked and data for it visible:

http://foobar/examples.html##fileName1  (does not work, but you get the idea)

I do not want to change the URL in accordance with what has been explained here as I do not want to create an HTML page for every fileName (it is an increasing list). Anchors don't help either as they just open http://foobar/examples.html and none of the nodes clicked . Neither is the answer to this question very clear to me. Can someone please help?

Community
  • 1
  • 1
Core_Dumped
  • 4,577
  • 11
  • 47
  • 71

2 Answers2

0

The first link you gave for changing the URL is what you want. However, you don't change the HTML page - you can add URL variables. For example:

http://www.example.com/mypage.html?node1=1&node2=1

Then you need to write a Javascript function at the top of your document to read the URL variables, and display the nodes that are set to 1 (or whatever value you choose) when the document has been loaded. For an example of how to read URL variables, see this answer.

Community
  • 1
  • 1
Aaron D
  • 7,540
  • 3
  • 44
  • 48
0

You could give your nodes identifiers, like:

var node1 = $('<a href="#" class="list-group-item" id="fileName1">' + fileName1 + '</a>');
var node2 = $('<a href="#" class="list-group-item" id="fileName2">' + fileName2 + '</a>');

You would need to adjust the file names to be valid IDs.

Add the following JS:

var nodeId= window.location.hash;
$(nodeId).click();

You could then use:

http://foobar/examples.html#fileName1 (where fileName1 is adjusted as for IDs).