Update url without reloading depending on the checkbox(es) selected using jquery/javascript

Question

This is a 2 part question:

I have 2 sections with checkboxes.

1. I need to update the url depending on the checkbox(es) selected
2. I need to share the updated url which opens up with the specific checkbox(es) selected when page loads

I have made a jsfiddle with the html code in it: https://jsfiddle.net/yh2ugbj8/5/

<h3>Filter recepies:</h3>

<div>
<p>Select vegetables</p>
<label><input type="checkbox" id="cbox1" value="potato"> Potato</label><br>
<label><input type="checkbox" id="cbox2" value="onion"> Onion</label><br>
<label><input type="checkbox" id="cbox3" value="tomato"> Tomato</label><br>
</div>

<div>
<p>Select seasoning</p>
<label><input type="checkbox" id="cbox1" value="salt"> Salt</label><br>
<label><input type="checkbox" id="cbox2" value="pepper"> Pepper</label><br>
<label><input type="checkbox" id="cbox3" value="chilli"> Chilli Flakes</label><br>
</div>

Answer 1

I'd recommend using location.hash so you can add the extra information to the url without navigating away from the page. This info can also be given in a link so you can check the selected elements when you first navigate to the page...

HTML

<h3>Filter recepies:</h3>

<div>
<p>Select vegetables</p>
<label><input type="checkbox" class="vegetables" value="potato"> Potato</label><br>
<label><input type="checkbox" class="vegetables" value="onion"> Onion</label><br>
<label><input type="checkbox" class="vegetables" value="tomato"> Tomato</label><br>
</div>

<div>
<p>Select seasoning</p>
<label><input type="checkbox" class="seasoning" value="salt"> Salt</label><br>
<label><input type="checkbox" class="seasoning" value="pepper"> Pepper</label><br>
<label><input type="checkbox" class="seasoning" value="chilli"> Chilli Flakes</label><br>
</div>

Javascript

$(function() {

    $(".vegetables, .seasoning").on("change", function() {
        var hash = $(".vegetables:checked, .seasoning:checked").map(function() {
            return this.value;
        }).toArray();
        hash = hash.join("|");
        location.hash = hash;
        alert(hash);
    });

    if (location.hash !== "") {
        var hash = location.hash.substr(1).split("|");
        hash.forEach(function(value) {
            $("input[value=" + value + "]").prop("checked", true);
        });
    }
});

Here's an updated fiddle where the page url has the values added to the hash...

https://jsfiddle.net/yh2ugbj8/6/

As you can see I added a line at the top of the script to mimic visiting the page with the hash value appended to it.

I also removed the IDs and added classes to the checkboxes, just for the sake of not making ugly jQuery selectors.

Note: I added the alert to show the location because you won't see the fiddle example changing the url, due to the fact that the 4 panels are all iframes.

Answer 2

You can use history.js , which enables you to change url without postback in modern browsers, using History api. You can take deeper look at the api, however the most important point you should keep in mind that, pushstate and replacestate behaves differently. Example script can be;

 $('[type="checkbox"]').on('change', function(){ var checkedVals = $(':checked').map(function(){ return $(this).val(); }).get().join(); alert(checkedVals); //for debugging purposes History.pushState(null, null, "?state=" + checkedVals); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3>Filter recepies:</h3> <div> <p>Select vegetables</p> <label><input type="checkbox" id="cbox1" value="potato"> Potato</label><br> <label><input type="checkbox" id="cbox2" value="onion"> Onion</label><br> <label><input type="checkbox" id="cbox3" value="tomato"> Tomato</label><br> </div> <div> <p>Select seasoning</p> <label><input type="checkbox" id="cbox1" value="salt"> Salt</label><br> <label><input type="checkbox" id="cbox2" value="pepper"> Pepper</label><br> <label><input type="checkbox" id="cbox3" value="chilli"> Chilli Flakes</label><br> </div>

Answer 3

This can be accomplished in a couple ways, but with the requirement with no page reloading HTML5 history would be your best bet.

1) As suggested in the comments create a router with dynamic segments. Here are a couple good routing libraries:

• https://visionmedia.github.io/page.js/
• http://backbonejs.org/#Router
• (there are way more if you google)

2) On initial pageload ensure the ui elements are selected correctly corresponding to the dynamic segments in your current route. Or have your server load with the correct ui elements on render. You said using jquery so I'm assuming this is done all client side.

3) Have listeners for the checkboxes, use your routing library to update the url on select and deselect.

• Example: https://api.jquery.com/change/

4) Like most things on the web there's no one "right" way of doing things. This could be accomplished using query strings or dynamic segments. It's up to you to implement they way you feel most comfortable shipping this out in the amount of time your given and your teams experience.