asked on

Jquery/javascript to select the simple slider range values

I am relatively new to scripting languages like PHP, javascript. This is what am trying to do. I have a huge CSV file. I am trying to display the CSV file in my web page in a paginated format. I am including a jquery simple slider to select the range values. Once the range values are selected, I need to display only those rows satisfying the given criteria. I am done with most part of the project with help from many online resources.

The working example of my project can be found at,

My work so far

Now, I have to update the web page based on the slider values that I selected. For this reason, I am having the SUBMIT button in my page. Once the submit button is clicked, I need to display the web page with the updated values from CSV file.

This is the code I have so far.

<!DOCTYPE html>
<html>
<!-- Include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/simple-slider.js"></script>
<?php include 'index.php'; ?>
<?php 
&#9;  $totalcolumns = $_SESSION["totalcolumns"];
?>

<!-- Include Simple Slider JavaScript and CSS -->
<link href="css/simple-slider.css" rel="stylesheet" type="text/css" />
<link href="css/simple-slider-volume.css" rel="stylesheet" type="text/css" /> 
<script src="css/simple-slider.js"></script>
<link href="css/simple-slider.css" rel="stylesheet" type="text/css" />

<!-- Activate Simple Slider on your input -->
  <h2>Keyword Scores</h2>
  <?php
 
$i = 1;
while (++$i <= $_SESSION['totalcolumns']) {
    $range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];?>
&#9;    <br><?php echo "Keyword" ?>
&#9;    <?php echo $i -1 ?>
&#9;&#9;<br><input type="text" data-slider="true" data-slider-range="<?php echo $range ?>" data-slider-step="1">
&#9;&#9;<?php } ?>
&#9;&#9;
 <a href="delete" id="delbtn">delete</a>
 <script>
      $(document).ready(function(){

                $('#delbtn').click(function(){
                         var val = $("[data-slider]").slider("option", "value");
                         return val;

                 });
      });
</script>

 <!--<input type="text" data-slider="true" data-slider-range="1,500" data-slider-step="1"> 

 <form action = "update.php" method="post"><input type="submit" name="submit"value="SUBMIT" ></form>

 
 <script>
    $("[data-slider]")
        .each(function () {
&#9;&#9; 
            var range;
            var input = $(this);
            $("<span>").addClass("output")
                .insertAfter(input);
            range = input.data("slider-range").split(",");
            $("<span>").addClass("range")
                .html(range[0])
                .insertBefore(input);
            $("<span>").addClass("range")
                .html(range[1])
                .insertAfter(input);
        })
        .bind("slider:ready slider:changed", function (event, data) {
            $(this).nextAll(".output:first")
                .html(data.value.toFixed(2));
        });
</script>

Open in new window

My index.php file to display the CSV content and find the min and max for the UI slider is as below.

<!DOCTYPE html>
<?php
require_once "Paginated.php";
require_once "DoubleBarLayout.php";
?>
<html>
<head>
<title>Skyline Query</title>

<!-- Just a little style formatting. Has no bearing on example -->
<style type="text/css">
&#9;body {
&#9;&#9;font-family: Verdana;
&#9;&#9;font-size: 13px;
&#9;}
&#9;
&#9;a {
&#9;&#9;text-decoration: none;
&#9;}
&#9;
&#9;a:hover {
&#9;&#9;text-decoration: underline;
&#9;}
</style>
<!-- End style formatting -->
</head>

<body>
<?php
$names = file('demo.csv');
$page = $_GET['page'];

//constructor takes three parameters
//1. array to be paged
//2. number of results per page (optional parameter. Default is 10)
//3. the current page (optional parameter. Default  is 1)
$pagedResults = new Paginated($names, 20, $page);
$handle = fopen('demo.csv', 'r');
  if (($data = fgetcsv($handle, 1000, ',')) !== FALSE)
    {
    }
&#9; 
echo "<table border='3' bgcolor='#dceba9' style='float:center; margin:50'>";
echo '<tr><th>'.implode('</th><th>', $data).'</th></tr>';
//when $row is false loop terminates
while ( $row = $pagedResults->fetchPagedRow())
{
    echo "<tr><td>";
&#9;//echo '<tr><th>'.implode('</th><th>', $data).'</th></tr>';
    $row1 = str_replace( ',', "</td><td>", $row );
    echo $row1;
    echo "</td></tr>";
}
fclose($handle);
echo "</table>";

//important to set the strategy to be used before a call to fetchPagedNavigation
$pagedResults->setLayout(new DoubleBarLayout());
echo $pagedResults->fetchPagedNavigation();
//$data1 = [];
$total_columns = 0;
$handle1 = fopen('demo.csv', 'r');
while (false !== ($row = fgetcsv($handle1, 1000, ','))) {
    0 === $total_columns and $total_columns = count($row);
    $i = 1;
    while (++$i <= $total_columns) {
&#9;     $data1[$i][] = (int) $row[$i - 1];
&#9; }
}

$i = 0;
while (++$i <= $total_columns) {
    $_SESSION["min-column-$i"] = min($data1[$i]);
    $_SESSION["max-column-$i"] = max($data1[$i]);
}

$_SESSION['totalcolumns'] = $total_columns;
fclose($handle1);
?>

Open in new window

I have no clue on how to proceed with the jquery/javascript or PHP. I am absolutely new to these technologies and any help in the right directions is highly appreciated.

Thanks!

Michel Plungjan

I suggest you make a PHP file that returns the values in JSON format.
Then when slider is changed, you wait a second to make sure they mean it, and then ajax the contents in depending on the slider value. That way you o not need a submit and the page will not update, only the data.

I also STRONGLY suggest you change your alert to

window.console && console.log(string)

Michel Plungjan

So the table would be returned as

header("content-type:application/json");

and look like

["aiD":1234,"kw1":1,"kw2":2,"kw3":3},
"aiD":5678,"kw1":4,"kw2":5,"kw3":6},
"aiD":1234,"kw1":2,"kw2":3,"kw3":4},
"aiD":1234,"kw1":6,"kw2":7,"kw3":8},
"aiD":5678,"kw1":10,"kw2":11,"kw3":12},
"aiD":1234,"kw1":2,"kw2":3,"kw3":4},
"aiD":1234,"kw1":6,"kw2":7,"kw3":8},
"aiD":5678,"kw1":10,"kw2":11,"kw3":12},
"aiD":1234,"kw1":2,"kw2":3,"kw3":4},
"aiD":1234,"kw1":6,"kw2":7,"kw3":8},
"aiD":5678,"kw1":10,"kw2":11,"kw3":12},
"aiD":1234,"kw1":2,"kw2":3,"kw3":4},
"aiD":1234,"kw1":6,"kw2":7,"kw3":8},
"aiD":5678,"kw1":10,"kw2":11,"kw3":12},
"aiD":1234,"kw1":2,"kw2":3,"kw3":4},
"aiD":1234,"kw1":6,"kw2":7,"kw3":8},
"aiD":5678,"kw1":10,"kw2":11,"kw3":12},
"aiD":1234,"kw1":2,"kw2":3,"kw3":4},
"aiD":1234,"kw1":6,"kw2":7,"kw3":8}]