Jquery Page Reload then Select Div

Question

I have several divs on that page that all contain forms. When a user clicks a div and submits the form, the page reloads. After that reload, I want to add a class to that specific div the user selected before the page reload to identify it after the page reload.

My question is, how do I persist the id of that specific div after the page reload?

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

<script>
    $(document).ready(function() {
        // What needs to go here...?
    });
</script>

Thanks!

you can use [localStorage or sessionStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) in decent browsers — n00dl3, Apr 04 '16 at 12:27
If you want to persist it only locally, you can think of `localStorage`, if you want to persist the state across multiple systems(based on current user) then you need to persist it in server side — Arun P Johny, Apr 04 '16 at 12:27
Possible duplicate of [Global Variable usage on page reload](http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload) — chazsolo, Apr 04 '16 at 12:28
Submit your forms via ajax, it will not reload and therefore solved your problem. Add css class to the div when ajax success. — a45b, Apr 04 '16 at 12:28
Thanks, I'll check out localStorage or just submit via AJAX. — Matt Pierce, Apr 04 '16 at 12:29

score 0 · Answer 1 · answered Apr 04 '16 at 12:36

You can use params in url.

<script>
    $(document).ready(function(){
            function getUrlVars() {
                var vars = [], hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for(var i = 0; i < hashes.length; i++)
                {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            }
    var myParam = = getUrlVars()['myparam'];
    if (myParam == 'first') {
         // do here whatever you want, you kwow the first div was clicked
    }


    $('#1').click(function(){
         window.location = 'index?myparam=first';
    })

    })
</script>

Hawkeye · Answer 2 · 2016-04-04T12:56:05.273

0

You can use localStorage or sessionStorage. I would personally use localStorage.

//inside document ready
$('#1').click(function() {
 localStorage.setItem("One", "clicked")
}
$('#2').click(function() {
 localStorage.setItem("Two", "clicked")
}
$('#3').click(function() {
  localStorage.setItem("Three", "clicked")
}
window.onload = get ()
function get () {
   var One = localStorage.getItem("One")
   var Two = localStorage.getItem("Two")
   var Three = localStorage.getItem("Three")
   //then if the var is equal to click, do what you want to it.
}

edited Apr 04 '16 at 12:56

answered Apr 04 '16 at 12:41

Hawkeye

377
1
3
14

I think OP was after saving the ID of the clicked div so to be able to add a class on page reload. – putvande Apr 04 '16 at 12:42
Ok, edited question. I don't know what OP wants to do if it was clicked. – Hawkeye Apr 04 '16 at 13:01

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

There are two ways to do this that come into my mind. The first one (if you absolutely have to reload the whole page): Add GET parameters to your form submit and then check them in your javascript.

http://example.com/submit.php?selected_div=div_id&other_selected_div=div_id

This post explains how to retrieve GET parameters in Javascript

But it would be much easier to use an AJAX call to submit a form and then modify your DOM after a successful call (or display an error message). This way you don't have to persist anything over a page reload.

You could do that using jQuery. It is described here in the official docs and in this tutorial.

score -1 · Answer 4 · answered Apr 04 '16 at 12:33

you need to save in any place the last selected div. You can use local-storage, cookies or similar. Also, you can send an additional parameter in the url when you refresh the site to know which div is selected because otherwise you cannot know the specific div.

Regards!

Jquery Page Reload then Select Div

4 Answers4