vendredi 26 février 2016

Add D3 Element to persistent checkbox state after page refresh

I want to add D3 Element to already persistent checkboxes after page refresh. If i click into a checkbox a line should appear in my graph visualization and stay after the page refresh like the checkmarks.

Here is the code from the first part:

 <div>
  <label for="option1">150°C</label>
  <input onclick="150();" type="checkbox" id="option1">
</div>
<div>
  <label for="option2">125°C</label>
  <input onclick="125();" type="checkbox" id="option2">
</div>
<div>
  <label for="option3">85°C</label>
  <input onclick="85();" type="checkbox" id="option3">
</div>
  <div>
  <label for="option3">-40°C</label>
  <input onclick="40();" type="checkbox" id="option4">
</div>
  <div>
  <label for="option3">-60°C</label>
  <input onclick="60();" type="checkbox" id="option5">
</div>

the script part:

function handleButtonClick(button){
    if ($(button).text().match("Check all")){
      $(":checkbox").prop("checked", true)
    } else {
      $(":checkbox").prop("checked", false)
    };
    updateButtonStatus();
  }
  function updateButtonStatus(){
    var allChecked = $(":checkbox").length === $(":checkbox:checked").length;
    $("button").text(allChecked? "Uncheck all" : "Check all");
  }
  function updateCookie(){
    var elementValues = {};
    $(":checkbox").each(function(){
      elementValues[this.id] = this.checked;
    });
    elementValues["buttonText"] = $("button").text();
    $.cookie('elementValues', elementValues, { expires: 7, path: '/' })
  }
  function repopulateFormELements(){
    var elementValues = $.cookie('elementValues');
    if(elementValues){
      Object.keys(elementValues).forEach(function(element) {
        var checked = elementValues[element];
        $("#" + element).prop('checked', checked);
      });
      $("button").text(elementValues["buttonText"])
    }
  }
  $(":checkbox").on("change", function(){
    updateButtonStatus();
    updateCookie();
  });
  $("button").on("click", function() {
    handleButtonClick(this);
    updateCookie();
  });
  $.cookie.json = true;
  repopulateFormELements();

and i want to add to the checkboxes some persistent lines for my temperature graph like this one:

function 150(){ svg.append("svg:line") .attr("id", "HTS1") .attr("x1", 0) .attr("x2", width) .attr("y1", 112) .attr("y2", 112) .attr("stroke-width", 2) .attr("stroke", "brown"); }

I know i need JQuery cookie, but how to use them with functions. So my lines retain after a page refresh to like the checkboxes.

Can someone help me?




Aucun commentaire:

Enregistrer un commentaire