I am displaying the CSV data in a paginated format. Based on the number of columns in my CSV file, I have those many sliders to choose the range. The code to display the initial CSV file and the dynamic generation of sliders based on the number of CSV columns is as below.
<!DOCTYPE html>
<html>
<div id = "myDiv">
<!-- 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
$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"];?>
<br><?php echo "Keyword" ?>
<?php echo $i -1 ?>
<br><input type="text" data-slider="true" data-slider-range="<?php echo $range ?>" data-slider-step="1">
<?php } ?>
<button type="button" >Update</button>
<script>
var masterdata;
$("[data-slider]")
.each(function () {
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));
masterdata = data.value;
});
</script>
<script>
function loadXMLDoc()
{
$.ajax({
type: "POST",
url: "update.php",
data: { value : masterdata },
success: function(data)
{
alert(data);
}
});
}
$("button").on('click',function(){ loadXMLDoc(); });
</script>
</div>
</html>
The working example of the above code is here. However, after selecting the slider ranges, I need to display only those values matching the criteria. For this I am using the ajax to pass it to another PHP file. However, I am able to pass only one variable rather than the array of values. I am very new to the web development and have no idea of ajax or json encoding. Can someone give me an idea of what should I do next so that I can update the display of my CSV file?
htmltags and a lot of HTML/JavaScript in a no man's land afterbody. Also your inputs are not in a form. Putting them in a form would make it much easier to work with them via jQuery. Basically you have to start smaller and take it one step at a time. – Sébastien Oct 12 '13 at 20:11