Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Javascript GET strings

    Okay so I have this code for HMTL5 Canvas, however this is a JavaScript directed question not a Canvas question.

    Code:
    <script type="text/javascript">
    
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.moveTo(0,400);
    cxt.lineTo(50,a);
    cxt.lineTo(100,b);
    cxt.lineTo(150,390);
    cxt.lineTo(200,300);
    cxt.lineTo(250,285);
    cxt.lineTo(300,299);
    cxt.lineTo(350,250);
    cxt.lineTo(400,325);
    cxt.lineTo(450,275);
    cxt.lineTo(500,300;);
    cxt.stroke();
    
    </script>
    That will draw a line graph, however I want to get the coordinates from a variable in the URL. So it may be example.com/a=500&b=600 . How would I retrieve these two variables and then insert in to they're respective places?

    Any help greatly appreciated, please make it as simple as possible - I'm good with my PHP now but JavaScript is all new

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You might find this script useful:
    Code:
    function getURIval( name ){
    	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
    	var regexS = "[\\?&]"+name+"=([^&#]*)";  
    	var regex = new RegExp( regexS );  
    	var results = regex.exec( location.href );
    		if( results == null ) return "";  
    		else return results[1];
    }
    Assuming you have this URL:
    Javascript GET strings

    ...and you want to get the value from the t parameter so you call the function as:
    alert(getURIval( 't' )); // returns 239716

    Secondly, you have a typo on your script here (remove highlighted):
    Code:
    cxt.lineTo(500,300;);
    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    @rangana : Nice function.

    If you prefer to have your all get parameters accesible from an object (similar to PHP where they are accesible from an associative array) you can do:
    Code:
    var _get = (function(){
      var i, p,x,  obj = {};
      x = location.search.slice(1).split('&');
      for(var i = 0; i < x.length;i++){
        p = x[i].indexOf('=');
        obj[x[i].slice(0,p)] = 
          decodeURIComponent(x[i].slice(p+1));
      };
      return obj
    })();
    Now you can ask for the get parameters like this:
    Code:
    _get.x   // retrieving parameter x
    _get.y  // retrieving parameter y etc.
    And you can also loop through all the parameters:
    Code:
    for(var i in _get){
      console.log('get parameter','name: ' + i, 'value: ',_get[i]);
    }
    Last edited by ironboy; 10-02-2011 at 02:36 PM.

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by ironboy View Post

    If you prefer to have your all get parameters accesible from an object (similar to PHP where they are accesible from an associative array) you can do:
    Code:
    var _get = (function(){
      var i, p,x,  obj = {};
      x = location.search.slice(1).split('&');
      for(var i = 0; i < x.length;i++){
        p = x[i].indexOf('=');
        obj[x[i].slice(0,p)] = 
          decodeURIComponent(x[i].slice(p+1));
      };
      return obj
    })();
    It's important to handle &amp; as well.
    Code:
    var _get = (function()
    {
      var i, p, x, obj = {},
          x = location.search.slice( 1 ).split( /\&(?:amp\;)?/ );
         
      for( var i = 0; i < x.length; i++ )
      {
        p = x[ i ].split( '=' );
        obj[ p[ 0 ] ] = decodeURIComponent( p[ 1 ] );      
      }
      
      return obj;
    })();

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Agreed. The question is should it be handled as a separator? (Or is it intentional as part of a value?)

    But if we agree on the first one your take on my code snippet is a real improvement.

    However I was trying to provide for multiple = between &:s (that I wanted to treat as part of the value).
    You don't. Any reasoning behind this?

  • #6
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you everyone that helped me out perfectly!

    I've now got a separate question which I have titled 'Making a popup on Canvas scroll over' if any of you are able to help with that it would be greatly received.


  •  

    Posting Permissions

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