Reputation: 259
I have a below javascript function which updates the display values when I move the slider. However, now I am planning to update the values only on the button click. This is the javascript function.
.on("slider:ready slider:changed", function (event, data) {
var $output =$(this).nextAll(".output:first");
$output.html(data.value.toFixed(2));
masterData[$output.attr("id").replace(/output/,"")] = data.value;
$("#kwBody > tr").each(function() {
var $cells = $(this).children("td");
var found=false,count=0,currentCell;
for (var i=0;i<masterData.length;i++) {
currentCell=$cells.eq(i+1);
found = parseInt(currentCell.text(),10) >=masterData[i];
currentCell.toggleClass("found",found); //add or remove class to highlight
count+=found;
}
window.console && console.log(masterData,count);
$(this).toggle(count==masterData.length); // show if all cells >
});
});
});
I designed a button as below.
<button onclick="myFunction()">Display!</button>
I included the above javascript function inside myfunction(). However, the update is not happening on the button click. A working example can be found here.
EDIT:
<h2>Keyword Scores</h2>
<?php
$i = 0;
while (++$i <= $_SESSION['totalcolumns']-1) {
isset($_GET["slider$i"]) ? $rangevalue=$_GET["slider$i"] : $rangevalue="";
$range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];?>
<br><?php echo "Keyword" ?>
<?php echo $i ?>
<br><input type="text" data-slider="true" id="slider<?php echo $i; ?>" data-slider-range="<?php echo $range ?>" autocomplete="off" value="<?php echo $rangevalue; ?>" data-slider-step="1">
<meta http-equiv="refresh">
<?php } ?>
<script>
Upvotes: 0
Views: 3123
Reputation: 8568
Add an 'id' attribute to the button. Say it is 'myButton'. Now,
I'm assuming that the var masterData is global
Change the slider listener to
.on("slider:ready slider:changed", function (event, data) {
var $output =$(this).nextAll(".output:first");
$output.html(data.value.toFixed(2));
masterData[$output.attr("id").replace(/output/,"")] = data.value;
});
Create a click listener for the button
$("#myButton").click(function (){
$("#kwBody > tr").each(function() {
var $cells = $(this).children("td");
var found=false,count=0,currentCell;
for (var i=0;i<masterData.length;i++) {
currentCell=$cells.eq(i+1);
found = parseInt(currentCell.text(),10) >=masterData[i];
currentCell.toggleClass("found",found); //add or remove class to highlight
count+=found;
}
window.console && console.log(masterData,count);
$(this).toggle(count==masterData.length); // show if all cells >
});
});
Simulate button click on each page load.
$(document).ready(function(){
$("#myButton").click();
});
I haven't tried it, but hopefully, it works.
Upvotes: 1