0

Hokay, so I have a website thats all working off of one static page, index.php. The content on the page is decided by the variables in the URL.

  • index.php?site=home
  • index.php?site=forum
  • index.php?site=news

then I have a few that are a bit longer

  • index.php?site=news&action=archive

I'm trying to make a script that will change the color of the nav button for the page that im currently on.

The script im working on gets the url of the page, uses .search to grab everything after ?. Then I string split and grab the second part (the part after the equal sign) , but this only works for the ones with 1 variable.

I was thinking something along the lines of an if statement checking to see if the parsed string has multiple "="s in it, and if it does grab the text after the last one. Something like that- idk I'm a total noob.

Also , is there anyway I can have the javascript setAttribute in the head, or does it need to be after the ID/class is declared?

<html>
<head>
<title>Test</title>
<style type="text/css">
.test {
color: yellow;
font-size: 5em;
}
</style>
<script type="text/javascript">
function parseUrl(url) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

var page=parseUrl('').search;
var site=page.split("=")[1];

</script>
</head>
<body>
<ul>
<li id ="nav_home"><a href="testtest.html?site=home">Home</a>
<li id ="nav_forum"><a href="testtest.html?site=forum"/>Forum</a>
<li id ="nav_help"><a href="testtest.html?site=help"/>Help</a>
<li id ="nav_roster"><a href="testtest.html?site=roster"/>Roster<a/>
<li id ="nav_news"><a href="testtest.html?site=news"/>News<a/>
<li id ="nav_archive"><a href="testtest.html?site=news&action=archive"/>Archive<a/>
<script type="text/javascript">
document.getElementById("nav_" + site).setAttribute("class", "test");
</script>
</body>
</html>
John V.
  • 4,652
  • 4
  • 26
  • 26
user1361154
  • 63
  • 2
  • 5
  • FYI, if the page's content changes with the query string, its not a static page. – CountMurphy Sep 04 '12 at 23:25
  • Split it by the & first, then split it by the = – John V. Sep 04 '12 at 23:26
  • possible duplicate of [Parse query string in JavaScript](http://stackoverflow.com/questions/2090551/parse-query-string-in-javascript) – Neil Sep 04 '12 at 23:27
  • 1
    Personally if this was my project, I'd alter the nav links with the php. it would be way easier. user1361154, if you'd like I could post some sample php code :) – CountMurphy Sep 04 '12 at 23:28
  • @CountMurphy Not to mention more Search Engine friendly. +1 to the serverside idea. – John V. Sep 04 '12 at 23:29

4 Answers4

1

Just want to refer back to the much upvoted solution: -- How can I get query string values in JavaScript?

And you may soon want to start use jQuery. Less cross-browser problem, do more, write less.

Lastly, placing the script right before the closing body tag is considered as a good practice. You may consider that. -- How does the location of a script tag in a page affect a JavaScript function that is defined in it?

Community
  • 1
  • 1
Moe Tsao
  • 1,054
  • 6
  • 9
0

Why do you use javascript to look at the url when you could just make a PHP document and do a $_GET["site"]? These get variables are being passed via the server and you should be taking advantage of them.

Here's a tutorial on PHP explaining what I'm talking about more in-depth but just to give you an idea there are two different methods of passing variables via the server using PHP. There is $_GET and $_POST. The main difference between the two is what you see in your website right now. Everything after the ? in the URL represents a variable. If you wanted to get that variable in another PHP document you would simply do:

$variable = $_GET['site'];

One of the problems you were talking about was when you're dealing with multiple variables. Well with PHP it isn't really a problem... you just store it in a different variable.

$variable2 = $_GET['action'];

I think you should be able to handle it from there. If you need more help just ask.

Bart
  • 19,692
  • 7
  • 68
  • 77
aug
  • 11,138
  • 9
  • 72
  • 93
  • The question is about getting it on the client – Ruan Mendes Sep 04 '12 at 23:36
  • 1
    @JuanMendes, while true, php is the better solution to his problem. If the end goal is to learn, then this answer is acceptable (perhaps not upvotable, but acceptable). – CountMurphy Sep 04 '12 at 23:40
  • 1
    @CountMurphy That's why I didn't down vote it. But there's nothing wrong with getting them on the client, specially for RIAs where the server doesn't generate HTML. – Ruan Mendes Sep 05 '12 at 00:07
  • @JuanMendes, can't argue with that. I misunderstood, thought you downvoted. – CountMurphy Sep 05 '12 at 16:23
0

Not knowing the exact functionality of split, but there are two options: 1) the split just does one split, at the place it finds the "=" for the first time. 2) the split splits the string into multiple pieces, every time it finds a "=".

Assuming it's the 2nd option, then you'll get an array with all the substrings back. Example: Imagine you've got the string "?Variable1=this&variable2=that&variable3=somethingDifferent". If you split, you'll get an array with 4 strings:

  • "?variable1"
  • "this&variable2"
  • "that&variable3"
  • "somethingDifferent"

So what you really should do is perform a split with the "&" being the separator. Then, loop through all strings in your result array and split with the "=" being the separator. The first string of that result array will be you parameter (i.e. "variable1", "variable2") and the second string the value of that parameter.

da_h-man
  • 3
  • 3
0

I've used this script before to get the variables in a URL. (it's jquery)

    $.extend({
    getUrlVars: function(){
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
          hash = hashes[i].split('=');
          vars.push(hash[0]);
          vars[hash[0]] = hash[1];
        }
        return vars;
      },
    getUrlVar: function(name){
    return $.getUrlVars()[name];
  } 
});
var site = $.getUrlVar('site');
var news = $.getUrlVar('news');

I've seen this script on stackoverflow and http://www.backbonetechnology.com/blog/jquery/jquery-get-url-variables

There shouldn't be any problem setting the attribute in the head.Just use the selector.

document.getElementById("nav_" + site).css("class", "test");
FajitaNachos
  • 1,000
  • 8
  • 21