SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by skelleex View Post
    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?
    With something like this:

    HTML Code:
    <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.

    Code javascript:
    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.

    Code javascript:
    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.

    Code javascript:
    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:

    Code javascript:
    var matches = qs.match(/style=(\d+)/);
    var number = Number(matches[1]);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by skelleex View Post
    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?
    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.
    Tab-indentation is a crime against humanity.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    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.
    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. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by skelleex View Post
    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.
    Is this something where each page having a different id attribute on the body can help?
    http://css-tricks.com/id-your-body-f...d-specificity/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Is this something where each page having a different id attribute on the body can help?
    http://css-tricks.com/id-your-body-f...d-specificity/
    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. #9
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You can use the search property of the A element - https://developer.mozilla.org/en/DOM/HTMLAnchorElement

    Example:
    Code JavaScript:
    <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/9...-in-javascript
    An example from one of the answers is below:
    Code JavaScript:
    <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: [url]http://stackoverflow.com/a/3855394[/url]
    	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:
    Code:
    Object { id="13", text="test"}
    test

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,600
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •