JavaScript/PHP Refresh Replace HTML Element Class

Question

I've got a templated element on my site which is created with PHP. It appears on many pages of my site. Within the template is a span with a class of hidden. When a button in the element is clicked, it removes the class of hidden from the span. It works great on the first page, but the problem is that once the class is removed from the span it pervades across all pages with that template. Is there a way to replace the hidden class when the page is refreshed?

This is a WordPress site, and I can provide any relevant code snippets. The javascript is quite simple, just a jQuery click trigger on the button which removes the hidden class, and the page mark-up is very straightforward.

Here are Gists with the PHP template part:

https://gist.github.com/weaverhe/7d8dec4a522a12478289 (this code is simply included in the appropriate template files with PHP)

And the javascript:

Relevant Snippet:

// Show the filter bar on button click

function showFilters() {
  $('#toggle-filters').on('click', function(e) {
    if($('div.filters').hasClass('hidden')) {
        e.preventDefault();
        $('div.filters').removeClass('hidden');
        $(this).removeClass('grey').text('Apply Filters');
        $('#remove-filters').removeClass('hidden');
        $('#chosen-tag-holder span.active').removeClass('hidden');
    }
    else {
        return true;
    }
  });
}

The #chosen-tag-holder selector which removes the hidden class is what should be resetting on the page reset.

Full Filter Bar JS: https://gist.github.com/weaverhe/05e05e45dbbcc9f10f47

The allFilters(); function is run on every page at document.ready

Answer 1

A refresh should be clearing the javascript changes, it sounds like your issue is elsewhere. Would need to see the javascript snippet to understand what you are doing.

Suggestion otherwise would be check you have cleared your browser cache and any wordpress caching is disabled dmwhile you are testing.

When you navigate between pages, is the parent window being reloaded? If you have multiple window objects it could be your issue.

Answer 2

If I understand you correctly, you want the hidden class to be permanently removed on all pages after a button in the element is clicked, regardless if the user refreshes the page or chooses another page on the site? There is no way to achieve this on the client side with Javascript, you need to modify your php code.

Depending on whether you want the hidden class to be removed in all future sessions or just this session for this particular user, you need to do one of the following things:

1) Removed in the remainder of the session. Set the $_SESSION superglobal and read its value for that user every time he refreshes/changes the page and echo the appropriate html accordingly.

See also:

http://php.net/manual/en/reserved.variables.session.php

Session lost after page redirect in php

2) Removed permanently for that particular user. Save a boolean (tinyInt) in your user database which is read before the template is applied indicating whether that user has (ever) clicked the button or not and then render the appropriate html.

In all circumstances, you need to modify your template something like this:

<?php
    "your condition" ? 
    echo <div class="hidden filters row overflow-visible"> :
    echo <div class="filters row overflow-visible">;
?>