Redirect page to another and then do something jQuery

Question

I have one page with slider with images and names of category, and second page with gallery and on this page is another slider with category icons. When you click on slider1 it shoud redirect you to page2 (gallery) and set slider2 to right positions, I mean slider2 shoud jump to proper slide with exactly the same category to show right pictures in gallery. Redirecting was no problem to me but I don't know how I should write the functions after redirecting to page. Right now I have

 var slide_jump;  
 $('div.zobacz').bind("click touchstart", function() {

    slide_jump = glide2.current(); //get number of slide on slider1 to know to which slide should jump slider2

    setTimeout(function() {//redirecting must be after I get current slide on slider1
        var url = "http:***.html";
        $(location).attr('href', url);
    }, 100);
 //HERE IS MY PROBLEM
});

there is a function : slider2.jump(slide_jump) - slider2 jump to proper slide, but I dont know were I shoud use it. it should be after the page2 load, i know there is something like

$(window).load(); $(document).ready();

but should I use it know? if everything is already in something like this.

You need to pass this `slide_jump` value to the other page, this could be done by appending a parameter to the URL query string. Such as `www.example.com?jump=42`, then you need to work out how to retrieve that value in your page 2 `$(window).load()` event (I can't remember of the top of my head, otherwise would put as an answer) — musefan, Sep 26 '14 at 09:46

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

This is used for when all the DOM elements are done loading.

$(document).ready();

When you are working with images and want to know when all the images are done loading you should use

$(window).load();

In the load you can do the jump slide.

$(window).load(function()
{
    //Do the jump slide
});

EDIT :

Examples for reading querystring. http://www.darlesson.com/jquery/querystring/?language=en&province=Alberta&province=Ontario&province=Quebec

and here is an example :

//Wait when done loading images
jQuery(window).load(function () 
{
    //Read querystring
     var selectedSlide = $.QueryString("slided");

     //Jump to slide
     slider2.jump(selectedSlide)
});

I have typed it from my head so its only for the idea.
Some more info about load and ready : Difference between $(window).load() and $(document).ready() functions

edited May 23 '17 at 11:57

Community

1
1

answered Sep 26 '14 at 09:42

VRC

745
7
16

Not sure this really qualifies as an answer. It's helpful, but still leaves so much of the problem unsolved. For example, how to know which jump was selected in page 1? – musefan Sep 26 '14 at 09:43
ok thank you, but i still dont know where i should write it. where i should use $(window).load()? in this function click? or somewhere else? – Karolina Sep 26 '14 at 09:45
musefan, i know which jump, glide2.current() tell me which slide were displayed when the div was clicked, and slider2.jump(result of glide2.current()) shoud redirect or jump to exacly the same slide in slider 2 – Karolina Sep 26 '14 at 09:49
You redirect it to another page with your $(location).attr('href', url). I think you should use another js file on for that page and then you start with the $(window).load function and then you do the jump slide in it. In your piece of code I see that you put the selected slide in a variable. You should send this too like in a querystring and read it on the other page. – VRC Sep 26 '14 at 09:53
@user3390043: No, I don't think you do know, because you don't even realize that this `load()` event needs to go in the page2 script. Where you won't be able to just access a variable (`slide_jump`) from page1 – musefan Sep 26 '14 at 09:53
1

musefan, thank you, so you trying to tell that after load() I lose all the variables, right? I didnt know it – Karolina Sep 26 '14 at 09:57
No he means that when you redirect the page like I said in the comment above too. You will lose that variable since it is a new page load. – VRC Sep 26 '14 at 09:58
oh, I see, sorry I am begginer and I learn by myself so i don't now everything, yet. – Karolina Sep 26 '14 at 10:00

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

I would suggest to use window.onload.

Refer window.onload vs $(document).ready() for better understanding

edited May 23 '17 at 12:13

Community

1
1

answered Sep 26 '14 at 09:43

Manoj Namodurai

529
2
7

score 0 · Accepted Answer · edited May 23 '17 at 10:26

What you need to do is pass the variable to the new page, and then process that value on page load. Something like this should work:

PAGE 1 CODE:

var slide_jump;  
$('div.zobacz').bind("click touchstart", function() {
    slide_jump = glide2.current(); //get number of slide on slider1 to know to which slide should jump slider2

    setTimeout(function() {//redirecting must be after I get current slide on slider1
        var url = "http:***.html" + "?jump=" + slide_jump;//CHANGE HERE
        $(location).attr('href', url);
    }, 100);
});

NOTE: I don't know why you are using a timeout, is glide2.current(); an asynchronous operation? If not, the no need for timeout. If it is, better to use a callback.

PAGE 2 CODE:

$(window).load(function()
{
    var slide_jump = getQueryStringValue('jump');
    slider2.jump(slide_jump);
});

function getQueryStringValue(key) {  
    return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));  
}

NOTE: The getQueryStringValue function was taken from here.

Redirect page to another and then do something jQuery

3 Answers3