How to populate page content based on link clicked from another page?

Question

I am working on an animal database app that works entirely within a lightbox. I am using Particle Tree's lightbox gone wild for the lightbox.

I have the design and navigation all worked out, I just need to fill in the data for the animals' info page. I have a list of animals in a drop down menu, from which the user will click on an animal. Once the user clicks on this animal, it will take them to the information page for that animal (all within the lightbox).

Of course, I could just link every animal to a separate html page, and have 50+ animal pages on the server, but that is not very efficient. What I want to do is have one html page with divs in place that will fill up with the data on the xml file once it loads.

For example, if the user clicks on "foxes", the blank animal page would load and search the xml for the "foxes" data, and then populate the page with content.

Here is the link that would take you to the animal info page:

<a id="animal_link" href="birdExample.html" class="lbAction" rel="insert">Another Bird</a>

Since the animal list and the actual animal info page are on 2 separate html files, what code would I use to pass the animal that's been clicked on over to the other page so that it knows what to look for in the xml file?

(I should mention I am no expert in javascript or php, but I rather use javascript to solve this problem).

score 2 · Answer 1 · answered Dec 01 '13 at 09:07

2

You can pass data from one page to another with query parameters

<a href="animals.php?animal=bird" ... />

then animals.php can access the "animal" parameter

<div>
    Animal selected : <?php echo $_GET["animal"] ?>
</div>

answered Dec 01 '13 at 09:07

actual_kangaroo

5,971
2
31
45

Thanks! What is the same function to get "animal" in javascript? – Tommy DC Dec 01 '13 at 09:34
it's complicated with javascript! http://stackoverflow.com/questions/979975/how-to-get-the-value-from-url-parameter – actual_kangaroo Dec 01 '13 at 09:37

score 1 · Accepted Answer · answered Dec 01 '13 at 09:05

If you're trying to pass parameters to a generic HTML page that serves many different needs, then the typical way to do that is with query parameters.

A query parameter is tacked onto the end of the URL and looks like this:

http://www.yourdomain.com?animal=coyote&location=Yellowstone

The query parameters (the part after the question mark) can either be processed by the server (in order to change what it puts in the page based on those) or they can be processed by client-side javascript to make decisions on how to render the page or what data to put in it. If your server is ignoring the query parameters, then all URLs with the same base URL, but different query parameters will load the same basic HTML page and then your client-side javascript could decide how to render the page for each different set of parameters.

You can then put these URLs into the links on your first page. They will load the second page and pass that second page the desired data accordingly to what link was clicked on.

That's way more simple than I thought it was going to be. Thanks! Do you know a good site to read up more on query parameters? — Tommy DC, Dec 01 '13 at 09:23

How to populate page content based on link clicked from another page?

2 Answers2