ram esh
ram esh

Reputation: 259

Javascript button click on slider change event

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

Answers (1)

Anudeep Bulla
Anudeep Bulla

Reputation: 8568

Add an 'id' attribute to the button. Say it is 'myButton'. Now,

  1. I'm assuming that the var masterData is global

  2. 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;   
     });
    
  3. 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 >
    
        });
    });
    
  4. Simulate button click on each page load.

     $(document).ready(function(){
       $("#myButton").click();
     });
    

I haven't tried it, but hopefully, it works.

Upvotes: 1

Related Questions