Stay on the same slide after page refresh

JavaScript
1

Hi everyone!

I have a Javascript slide, Inside of it is a gridview. I want to stay on the same slide after the page refresh. Please help me. This is my code.

<div class = "callbacks_container">
<div class="rslides callbacks callbacks1" id="slider3">

<div class = "grid-slide">
<div class = "prg-dte">
<asp:Label ID="Label1" class = "srch-res" runat="server" ></asp:Label>
</div>

<div class = "table-grid">
<asp:GridView ID="GridView1" class = "grd-view table table-hover table-striped" OnRowDataBound="GridView1_RowDataBound"  OnSelectedIndexChanged="Gridview1_OnSelectedIndexChanged"  runat="server">
</asp:GridView>                                                
</div>

<div class = "grid-slide">
<div class = "prg-dte">
<asp:Label ID="Label2" class = "srch-res" runat="server" ></asp:Label>
</div>

<div class = "table-grid">
<asp:GridView ID="GridView2" class = "grd-view table table-hover table-striped" OnRowDataBound="GridView2_RowDataBound"  OnSelectedIndexChanged="Gridview2_OnSelectedIndexChanged"  runat="server">
</asp:GridView>                                                
</div>


</div>
</div>


  <script type="text/javascript">
        $(function () {
            $("#slider3").responsiveSlides({
                auto: false,
                pager: false,
                nav: true,
                speed: 500,
                namespace: "callbacks",
                before: function () {
                    $('.events').append("<li>before event fired.</li>");
                },
                after: function () {
                    $('.events').append("<li>after event fired.</li>");
                }
            });
        });
     </script>
2

Hi cristian_frias,

I would recommend using SessionStorage for this.
Create and update the key every time the user switches the slide.
Store the slide ID with a good key in your session storage.
When the user reloads the page check if there is something in the session storage with that key if so open the slide.

Note: Session Storage is only for that current session so when the user closes the page and comes back the site will have no session storage. If you want to load the last seen slide for the user no matter what I recommend using Local Storage.

sessionStorage: https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage
localStorage: https://developer.mozilla.org/en/docs/Web/API/Window/localStorage

Greetings,

KoenH

3

Hi @KoenH , Thank you for the suggestion. Is that okay to ask some simple example? Thank you.

4

Of course give me a moment.
I will post an example wen I have the time!:+1:

5

I’m not familiar with what you are working with.
So here is a example I use to load the same view after a refresh of a dynamic web page.

When ever the user loads a new view I call saveLastView(“somethingyouwanttostore”).
Once the user refreshes the page I always call restoreLastView() which retrieves the session storage item and if it’s not available I fall back on my default which is in this example “platform/dashboard”.

function saveLastView(url){
    sessionStorage.setItem("view", url);
}

function restoreLastView(){
    var view = sessionStorage.getItem("view") || 'platform/dashboard';
    $("[data-url='"+ view +"']").addClass('active');
    $(".content").load(view);
}

If you have any question please let me know!

6

Hi @KoenH, sorry but I cant make it work. If it is okay to you I will give you a complete sample of my codes. Thank you.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.