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