A link that opens a new page based on info within a link

JavaScript
1

Is it possible to have a link with an id within it such as

<li><a href='newpage.html' id='12'>Some title</a></li>

when you click on the link a new page html page opens and on that new page, information found in a database with the id of 12(as found in the link) will be displayed using external style sheets etc. Can this be done with html css javascript and json? P.S I know how to do this with php however I want this to be done in my mobile app so the actual page cannot be a .php page

2

IDs cannot begin with a digit.

You can either add a querystring parameter to the href which the receiving page reads, or use an onclick handler to store a parameter either in a cookie or in sessionStorage.

3

I would like to use a query string as sessionStorage may not always be available to me. How can it be done with a query string?

4

With something like this:

<ul id="sites">
  <li>
    <a href="newpage.html?style=12">Some title</a>

You can attack an onclick handler to the UL element itself, so that any clicks within it will be captured.


document.getElementById('sites').onclick = sitesClickHandler;

And in that sitesClickHandler function you can check to see if it was a link that was clicked on, then take action.


function sitesClickHandler(evt) {
  evt = evt || window.event;
  var targ = evt.target || evt.srcElement;
  if (targ.nodeType === 3) {
    targ = targ.parentNode; // Fix browser bug
  }
  if (targ.nodeName === 'A') {
    processClickedLink(targ);
    return false;
  }
}

That processClickedLink function will do want you want with the link, and from there you can also check the querystring. You can get the querystring from the search property of the link.


function processClickedLink(link) {
  var qs = link.search;
  ...
}

Given the initial href of “newpage.html?style=12”, the qs variable would now contain a string value of “?style=12”

You can get the number 12 by something like:


var matches = qs.match(/style=(\\d+)/);
var number = Number(matches[1]);
5

Do you mean your link to navigate to a new page on which some styling is determined by the querystring, or stay on the current page and alter something on it?
My interpretation was the first scenario, in which case you don’t need to worry about onclick handlers.

6

I want to go to a new page to change the styling of original page and present new data. If I don’t need a handler then what can I use then
btw in php this is soo much easier.

7

Is this something where each page having a different id attribute on the body can help?

8

ok I dont think I am being understood in php you can have dynamic links which have a value of for example ?id=12. When you click that link it would open a new php page but produce information on the new page based on the value of ?id=12. Now what php is doing with dynamic links I would like to do that with html
javascipt php and json. The reason for this is because I am building my app in phonegap.

Thanks

9

You can use the search property of the A element - https://developer.mozilla.org/en/DOM/HTMLAnchorElement

Example:

<ul>
	<li><a href="?id=12">Test 1</a></li>
	<li><a href="?id=13&text=test">Test 2</a></li>
	<li><a href="?id=14">Test 3</a></li>
</ul>
<script>
	var aLinks = document.getElementsByTagName('a');
	for( var i=0; i<aLinks.length; i++ ) {
		aLinks[i].onclick = function(e) {
			e.preventDefault();
			console.log(this.search);	
		}
	}
</script>

There is a thread on SO that goes into the parsing of the query strings: http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript
An example from one of the answers is below:

<ul>
	<li><a href="?id=12">Test 1</a></li>
	<li><a href="?id=13&text=test">Test 2</a></li>
	<li><a href="?id=14">Test 3</a></li>
</ul>
<script>

	// Modified version of: http://stackoverflow.com/a/3855394
	function parseQuery(str) {
	    if (str == "") return {};
	    var b = {};
	    for (var i = 0; i < str.length; ++i)
	    {
	        var p = str[i].split('=');
	        if (p.length != 2) continue;
	        b[p[0]] = decodeURIComponent(p[1].replace(/\\+/g, " "));
	    }
	    return b;	
	}


	var aLinks = document.getElementsByTagName('a');
	for( var i=0; i<aLinks.length; i++ ) {
		aLinks[i].onclick = function(e) {
			e.preventDefault();
			var $_GET = parseQuery( this.search.substr(1).split('&') );
			console.log($_GET);
			console.log($_GET['text']);
		}
	}
</script>

Onclick of the second anchor, the console gives me:

Object { id="13", text="test"}
test
10

You really ought to use something other than id as the name for your variable so as to avoid getting it confused with the HTML attribute of that name which can be the target of an <a> tag.

For example:

<a href=“page1.htm#a12”>text</a>

would link to page1.htm and then scroll to put the element with id=“a12” at the top of the page.