Determine what was clicked on previous page

Question

i have two divs in one page (div A and div B) and by default Div A is set as display block and Div B is set as display none. For a user to land on this particular page, he has to click on a link in a dialog box. Like this:

<div id"dialog-box">

  <a href="/newpage.html" class="firstlink"> First Link </a>

  <a href="/newpage.html" class="secondlink"> Second Link </a>

</div>

<div class="newpage">

   <div class="divA" style="display:block">

   </div>

   <div class="divB" style="display:none">

   </div>

</div>

What i want to achieve is something like this:

$(".firstlink").click(function(){
   $(".divA").css("display","none");
   $(".divB").css("display","block");
});

$(".secondlink").click(function(){
   $(".divA").css("display","block");
   $(".divB").css("display","none");
});

But the above would of course not work because divA and divB is in a different page... And i dont want to use cookies for this small task.

Put it in the URL. For example, the links `href` attributes would be like `/newpage.html?link=firstlink`. Then, in your `newpage.html` JS, you would look at `location.search` and figure out the value for `link`, and run the appropriate code — Ian, Aug 21 '13 at 04:19
sounds a good option.. can you please paste in some code so i have have a look :) — Wasiim, Aug 21 '13 at 04:22

score 1 · Answer 1 · answered Aug 21 '13 at 04:28

1

use this

<a href="/newpage.html?b=firstlink" class="firstlink"> First Link </a>

  <a href="/newpage.html?b=secondlink" class="secondlink"> Second Link </a>

and recive it another page

<?php $link=$_REQUEST['b']; ?>

and use this

<?php if($link=='firstlink'){ ?>
$(".firstlink").click(function(){
   $(".divA").css("display","none");
   $(".divB").css("display","block");
});
<?php
}
if($link=='secondlink'){
?>
$(".secondlink").click(function(){
   $(".divA").css("display","block");
   $(".divB").css("display","none");
});
<?php
}
?>

answered Aug 21 '13 at 04:28

Lucifer

516
1
6
25

Unfortunately the site is built on an asp.net platform.. The only feasible way i can tackle this issue is by pure javascript.. thanks – Wasiim Aug 21 '13 at 04:39
then it is the perfect way for you follow this and dont forget me to give privleg thank you http://stackoverflow.com/questions/979975/how-to-get-the-value-from-url-parameter – Lucifer Aug 21 '13 at 04:51

Ian · Accepted Answer · 2013-08-21T05:16:54.673

I'd pass the needed data in the querystring of the <a> href properties. So I'd change the HTML to be:

<a href="/newpage.html?link=firstlink" class="firstlink"> First Link </a>

<a href="/newpage.html?link=secondlink" class="secondlink"> Second Link </a>

Then, in your newpage.html, I'd have code like this:

(function () {
    "use strict";

    /* Parse querystring */
    var displayMap = {
            firstlink: ".divA",
            secondlink: ".divB"
        },
        qs, pairs, split, i, pair,
        queryString = {};

    qs = location.search;
    if (qs) {
        pairs = qs.split("&");
        for (i = 0; i < pairs.length; i++) {
            pair = pairs[i];
            split = pair.split("=");
            queryString[decodeURIComponent(split[0])] = decodeURIComponent(split[1]);
        }
    }
    /* End Parse querystring */

    window.onload = function () {
        var linkPassed, link;
        linkPassed = queryString["link"];
        if (linkPassed) {
            for (link in displayMap) {
                if (link === linkPassed) {
                    $(displayMap[link]).hide();
                } else {
                    $(displayMap[link]).show();
                }
            }
        }
    };
}());

Which looks at the URL after the ?, splits it by "&" (and loops over the pairs), then by "=". If the key is "link", it then proceeds to look at the displayMap to see what the value in the URL translates to on this page...and shows/hides appropriately.

I'm sure there's a more elegant way to handle this, but I'm just trying to explain the approach.

Actually on my newpage.html i cannot use jquery.. will have to find an approach with pure javascript.. The above codes seems quite complex to achieve this small task though :( — Wasiim, Aug 21 '13 at 04:38
@Wasiim The only reason I used jQuery was because your post included it. The only real jQuery in there is the `$(document).ready(function () { /* YOUR CODE */ })` part, which can basically be replaced with `window.onload = function () { /* YOUR CODE */ };`. And it may seem complicated, but it's because the querystring needs parsed. Otherwise, it's not that complex of logic. I'll try and clean it up, and not use jQuery — Ian, Aug 21 '13 at 04:40
The above code seems to be working.. the logic is not that complex. Will need to find an easier approach later.. Thanks :) — Wasiim, Aug 21 '13 at 04:55

score 0 · Answer 3 · answered Aug 21 '13 at 04:25

You can QueryString if you want to get detail from previous page.

First link url would be "page1.html?clickedLink=page1Link1" and second link url would be "page1.html?clickedLink=page1Link2".

Now on your destination page you can check QueryString to verify which of the two link brought you to this page.

score 0 · Answer 4 · answered Aug 21 '13 at 04:34

You can include a request parameter in your links to the second page. On the second page, you would use JavaScript to get the value of the parameter, which will correspond to which link was clicked.

Change your links to something like this.

<a href="/newpage.html?link=1" class="firstlink"> First Link </a>
<a href="/newpage.html?link=2" class="secondlink"> Second Link </a>

On your second page, use a function like this to get the URL parameters. http://jquerybyexample.blogspot.com/2012/06/get-url-parameters-using-jquery.html

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}

Using the above function

if (GetURLParameter('link') === '1') {
   $(".divA").css("display","none");
   $(".divB").css("display","block");
} else {
   $(".divA").css("display","block");
   $(".divB").css("display","none");
}

score 0 · Answer 5 · answered Aug 21 '13 at 04:46

If you dont want to use cookie, then you have to pass values through url parameters.

Below function would help you to get the param,

function getParameter(param) {
                var val = document.URL;
                var url = val.substr(val.indexOf(param))  
                var n=parseInt(url.replace(param+"=",""));
                alert(n+1); 
}
getParameter("page");

http://www.example.com/newpage.html?page=firstlink

I hope this will help you.

Determine what was clicked on previous page

5 Answers5