How to keep view changes after refresh page?

Question

In my MVC application i have a view in which i refresh the page each 10 seconds. I have some paragraph in the view are hidden and a button which make those paragraphs not hidden. The problem that when i click on the button to make the paragraph show when the page reload automatically in 10 seconds returns the paragraph hidden.

This is the button:

 <button id="button">Display Internal Sequences</button>

This is the paragraph :

<p1 hidden style="text-align:center;font-size: 50px; padding:-25px; margin:-25px;">@Html.Label(@Model.CSLine.ModuleOrderInternalSequence > long.MinValue ? @Model.CSLine.ModuleOrderInternalSequence.ToString() : string.Empty)</p1>

This is the script to make the p not hidden:

   <script>
         $(document).ready(function () {
         $("#button").click(function () {

             $("p1").attr("hidden", false);
              var show ='true';            
              localStorage.setItem(key, show);   

              });
          });
      </script>

This is the reload each 10 seconds:

setTimeout(function () {
    window.location.reload(1);
        }, 10000);
$(document).ready(function() {
    var show = localStorage.getItem(key);
    if (show == 'true') 
    {
        $("p1").attr("hidden", false);
    }           })

The result is that the paragraph returns hidden after each reload. I want when i click the button the paragraph became not hidden even after reload.

Thank you

Is it becase you’re reloading the page before getting the localStorage? So that part of the script never runs? — Zoe Edwards, Dec 05 '18 at 17:00
you should show on document ready, not in the timeout - just let the timeout do the reload and then once the page has loaded, the document ready will kick in so you can check your local storage then and then set the visibility at that point — Pete, Dec 05 '18 at 17:01

score 0 · Answer 1 · answered Dec 05 '18 at 17:07

0

if (show = 'true')

This is not a comparison, you are setting the value of "show" to "true". Use == to compare values.

answered Dec 05 '18 at 17:07

Enrico Dias

1,417
9
21

@AmiraAbdouli When an answer solves your problem, consider marking it as Accepted to indicate that the issue is resolved. – Smollet777 Dec 05 '18 at 17:15
@AmiraAbdouli Also make sure that the variable "key" has some value. – Enrico Dias Dec 05 '18 at 17:22

score 0 · Accepted Answer · answered Dec 05 '18 at 17:47

Try https://jsfiddle.net/hbmk7e2L/

Note: Your page will only reload after 10 seconds in this case and will only refresh once.

If you want the page to refresh every 10 seconds, you should use setInterval instead of setTimeout.

<script>
  $(document).ready(function() {
    // If you want the page to refresh constantly, you should use setInterval intead of setTimeout. setTimeout fires only once.
    setTimeout(function () {
        window.location.reload(1);
    }, 10000);

    $("#button").click(function() {
        $("p1").attr("hidden", false);
        localStorage.setItem("show_p1", true);
    });

    if (localStorage.getItem("show_p1") == 'true') {
        $("p1").attr("hidden", false);  
    }
  });
</script>


<p1 hidden style="text-align:center;font-size: 50px; padding:-25px; margin:-25px;">@Html.Label(@Model.CSLine.ModuleOrderInternalSequence > long.MinValue ? @Model.CSLine.ModuleOrderInternalSequence.ToString() : string.Empty)</p1>

<button id="button">Display Internal Sequences</button>

score -1 · Answer 3 · answered Dec 05 '18 at 17:39

Try using jQuery's prop() method instead of attr() like so:

$("p1").prop("hidden", false);

The jQuery documentation for prop() describes the difference between the two methods, especially for boolean attributes like hidden. Also, here is a post regarding this .prop() vs.attr()

How to keep view changes after refresh page?

3 Answers3