How to show content based on url parameter via JavaScript?

Question

[Update] code I have edited

First, the plain HTML :

<ul>
 <li><a href="javascript_accord.php/option/coke/">coke</a></li>
 <li><a href="javascript_accord.php/option/bubble-tea/">buble-tea</a></li>
 <li><a href="javascript_accord.php/option/milk/">milk</a></li>
</ul>

Second, link page (javascript_accord.php) contain javascript:

<html>
<head>
   <script type="text/javascript" src="development-bundle/jquery-1.3.2.js"></script>
   <script language="javascript"> 
   $(document).ready(function() {
var option = 'coke';
var url = window.location.pathname.split('/');
option = url[3];
showDiv(option);
});

    function showDiv(option) {
$('.boxes').hide();
$('#' + option).show();

   }
  </script>
</head>

<body>
<div class="boxes" id="coke">Coke is awesome!</div>
    <div class="boxes" id="bubble-tea">Bubble tea is da bomb!</div>
    <div class="boxes" id="milk">Milk is healthy!</div>
    <p>
I change my mind:
<ul>
    <li><a href="javascript:showDiv('coke')">Coke</a></li>
    <li><a href="javascript:showDiv('bubble-tea')">Bubble Tea</a></li>
    <li><a href="javascript:showDiv('milk')">Milk</a></li>
</ul>
   </p>
   <a href="http://localhost/selectaccord.php">Back to main page</a>
  </body>
  </html>

I found some tutorial about 'show/hide' content based on URL parameter via JavaScript. But I stuck when I change a part of the JavaScript code.

Here are the code that I learned from the tutorial. First page contain some links to other page:

If you had to choose a drink, what would you choose:
<a href="/demo/demo-show-hide-based-on-url.html?option=coke" 
<a href="/demo/demo-show-hide-based-on-url.html?option=bubble-tea"
<a href="/demo/demo-show-hide-based-on-url.html?option=milk

And here is the code contain in linking page (/demo/demo-show-hide-based-on-url.html) :

<div class="boxes" id="coke">Coke is awesome!</div>
<div class="boxes" id="bubble-tea">Bubble tea is da bomb!</div>
<div class="boxes" id="milk">Milk is healthy!</div>
<p>
I change my mind:
<ul>
    <li><a href="javascript:showDiv('coke')">Coke</a></li>
    <li><a href="javascript:showDiv('bubble-tea')">Bubble Tea</a></li>
    <li><a href="javascript:showDiv('milk')">Milk</a></li>
</ul>
</p>
<a href="/demo/demo.html">Back to main page</a>

And the javascript :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var option = 'coke';
    var url = window.location.href;
    option = url.match(/option=(.*)/)[1];
    showDiv(option);
});
function showDiv(option) {
    $('.boxes').hide();
    $('#' + option).show();
}
</script>

It works greatly, but when I try to change the link page from

href="/demo/demo-show-hide-based-on-url.html?option=coke"

into something like this :

href="/demo/demo-show-hide-based-on-url.html/option/coke"

And change the url variable in javascript from

var url = window.location.href;
option = url.match(/option=(.*)/)[1];

to

var url = window.location.pathname.split('/');
option = url[3];

And all content in

<div class="boxes" id="...">

appear.

It supposed to be only selected one will appear. I have tried

var url = window.location.pathname.split('/');
option = url[3];

in simple JavaScript to check whether it will catch the right or value or not. And it does return the right value (coke, milk, bubble-tea).

So, what went wrong? I hope somebody understand this problem and help.

do you see some error in javascript console on page load? can you share your code? you can use jsfiddle.net — Nakul
– Nakul, Commented Dec 8, 2011 at 13:12
@Nakul I'm not sure how to use jsfiddle.net but here is the code jsfiddle.net/WLTSd/1 — Tania Rida
– Tania Rida, Commented Dec 8, 2011 at 14:02
can you paste the full url that you see on link(javascript) page? — Yogesh
– Yogesh, Commented Dec 8, 2011 at 14:46
here is the full url localhost/javascript_accord.php/option/coke — Tania Rida
– Tania Rida, Commented Dec 8, 2011 at 14:52
before $('#' + option).show(); add this statement and see in your console in firefox or chrome. console.log(option, $('#' + option)); You should see the option and corrosponding div. This will help you in debugging. — Yogesh
– Yogesh, Commented Dec 8, 2011 at 15:05

Nakul · Accepted Answer · 2011-12-08 16:51:23Z

1

path to jquery is wrong. Can you please check if jquery library is loading?

jquery will be loaded from javascript_accord.php/option/coke/development-bundle/jquery-1.3.2.js Please make the path to library absolute. That should do :)

answered Dec 8, 2011 at 16:51

Nakul

1,60011 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tania Rida Over a year ago

Oh my gosh :D Yeah, you're absolutely right. Now, all works fine. Thankyou so much :)

Anthony Grist · Accepted Answer · 2011-12-08 13:11:31Z

0

I believe that window.location will return the full URL of the page, so you're not just working with the /demo/demo-show-hide-based-on-url.html/option/coke part.

I'd simply change the regular expression instead to replace the = with a /, like so:

option = url.match(/option\/(.*)/)[1];

answered Dec 8, 2011 at 13:11

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

2 Comments

Tania Rida Over a year ago

I tried as you said but it did not work. If I set the URL to "/demo/demo-show-hide-based-on-url.html?option/coke" then the "option=url.match(/option\/(.*)/)[1]" will work. I tried : "option=url.match(/\/option\/(.*)/)[1]" also not working.

Anthony Grist Over a year ago

@TaniaRida Can you edit the question to include the code you have now?

lrxw · Accepted Answer · 2011-12-08 13:42:12Z

0

"/demo/demo-show-hide-based-on-url.html/option/coke".split('/')[3] will return option and not coke

there are 5 entries in the array, because there is an empty string before the first '/': "", "demo", "demo-show-hide-based-on-url.html", "option" and "coke"

answered Dec 8, 2011 at 13:42

lrxw

3,9267 gold badges37 silver badges49 bronze badges

2 Comments

Tania Rida Over a year ago

Yes, sorry. Actually I didnt use this link : "/demo/demo-show-hide-based-on-url.html/option/coke". I have updated my question and included the code I have now

lrxw Over a year ago

You can also try: url = "/demo/demo-show-hide-based-on-url.html/option/coke"; var results = url.split('/'); var option = results[results.length-1];

Collectives™ on Stack Overflow

How to show content based on url parameter via JavaScript?

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related