CODEWITHSUNDEEP
javascriptjquerydombrowser-history
Ronni DC
Ronni DC

Reputation: 117

jQuery Unwanted resetting of the DOM on history.back(-1)

I have this script below used on this site http://ronnidc.dk...

When a user checks e.g. [jan] a dot appears on the map below. And when the user clicks the dot, a teaser text containing a read more link to a subpage appears below the map. That’s all working as intended.

Problem 1: The problem is when the user returns to the frontpage via a (history-1) link. The checkboxes are then all cleared, the dots and teaser text is set back to base. Except in Firefox – it works perfectly in Firefox. I guess the problem has something to do with the DOM being reset in all other browsers than Firefox? (I want the checkbox selection, dots on the map, and the chosen teaser text to still visible when the user returns to the page with the map).

  How can I avoid this problem? With some kind of .live function? (deprecated from jQuery 1.7)

Problem 2: When a user checks [all] all checkboxes are checked as intended. But to make sense the checkbox [All]’s selection should disappear when one of the other checkboxes is unchecked. (The remaining checked boxes should stay checked)

  How can this be done?

/**functions.js**/ 

$(document).ready(function () {

/* =Filtering - (mark the map with dots)
----------------------------------------------- */
    $(function () {

        $('#filtering :checkbox.checkall').click(function () {
            $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
        });


            $("#filtering :checkbox").attr('checked', null); //uncheck checkboxes on page reload in Firefox
            $("#filtering :checkbox").click(function() {
                $("#pageTeaser article mark").hide();
                $("#filtering :checkbox:checked").each(function() {
                    $("." + $(this).val()).show();
                });
            });

    });



/* =Teaser Show - (Showing teaser text when clicking the dot's)
----------------------------------------------- */
    $('#pageTeaser article mark').click(function() {
        $('#pageTeaser article .inner').hide();
        $('#pageTeaser article .inner').removeClass('active');
        $(this).siblings('.inner').show();
        $(this).siblings('.inner').addClass('active');
    });

});

Upvotes: 1

Views: 392

Answers (1)

greut
greut

Reputation: 4363

You have to store that state (all you checkboxes status) somewhere: cookie, location.hash, url, … maybe history.js can be any help here.

Upvotes: 1

Related Questions