Question

I have an interactive UI of elements, and I was encouraged to use divs and spans exclusively, and avoid checkboxes. I have converted the site over to the same functionality, but don’t know much about persistence to begin with, but with checkboxes, it seemed approachable given the idea of being ‘checked’ or ‘not checked’. How would I begin to use this approach with tracking each element’s visibility?

Here is the page I am trying to implement persistence on.

Previous implementation (not my code, as I am new to JS and persistence) used the following:

// Persistence
//¿¿??
var formvals = {};
var keyval = location.search.replace('?', '').split('&');
$.each(keyval, function () {
    var splitval = this.split('=');
    formvals[splitval[0]] = splitval[1];
});

$.each($('form')[0].elements, function () {
    var key = $(this).attr('name');
    if (key && formvals[key]) {
        $('#' + key).val(formvals[key]);
    } else {
        if ($(this).attr('type') == 'checkbox') {
          $('#'+key)[0].checked = false;
        }
    }
});

I would like to know how to use the visibility of the elements to help develop different templates.

I can’t find any intros into URL persistence, and Im not quite sure what the previous code does, so any explanation or guidance is greatly appreciated.

If you need more information, please ask, and hopefully you can help send me down the right path.

Answer 1

If URL will be like http://site.com/page.html?id_block_to_click1=1&id_block_to_click2=1 it should work

$(function(){
    var formvals = {};
    var keyval = location.search.replace('?', '').split('&');

    $.each(keyval, function () {
        var splitval = this.split('=');
        formvals[splitval[0]] = splitval[1];
    });

    $.each(formvals, function(key,val){
        if (val == 1) {
            $('#'+key).click();
        }
    })
});