Start Free Trial

asked on

PHP/Javascript slider resets if I navigate to second page

I am new to scripting languages. I am working on a demo project and I am stuck right now. I need some help in proceeding further. Let me brief the work that am doing.

1.

I have a CSV file from another source. I am displaying the CSV file in a paginated format. (This part is done).

2.

Based on the number of columns in my CSV file, I need to have those many UI range sliders. (Like the amazon price selection range slider). (This part is done).

3.

If I select a value in the slider, only the CSV rows satisfying the criteria of my slider should be displayed.
However, in the 3rd step, I have couple of problems.

The CSV rows are displayed only for the particular page that am in. For example, if am in first page and selecting some slider range values, only the rows in the first page are considered. The remaining page rows are not considered.

If I navigate to the second page, the slider gets reset and I have to select the UI range slider values again.

I have a demo on Monday and it would be really helpful if someone can help me with the enhancement of the third step.

This is the link to my work so far. If you probably reset the sliders, you can understand the problem that am talking about.

I was suggested, if I use JSON or angular JS, I will be able to achieve what am trying to do. But I tried them with no luck. Since am completely new to scripting and web programming, I am stuck at this point. Can some one please guide me in the right direction?
Latest.zip

Don't really have time now but I have some logic.
On clicking your paging links capture the click with jquery. Grab the values of the individual sliders and then append these values to the link url and do a location.href to the url

Where did you get the slider code from? You would need to know how to grab the slider state

ASKER

Thanks for commenting out. The index.php file makes the CSV file to be displayed in the paginated format. The slider.php file is to have as many sliders based on the number of the columns in the CSV file. I am not sure on how to grab the slider state as you had mentioned. Also, I am not sure on how to grab the values of the individual sliders.

Where did you get the code from?

ASKER

Oh you mean the slider code? The slider code is from this link. I have modified their code to create an array of UI sliders based on the number of CSV columns.

Give each of your inputs an ID e.g. slider1, slider2 etc

Then add this into your scripts and see what it alerts.

$("a").click(function(e){
e.preventDefault();
$passdata="";
$passdata+="&slide1="+$("#slider1").val();
$passdata+="&slide2="+$("#slider2").val();
$passdata+="&slide3="+$("#slider3").val();
$passdata+="&slide4="+$("#slider4").val();
$passdata+="&slide5="+$("#slider5").val();
alert($(this).attr("href")+"?"+$passdata);
})

Open in new window

ASKER

If I click on 2nd or 3rd page link, I am getting values as undefined for all the sliders.

Did you amend all these inputs so they have an ID

<br>Keyword	    1		<br><input type="text" data-slider="true" data-slider-range="0,100" data-slider-step="1">
<br>Keyword	    2		<br><input type="text" data-slider="true" data-slider-range="0,49" data-slider-step="1">
<br>Keyword	    3		<br><input type="text" data-slider="true" data-slider-range="0,99" data-slider-step="1">
<br>Keyword	    4		<br><input type="text" data-slider="true" data-slider-range="0,59" data-slider-step="1">
<br>Keyword	    5		<br><input type="text" data-slider="true" data-slider-range="0,89" data-slider-step="1">

Open in new window

ASKER

Thanks again for commenting out. If you see my part of the program which deals with this, I have a While loop which automatically generates the UI sliders. This is the loop.

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 } ?>

Open in new window

Do you want me to make changes inside the while loop and try the above code sample that you had provided?

Yes change it to

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" id="slide<?$i?>" data-slider-range="<?php echo $range ?>" data-slider-step="1">
		<?php } ?>

Open in new window

(I cannot see your code, only the html)

Made a typo

change
id="slide<?$i?>"

to
id="slide<?php echo $i; ?>"

ASKER

I have made the changes as you had suggested. But am still seeing the values as undefined. This is the code after making the changes that you had suggested, for your reference.

<!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 
	  $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" /> 

<!-- 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" id="slide<?$i?>" data-slider-range="<?php echo $range ?>" data-slider-step="1">
		<?php } ?> 


<head>
<script>
$("a").click(function(e){
e.preventDefault();
$passdata="";
$passdata+="&slide1="+$("#slider1").val();
$passdata+="&slide2="+$("#slider2").val();
$passdata+="&slide3="+$("#slider3").val();
$passdata+="&slide4="+$("#slider4").val();
$passdata+="&slide5="+$("#slider5").val();
alert($(this).attr("href")+"?"+$passdata);
})
</script>

<script>
var masterData=[];  

$(function() {

    $("button").on('click',function(){ loadXMLDoc(); });
    $("[data-slider]")
       .each(function (index) {
           var range;
            var input = $(this);

            $("<span>").addClass("output").attr("id","output"+index)
                .insertAfter(input);
            range = input.data("slider-range").split(",");
            $("<span>").addClass("range")
                .html(range[0])
                .insertBefore(input);
            $("<span>").addClass("range")
                .html(range[1])
                .insertAfter(input);
        })
	
        .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 >

            });
        });
});
</script>



</head>
	
</html>

Open in new window

See comment above

ASKER

After changing to id="slide<?php echo $i; ?>"

I am still seeing the values as undefined only. I am not able to navigate to the subsequent pages. You can find it here.

Change it to

id="slide<?php echo $i-1; ?>"

Your counter is a bit weird.

ASKER

I still have no luck. I am still seeing the values as undefined only.

Sorry change it to this

id="slider<?php echo $i-1; ?>"

ASKER

Thanks for suggesting the change. I am able to see the correct slider values now. How can I make it available in the subsequent pages?

For example, if I go to the second page or third page, the slider values should be set to the values that I had selected in the first page and so on. Also, only those values satisfying the sliders need to be displayed in the second page and third page.

Change the last line of the javascript function from

alert($(this).attr("href")+"?"+$passdata);

to

location.href=$(this).attr("href")+$passdata;

Change your PHP function to this

while (++$i <= $_SESSION['totalcolumns']) {
isset($_GET['slider'.$i-1] ? $range=$_GET['slider'.$i-1] : $range=$_SESSION["min-column-$i"];
    $range = $range . ',' . $_SESSION["max-column-$i"];?>
	    <br><?php echo "Keyword" ?>
	    <?php echo $i -1 ?>
		<br><input type="text" data-slider="true" id="slide<?php echo $i-1; ?>" data-slider-range="<?php echo $range ?>" autocomplete="off" data-slider-step="1">
		<?php } ?>

Open in new window

I have made some edits to the above

ASKER

I made both the suggested changes. However, I am not able to see any output at all now. As I don't have PHP debugger, I am not sure what the error is.

while (++$i <= $_SESSION['totalcolumns']) {
isset($_GET['slider'.$i-1]) ? $range=$_GET['slider'.$i-1] : $range=$_SESSION["min-column-$i"];
    $range = $range . ',' . $_SESSION["max-column-$i"];?>
	    <br><?php echo "Keyword" ?>
	    <?php echo $i -1 ?>
		<br><input type="text" data-slider="true" id="slide<?php echo $i-1; ?>" data-slider-range="<?php echo $range ?>" autocomplete="off" data-slider-step="1">
		<?php } ?>

Open in new window

ASKER

The pages come up fine now but the values are again set as undefined. When I navigate to the subsequent pages, the sliders gets reset. If I check the link, the link looks like below.

http://omega.uta.edu/~rxv1100/slider.php?page=2&slide1=undefined&slide2=undefined&slide3=undefined&slide4=undefined&slide5=undefined

Damn it copied old code

while (++$i <= $_SESSION['totalcolumns']) {
isset($_GET['slider'.$i-1]) ? $range=$_GET['slider'.$i-1] : $range=$_SESSION["min-column-$i"];
    $range = $range . ',' . $_SESSION["max-column-$i"];?>
	    <br><?php echo "Keyword" ?>
	    <?php echo $i -1 ?>
		<br><input type="text" data-slider="true" id="slider<?php echo $i-1; ?>" data-slider-range="<?php echo $range ?>" autocomplete="off" data-slider-step="1">
		<?php } ?>

Open in new window

ASKER

Thanks again! Yeah, the values are getting passed correctly. But the sliders positions are not set in the sliders and the values are not updated. Also, it works for the navigation for one page. That is, if I navigate from 1st to 2nd page, the slider values are passed along but if I navigate from the 2nd to 3rd page, again the slider values are reset.

Change the js function to this

$("a").click(function(e){
	e.preventDefault();
	$passdata="";
	$passdata+="&slider1="+$("#slider1").val();
	$passdata+="&slider2="+$("#slider2").val();
	$passdata+="&slider3="+$("#slider3").val();
	$passdata+="&slider4="+$("#slider4").val();
	$passdata+="&slider5="+$("#slider5").val();
	location.href=$(this).attr("href")+$passdata;
})

Open in new window

ASKER

I have changed the code, like you had suggested. I am not able to see the UI range being set and only those values getting highlighted in those pages.

while (++$i <= $_SESSION['totalcolumns']) {
isset($_GET['slider'.$i-1]) ? $rangevalue=$_GET['slider'.$i-1] : $rangevalue="";
    $range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];?>
	    <br><?php echo "Keyword" ?>
	    <?php echo $i -1 ?>
		<br><input type="text" data-slider="true" id="slider<?php echo $i-1; ?>" data-slider-range="<?php echo $range ?>" autocomplete="off" value="<?php echo $rangevalue; ?>" data-slider-step="1">
		<?php } ?>

Open in new window

ASKER

Thanks again for commenting out. I still seem to have the same problem. The slider is not set to the desired value and the display is also not updated.

After
isset($_GET['slider'.$i-1]) ? $rangevalue=$_GET['slider'.$i-1] : $rangevalue="";

can you add

if(isset($_GET['slider'.$i-1])){echo "slider ".$i-1 ." found";}
echo $rangevalue;

I'm not seeing the values being set in the inputs.

And can you post the php function as you have it now.

ASKER

I am still not seeing the slider set and the updated display. 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 
	  $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" /> 

<!-- Activate Simple Slider on your input -->
  <h2>Keyword Scores</h2>
  <?php
 
$i = 1;

while (++$i <= $_SESSION['totalcolumns']) {
isset($_GET['slider'.$i-1]) ? $rangevalue=$_GET['slider'.$i-1] : $rangevalue="";
if(isset($_GET['slider'.$i-1])){echo "slider ".$i-1 ." found";}
echo $rangevalue;
    $range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];?>
	    <br><?php echo "Keyword" ?>
	    <?php echo $i -1 ?>
		<br><input type="text" data-slider="true" id="slider<?php echo $i-1; ?>" data-slider-range="<?php echo $range ?>" autocomplete="off" value="<?php echo $rangevalue; ?>" data-slider-step="1">
		<?php } ?>  


<head>
<script>
$("a").click(function(e){
	e.preventDefault();
	$passdata="";
	$passdata+="&slider1="+$("#slider1").val();
	$passdata+="&slider2="+$("#slider2").val();
	$passdata+="&slider3="+$("#slider3").val();
	$passdata+="&slider4="+$("#slider4").val();
	$passdata+="&slider5="+$("#slider5").val();
	location.href=$(this).attr("href")+$passdata;
})
</script>

<script>
var masterData=[];  

$(function() {

    $("button").on('click',function(){ loadXMLDoc(); });
    $("[data-slider]")
       .each(function (index) {
           var range;
            var input = $(this);

            $("<span>").addClass("output").attr("id","output"+index)
                .insertAfter(input);
            range = input.data("slider-range").split(",");
            $("<span>").addClass("range")
                .html(range[0])
                .insertBefore(input);
            $("<span>").addClass("range")
                .html(range[1])
                .insertAfter(input);
        })
	
        .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 >

            });
        });
});
</script>



</head>
	
</html>

Open in new window

Please let me know if you need more information.

Doesn't make sense, add the bolded part

if(isset($_GET['slider'.$i-1])){echo "slider ".$i-1 ." found";}
echo $rangevalue;
var_dump($_GET);

Are you doing anything with the $_GET vars, since I cannot see where you are accessing the page var - in index.php maybe?
Since it seems something is clearing them.

ASKER

I made the changes as you had suggested. I am seeing a dump of array values but the slider is not set and the values are not displayed correctly in the subsequent pages.

I attached the files that am using actually. Anyways, here is Index.php file for your reference.

<!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">
	body {
		font-family: Verdana;
		font-size: 13px;
	}
	
	a {
		text-decoration: none;
	}
	
	a:hover {
		text-decoration: underline;
	}
</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)
    {
    }
	 
echo "<table id='kwTable' border='4' bgcolor='#adb214' style='float:center; margin:100'>";
echo '<tr><th>'.implode('</th><th>', $data).'</th></tr>';
?>
<tbody id="kwBody">
<?php
//when $row is false loop terminates
$header = true;
if (!$page) $page = 1;
while ( $row = $pagedResults->fetchPagedRow())
{
    if ($page == 1 && $header) 
	{
        $header = false;
        continue;  // Skip this header row
    }
    echo "<tr><td>";
	//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) {
	     $data1[$i][] = (int) $row[$i - 1];
	 }
}

$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);
?>


</body>
</html>

Open in new window

Hmmm why are you including a page with a full HTML structure. This could/maybe screwing it up. Don't see how but it's the only thing I can think of at the moment.

ASKER

I want the paginated structure to be available. That's the reason, I am facing some difficulties. Is there anyway I can accomplish the task that am trying to do? I am completely unaware of these technologies and all the code I got from online and merged to suit my requirement.

I've reformatted your page correctly, try this - hopefully I didn't miss anything out.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/simple-slider.js"></script>
<style type="text/css">
	body {
		font-family: Verdana;
		font-size: 13px;
	}
	
	a {
		text-decoration: none;
	}
	
	a:hover {
		text-decoration: underline;
	}
</style>
<link href="css/simple-slider.css" rel="stylesheet" type="text/css" />
<link href="css/simple-slider-volume.css" rel="stylesheet" type="text/css" /> 
</head>
<body>
<?php 
require_once "Paginated.php";
require_once "DoubleBarLayout.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)
    {
    }
	 
echo "<table id='kwTable' border='4' bgcolor='#adb214' style='float:center; margin:100'>";
echo '<tr><th>'.implode('</th><th>', $data).'</th></tr>';
?>
<tbody id="kwBody">
<?php
//when $row is false loop terminates
$header = true;
if (!$page) $page = 1;
while ( $row = $pagedResults->fetchPagedRow())
{
    if ($page == 1 && $header) 
	{
        $header = false;
        continue;  // Skip this header row
    }
    echo "<tr><td>";
	//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) {
	     $data1[$i][] = (int) $row[$i - 1];
	 }
}

$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);
?>



<?php 
	  $totalcolumns = $_SESSION["totalcolumns"];
?>



<!-- Activate Simple Slider on your input -->
  <h2>Keyword Scores</h2>
  <?php
 
$i = 1;

while (++$i <= $_SESSION['totalcolumns']) {
isset($_GET['slider'.$i-1]) ? $rangevalue=$_GET['slider'.$i-1] : $rangevalue="";
if(isset($_GET['slider'.$i-1])){echo "slider ".$i-1 ." found";}
echo $rangevalue;
    $range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];?>
	    <br><?php echo "Keyword" ?>
	    <?php echo $i -1 ?>
		<br><input type="text" data-slider="true" id="slider<?php echo $i-1; ?>" data-slider-range="<?php echo $range ?>" autocomplete="off" value="<?php echo $rangevalue; ?>" data-slider-step="1">
		<?php } ?>  



<script>
$("a").click(function(e){
	e.preventDefault();
	$passdata="";
	$passdata+="&slider1="+$("#slider1").val();
	$passdata+="&slider2="+$("#slider2").val();
	$passdata+="&slider3="+$("#slider3").val();
	$passdata+="&slider4="+$("#slider4").val();
	$passdata+="&slider5="+$("#slider5").val();
	location.href=$(this).attr("href")+$passdata;
})
</script>

<script>
var masterData=[];  

$(function() {

    $("button").on('click',function(){ loadXMLDoc(); });
    $("[data-slider]")
       .each(function (index) {
           var range;
            var input = $(this);

            $("<span>").addClass("output").attr("id","output"+index)
                .insertAfter(input);
            range = input.data("slider-range").split(",");
            $("<span>").addClass("range")
                .html(range[0])
                .insertBefore(input);
            $("<span>").addClass("range")
                .html(range[1])
                .insertAfter(input);
        })
	
        .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 >

            });
        });
});
</script>

</body>

</html>

Open in new window

ASKER

Thanks for commenting out again. I see that there is just a single file now. I copied the above code to my index.php file. I still have the same problem as I was having earlier.

Not index.php, to slider.php

ASKER

Yeah, I tried that too. But still no luck. It does not change the slider nor the display of the values. You can find it here.

Replace

$i = 1;

while (++$i <= $_SESSION['totalcolumns']) {
isset($_GET['slider'.$i-1]) ? $rangevalue=$_GET['slider'.$i-1] : $rangevalue="";
if(isset($_GET['slider'.$i-1])){echo "slider ".$i-1 ." found";}
echo $rangevalue;
    $range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];?>
	    <br><?php echo "Keyword" ?>
	    <?php echo $i -1 ?>
		<br><input type="text" data-slider="true" id="slider<?php echo $i-1; ?>" data-slider-range="<?php echo $range ?>" autocomplete="off" value="<?php echo $rangevalue; ?>" data-slider-step="1">
		<?php } ?>

Open in new window

with

$i = 0;
while (++$i <= $_SESSION['totalcolumns']) {
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">
		<?php } ?>

Open in new window

ASKER

The sliders remain the same in all the pages. However, even if I move the slider to change a single value, none of the values are displayed. You can check it out here

Add the bolded

isset($_GET["slider$i"]) ? $rangevalue=$_GET["slider$i"] : $rangevalue="";
echo $_GET["slider$i"];
echo $_GET["slider1"];

ASKER

I have added those 2 lines in my code. You can find the updated code here

But we are getting the sliders at the right values - yes?

ASKER

yeah, we are getting the sliders at the right values. However, the values are not set according to the slider values in the subsequent pages. Also, we have an extra slider present.

Remove those echoes now.
Change
while (++$i <= $_SESSION['totalcolumns']) {
to
while (++$i <= $_SESSION['totalcolumns']-1) {

When I go to another page the sliders stay at the same positions.

ASKER

Thanks once again for commenting out. I have made the suggested changes. The sliders remain in the same position as expected. (Though, we have a problem with first slider alone. If we navigate to the subsequent pages, the first slider gets reset).

Also,the values are not getting updated. I mean, if I change the slider slightly also, all the values disappear. The dynamic update of the values is not happening.

Can you attach your code again, to be sure we are on the same page.
Something is a bit screwy with the first slider.

ASKER

Sure. This is the code.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/simple-slider.js"></script>
<style type="text/css">
	body {
		font-family: Verdana;
		font-size: 13px;
	}
	
	a {
		text-decoration: none;
	}
	
	a:hover {
		text-decoration: underline;
	}
</style>
<link href="css/simple-slider.css" rel="stylesheet" type="text/css" />
<link href="css/simple-slider-volume.css" rel="stylesheet" type="text/css" /> 
</head>
<body>
<?php 
require_once "Paginated.php";
require_once "DoubleBarLayout.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)
    {
    }
	 
echo "<table id='kwTable' border='4' bgcolor='#adb214' style='float:center; margin:100'>";
echo '<tr><th>'.implode('</th><th>', $data).'</th></tr>';
?>
<tbody id="kwBody">
<?php
//when $row is false loop terminates
$header = true;
if (!$page) $page = 1;
while ( $row = $pagedResults->fetchPagedRow())
{
    if ($page == 1 && $header) 
	{
        $header = false;
        continue;  // Skip this header row
    }
    echo "<tr><td>";
	//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) {
	     $data1[$i][] = (int) $row[$i - 1];
	 }
}

$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);
?>



<?php 
	  $totalcolumns = $_SESSION["totalcolumns"];
?>



<!-- Activate Simple Slider on your input -->
  <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">
		<?php } ?>  



<script>
$("a").click(function(e){
	e.preventDefault();
	$passdata="";
	$passdata+="&slider1="+$("#slider1").val();
	$passdata+="&slider2="+$("#slider2").val();
	$passdata+="&slider3="+$("#slider3").val();
	$passdata+="&slider4="+$("#slider4").val();
	$passdata+="&slider5="+$("#slider5").val();
	location.href=$(this).attr("href")+$passdata;
})
</script>

<script>
var masterData=[];  

$(function() {

    $("button").on('click',function(){ loadXMLDoc(); });
    $("[data-slider]")
       .each(function (index) {
           var range;
            var input = $(this);

            $("<span>").addClass("output").attr("id","output"+index)
                .insertAfter(input);
            range = input.data("slider-range").split(",");
            $("<span>").addClass("range")
                .html(range[0])
                .insertBefore(input);
            $("<span>").addClass("range")
                .html(range[1])
                .insertAfter(input);
        })
	
        .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 >

            });
        });
});
</script>

</body>

</html>

Open in new window

Change

$i = 0;
while (++$i <= $_SESSION['totalcolumns']-1) {
isset($_GET["slider$i"]) ? $rangevalue=$_GET["slider$i"] : $rangevalue="0";
    $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">
		<?php } ?>

Open in new window

to

$i = 1;

while (++$i <= $_SESSION['totalcolumns']) {
isset($_GET['slider'. $i - 1]) ? $rangevalue=$_GET['slider'. $i - 1] : $rangevalue="";


    $range = $_SESSION["min-column-$i"] . ',' . $_SESSION["max-column-$i"];?>
	    <br><?php echo "Keyword" ?>
	    <?php echo $i -1 ?>
		<br><input type="text" data-slider="true" id="slider<?php echo $i-1; ?>" data-slider-range="<?php echo $range ?>" autocomplete="off" value="<?php echo $rangevalue; ?>" data-slider-step="1">
		<?php } ?>

Open in new window

ASKER

I made the suggested changes in my code. It is resetting the sliders if I go to subsequent pages and the dynamic update is not happening.

Change
isset($_GET['slider'. $i - 1]) ? $rangevalue=$_GET['slider'. $i - 1] : $rangevalue="";

to
$tempI=$i - 1;
isset($_GET["slider$tempI") ? $rangevalue=$_GET["slider$tempI"] : $rangevalue="";

ASKER

I am not getting anything in the screen.

Can you attach your csv file, I need to work on this locally

ASKER

Sure. I am attaching the CSV file with this comment. Please let me know if you need more information.
demo.csv

Can you attach Paginated.php and DoubleBarLayout.php

ASKER

Sure. I am attaching it.
DoubleBarLayout.php
Paginated.php

Another one
PageLayout.php

ASKER

Sure,I have uploaded that file. Please let me know if you need more information.
PageLayout.php

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Thanks for the code. Is it like entering the value manually? I am not able to drag the slider. This is how I want to make the CSV values available.

I need to display only the CSV rows that satisfy all the UI sliders. For example, if my CSV data is as below, (We have 3 rows here)

1234 4 5 6
4321 6 7 8 
7899 5 6 7

Open in new window

Based on the above data, I will be having 3 sliders. I won't be knowing this beforehand, so based on the number of headers, I have those many sliders. After that, I will have the minimum and maximum value for each of the column to select a value.

So, as per the above example,

slider1  (min is 4 and max is 6)
slider2  (min is 5 and max is 7)
slider3  (min is 6 and max is 8)

Open in new window

Now, Let us assume, I am setting the slider values as below.

slider1 = 4
slider2 = 7
slider3 = 7

Open in new window

So as per the above setting, I need to display only the second row which satisifies the criteria.

 4321 6 7 8

Open in new window

Am I making sense? If you need more explanation, please let me know.

Aargh I removed the folder paths from the file (for my testing)
You need to add in js/ and css/ for the respective js and css files.

Nothing manual. When you click to the next page any rows where a keyword value is below the slider value are not displayed.

Stick with getting the current setup working first then you can worry about various scenarios - and probably worthy of a separate question.

ASKER

Alright, I included the path and it seems fine. However, in this example we have used 5 variables and set everything accordingly. I will not know the total columns before hand and how to modify it to accomodate any number of columns? For example, if the CSV file contained 10 columns?

I think it best to close this question and ask a new one. I have to go now.
But at least you have the base now to go forward and adapt to different situations, it won't take much to change it to be a bit more dynamic
You can always reference back to this question if needed.

But at 65 comments this question has run its course and has been answered.

ASKER

I really appreciate your help. Please let me know if you need more information.

No problem - I alwys like a challenge.
Ask a new question and use the base template I gave you above in the new question and just ask how to make it dynamic referencing the number of columns in the csv to the number of sliders.
If no one jumps in I will try to get back to it tomorrow.

ASKER

Sure, I really appreciate your help. I will do that. Thanks a lot again for your help!!