SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Accessing variables thru a querystring.

    i am trying to build a submenu with a function i created that uses "?page=blah" to build the menu. i keep on getting 'page' is undefined error. is there a special way to access variables in querystrings with javascript?

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have to manually pull the name/value pairs from the location search string. Here's 2 methods I use.

    Code:
    GetVars = {};
    if(location.search.length>0){
    	s = location.search.substring(1).split("&");
    	for(i=0; i<s.length; i++){
    		s[i] = s[i].split("=");
    		GetVars[s[i][0]] = unescape(s[i][1]);
    	}
    }
    // Now you can access querystring variables like this...
    
    varName = GetVars["varName"];
    Code:
    // returns the value from a name/value pair in the location search string
    function requestQuery(name, noval){
    	var query = self.location.search;
    	if(query.length > 0){
    		name = name+'=';
    		var str = query.substring(1);
    		var start = str.indexOf(name);
    		if(start == -1){
    			return noval;
    		}
    		start += name.length;
    		var end = str.indexOf('&', start);
    		if(end == -1){
    			end = str.length;
    		}
    		return unescape(str.substring(start,end));
    	}else{
    		return noval;
    	}
    }
    
    // Example: 
    num = requestQuery('id', '1');
    
    // with the url www.mysite.com?id=4 the value of num would be "4".
    // if "id" was not present in the search string, the value of num would be "1".
    Last edited by podlob; Feb 6, 2003 at 17:22.
    travis

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2003
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    confused.... i suck

    here is the function i wrote to build a menu... combined with the first chunk of code you wrote.

    Code:
    	GetVars = {};
    	if(location.search.length>0){
    		s = location.search.substring(1).split("&");
    		for(i=0; i<s.length; i++){
    			s[i] = s[i].split("=");
    			GetVars[s[i][0]] = unescape(s[i][1]);
    		}
    	}
    
    	function BuildMenu(menu) {
    		menu_url = menu + "_url";
    		menu_des = menu + "_des";
    
    		if(menu_url != '' && menu_des != '') {
    			if(menu_url.length == menu_des.length) {
    				count_menu_length = menu_url.length + menu_des.length;
    				for(var i=0; i<count_menu_length/2; i++) {
    					document.write("<a href=\"" + menu_url[i] + "\" title=\"" + menu_des[i] + "\">" + menu_des[i] + "</a><br />");
    				}
    			} else {
    				alert("Menu cannot load.  Please check arrays.");
    			}
    		} else {
    			alert("Menu cannot load.  Please check arguments.");
    		}
    	}
    now, i am trying to call my function like this...

    Code:
    BuildMenu(GetVars["page"]);
    it returns with links reading 'undefined'. i am trying to load items from arrays... like this

    Code:
    var main_url = new Array();
    main_url[0] = "link.html";
    
    var main_des = new Array();
    main_des[0] = "Links";
    so basically when my url in the address bar is like "main.html?page=main", i want to load "main_des & main_url" ... see what i mean? stupid college project, i can't use php, asp or perl, so i'm trying to do something with javascript... any ideas?

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the main problem is how you're trying to access the arrays.

    This code...
    Code:
    menu_url = menu + "_url";
    menu_des = menu + "_des";
    Should be...
    Code:
    menu_url = this[menu+"_url"];
    menu_des = this[menu+"_des"];
    I'm not really sure what you're trying to do with this script, but here's some code that shows how to use querystrings to make a menu.

    Code:
    <html>
    <head>
    	<title></title>
    <script type="text/javascript">
    
    function requestQuery(name, noval){
    	var query = self.location.search;
    	if(query.length > 0){
    		name = name+"=";
    		var str = query.substring(1);
    		var start = str.indexOf(name);
    		if(start == -1) return noval;
    		start += name.length;
    		var end = str.indexOf("&", start);
    		if(end == -1) end = str.length;
    		return unescape(str.substring(start,end));
    	}else{
    		return noval;
    	}
    }
    function buildMenu(menu){
    	var menu = this[menu+"_nav"];
    	for(var i=0; i<menu.length; i++){
    		document.write('<a href="'+menu[i][1]+'" title="'+menu[i][0]+'">'+menu[i][0]+'<\/a><br />');
    	}
    }
    // Menu Structure
    var main_nav = [
    	["Links","index.html?page=links"],
    	["About","index.html?page=about"],
    	["Contact","index.html?page=contact"]
    ];
    var links_nav = [
    	["Main","index.html"],
    	["Link1","link1.html"],
    	["Link2","link2.html"],
    	["Link3","link3.html"]
    ];
    var about_nav = [
    	["Main","index.html"],
    	["About1","about1.html"],
    	["About2","about2.html"],
    	["About3","about3.html"]
    ];
    var contact_nav = [
    	["Main","index.html"],
    	["Contact1","contact1.html"],
    	["Contact2","contact2.html"],
    	["Contact3","contact3.html"]
    ];
    </script>
    </head>
    <body>
    
    <script type="text/javascript">
    	buildMenu(requestQuery("page","main"));
    </script>
    
    </body>
    </html>
    travis

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wrote an object class for getting query string data that I think works pretty well. Here's the relevant source code
    Code:
    function GetVars( def ) 
    { 
        this._def_ = def; 
        var query, queries = top.location.search.substring(1).split( /\&/ ); 
        for ( var i=0; (query = queries[i]); i++ ) 
        { 
            query = query.split( /\=/ ); 
            this[query[0]] = ( typeof query[1] == 'undefined' ) ? def : unescape(query[1]).replace( /\+/g, " " ); 
        } 
    } 
    
    GetVars.prototype.assign = function( key ) 
    { 
        return ( this.exists( key ) ) ? this[key] : this._def_; 
    } 
    
    GetVars.prototype.exists = function( key ) 
    { 
        return ( typeof this[key] != 'undefined' ); 
    }
    I omitted one method that you probably don't need. You can see the full source code here

    With query string like "?page=services" you can access the page variable two ways...
    Code:
    var g = new GetVars( 'main' ); // <-- 'main' is defined as default
    var myVar = g.assign( 'page' );
    // The above will assign 'services' to myVar.  Were the query-string
    // not present, myVar would receive 'main'
    // or
    // var myVar = g.page;
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





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
  •