jquery send to new web page + pass variable

Question

On the "about" page of my website, the click of the "Next" button will go through a few slides. This is done using a variable called "count", and jquery:

$("#NextBtn").click(function() {
  count = count + 1
});

And

$("#NextBtn").click(function(){

/*on count=0, the background image is shown*/

if (count==1) {
  $('#slides').slideToggle();
};


if (count==2) {
  $("#slide_1").hide()
$("#slide_2").show()

};

if (count==3) {
  $("#slide_2").hide()
$("#slide_3").show()

};

On the click of a link on my home page (./*home.html), i would like to send the user to this "about" page, with slide number 2 displayed.

<a href="./*about.html">Click here</a>

How can I do this? Can i pass the redirection a value of "count"? Can i tell jquery that if the user is coming from the home page, display slide 2?

I'm at loss as to what to do... Thanks a lot for your help!

you can simply initialize count to '2' before all this function. — Krishna, Jun 24 '13 at 17:53

score 2 · Answer 1 · edited May 23 '17 at 12:05

If you are displaying slides while staying on the page, you can simply keep track of the variable. If you are not, then these are a few ways:

Pass GET data. See this answer. Changes url (good for sending links, bad for short urls), also visible on server
Pass POST data. Not really an option if you can't change the server (and not a very good one otherwise), but doesn't change url.
Set a cookie. might give weird behaviour if there are multiple tabs/windows.
Add a # location. I think this is most appropriate, if you're not already using # for something else. Won't interfere with forms GET data, but lets users send url's with the correct slide to friends. See this.

TL;DR: Add the slide number to the redirect url with a # before it, then use window.location.hash to retrieve it on the next page.

EDIT: here's working example code

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
        <script type="text/javascript">
            var def = '#slide1';

            function slide_jump(goal)
            {
                if (goal[0] == '#')
                {
                    goal = goal.substring(1)
                }
                $('[name^="slide"]').hide();
                if (goal)
                {
                    $('[name=' + goal + ']').show();
                }
                else
                {
                    window.location.replace(def);
                    $('[name=#' + goal + ']').show();
                }
            }

            $(document).ready(function()
            {
                slide_jump(document.location.hash);
                $('#nav a').each(function(k, elem)
                {
                    $(elem).click(function (elem, event)
                    {
                        slide_jump($(elem).attr('href'));

                    }.bind(null, elem));
                });
            });
        </script>
    </head>
    <body>
        <div id="nav">
            <a href="#slide1">First</a>
            <a href="#slide2">Second</a>
        </div>
        <div name="slide1">
            Hello and welcome on slide 1!
        </div>
        <div name="slide2">
            So we are on slide 2, then?
        </div>
    </body>
</html>

is this the right way to do it? Doesn't work for me... if (count==2) { window.location.hash = 'this_slide'; $("#slide_1").hide() $("#slide_2").show()} — Julia, Jun 24 '13 at 18:45
Sorry, I didn't notice your reply; I added an example that works! — Mark, Jul 20 '13 at 23:22

score 0 · Answer 2 · edited May 23 '17 at 11:50

Can i pass the redirection a value of "count"?

Sure, it just takes a little code. You can append a query string value with the data you want to pass along to the next page. But since that value is dynamic, you'll need to handle the actual clicking of the link in JavaScript. So the link itself might be something like this:

<a href="#" id="aboutLink">Click here</a>

And in JavaScript you'd do something like this:

$('#aboutLink').click(function () {
    window.location = 'about.html?count=' + count;
});

Of course, this assumes that the count value is in scope at that time. If it's not, you'd have to find a way to make it available, such as moving it to a higher scope or perhaps writing another function that determines the current count and returns it.

Of course, how you subsequently use that value on the next page is another story entirely. If everything is client-side code (which is somewhat implied by the .html extension, I think) then you'd be looking to use query string values in JavaScript.

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

Pass in the variable count:

<a href="./*about.html?count=2">Click here</a>

You can grab the number passed through to count via this: How can I get query string values in JavaScript?

Then, have your jQuery advance to the appropriate slide.

edited May 23 '17 at 12:11

Community

1
1

answered Jun 24 '13 at 17:59

joncarl

642
1
6
18

jquery send to new web page + pass variable

3 Answers3