Question

In my app I have an imagemap split into several poly shapes. Each shape has a corresponding checkbox (sat in a form with a submit button) and together they allow the user to filter results shown depending on what area of the imagemap has been selected.

Im using the dumbFormState plugin to persist the checkboxes after the form is submitted and the page reloads but the selected shapes in the imagemap loses their highlighted state.

How can I make the shapes persist their ‘checked’ state like the checkboxes on page reload?

Here is my javascript:

<script>
  jQuery(function(){ // ensure dom is loaded first
    jQuery('#filter_form').dumbFormState();
  });  

  $(function() {
    $('.map').maphilight();  

    $('#north, #east, #south, #west').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        var data = $this.mouseout().data('maphilight') || {};
        data.alwaysOn = !data.alwaysOn;
        $this.data('maphilight', data).trigger('alwaysOn.maphilight');
    });
  });

  $(function() {
    $('area').click(function(){
      var name = $(this).data("areanum");
      var $checkbox = $('#' + name);
      $checkbox.attr('checked', !$checkbox.attr('checked'));
    });       
  });
</script>

index.html.erb

<div class="map_container">

  <%= image_tag("maps/mainmap.png", :width => "450", :height => "450", :class => "map", :usemap => "#mainmap", :alt => "") %>

  <map name="mainmap">
    <area id="north" data-areanum="area-42" shape="poly" 
      coords="158,43,152,49,164,86,165,112,153,153,139,169,145,171,161,176,236,201,241,202,251,166,253,142,257,132,294,102,269,85,240,68,227,53,213,28,202,27" alt="North"
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >

    <area id="east" data-areanum="area-44" shape="poly" 
      coords="296,103,258,133,254,143,252,166,242,203,263,209,272,204,322,226,340,250,360,241,356,230,357,222,378,214,395,195,394,188" alt=""
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >


    <area id="south" data-areanum="area-41" shape="poly" 
      coords="182,316,178,321,188,329,200,353,276,274,243,248" alt=""
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >


    <area id="west" data-areanum="area-48" shape="poly" 
      coords="286,276,276,275,200,354,218,390,323,341,325,321,321,312" alt=""
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >
  </map>              
</div>

<div class="filter_options_container">
  <%= form_tag '', :method => :get, :id => 'filter_form' do %>

    <fieldset class="filter_form_fieldset areas">
      <% Area.all.each do |a| %>
        <p class="area_check"><%= check_box_tag 'areas[]', a.id, false, :id => "area-#{a.id}" %>
        <label for="area-<%= a.id %>"><p1><%= a.name %></p1></label></p>
      <% end %>
    </fieldset>

    <div class="filter_form_button">
      <p2><input type="submit" value="Show me"/></p2>
    </div>
  <% end %>
</div>

Whats generated in the browser

<div class="map_container">

  <img alt="" class="map" height="450" src="/assets/maps/mainmap.png" usemap="#mainmap" width="450" />

  <map name="mainmap">
    <area id="north" data-areanum="area-42" shape="poly" 
      coords="158,43,152,49,164,86,165,112,153,153,139,169,145,171,161,176,236,201,241,202,251,166,253,142,257,132,294,102,269,85,240,68,227,53,213,28,202,27" alt="North"
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >

    <area id="east" data-areanum="area-44" shape="poly" 
      coords="296,103,258,133,254,143,252,166,242,203,263,209,272,204,322,226,340,250,360,241,356,230,357,222,378,214,395,195,394,188" alt=""
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >

    <area id="south" data-areanum="area-41" shape="poly" 
      coords="182,316,178,321,188,329,200,353,276,274,243,248" alt=""
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >


    <area id="west" data-areanum="area-48" shape="poly" 
      coords="286,276,276,275,200,354,218,390,323,341,325,321,321,312" alt=""
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >        
  </map>              
</div>

<div class="filter_options_container">
  <form accept-charset="UTF-8" action="" id="filter_form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>    

    <fieldset class="filter_form_fieldset areas">
        <p class="area_check"><input id="area-41" name="areas[]" type="checkbox" value="41" />
        <label for="area-41"><p1>south</p1></label></p>    
        <p class="area_check"><input id="area-42" name="areas[]" type="checkbox" value="42" />
        <label for="area-42"><p1>north</p1></label></p>
        <p class="area_check"><input id="area-44" name="areas[]" type="checkbox" value="44" />
        <label for="area-44"><p1>east</p1></label></p>
        <p class="area_check"><input id="area-48" name="areas[]" type="checkbox" value="48" />
        <label for="area-48"><p1>west</p1></label></p>

    </fieldset>

    <div class="filter_form_button">
      <p2><input type="submit" value="Show me"/></p2>
    </div>
</form></div>

If I’ve left anything out of my question please comment.

Thanks for any help its much appreciated!

Answer 1

You might want to serialize your data and save them to cookies or LocalStorage in window.onbeforeunload event.
In document.onload you should check stored data, if there are any, you apply then remove them.