Solved

PHP/Javascript slider resets if I navigate to second page

Posted on 2013-10-25
67
327 Views
Last Modified: 2013-10-25
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
0
Comment
Question by:ramesh4046
  • 35
  • 32
67 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39601320
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
0
 

Author Comment

by:ramesh4046
ID: 39601330
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601358
Where did you get the code from?
0
 

Author Comment

by:ramesh4046
ID: 39601385
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601437
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

0
 

Author Comment

by:ramesh4046
ID: 39601453
If I click on 2nd or 3rd page link, I am getting values as undefined for all the sliders.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601464
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

0
 

Author Comment

by:ramesh4046
ID: 39601480
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?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601506
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)
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601521
Made a typo

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

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

Author Comment

by:ramesh4046
ID: 39601522
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

0
 
LVL 58

Expert Comment

by:Gary
ID: 39601527
See comment above
0
 

Author Comment

by:ramesh4046
ID: 39601533
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601545
Change it to

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

Your counter is a bit weird.
0
 

Author Comment

by:ramesh4046
ID: 39601558
I still have no luck. I am still seeing the values as undefined only.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601560
Sorry change it to this

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

Author Comment

by:ramesh4046
ID: 39601573
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601576
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

0
 
LVL 58

Expert Comment

by:Gary
ID: 39601586
I have made some edits to the above
0
 

Author Comment

by:ramesh4046
ID: 39601599
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601604
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

0
 

Author Comment

by:ramesh4046
ID: 39601610
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
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601613
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

0
 

Author Comment

by:ramesh4046
ID: 39601628
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601629
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

0
 

Author Comment

by:ramesh4046
ID: 39601637
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601641
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

0
 

Author Comment

by:ramesh4046
ID: 39601649
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601655
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.
0
 

Author Comment

by:ramesh4046
ID: 39601663
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601679
Doesn't make sense, add the bolded part

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

Expert Comment

by:Gary
ID: 39601683
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.
0
 

Author Comment

by:ramesh4046
ID: 39601690
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

0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 58

Expert Comment

by:Gary
ID: 39601716
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.
0
 

Author Comment

by:ramesh4046
ID: 39601724
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601725
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

0
 

Author Comment

by:ramesh4046
ID: 39601735
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601746
Not index.php, to slider.php
0
 

Author Comment

by:ramesh4046
ID: 39601755
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601765
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

0
 

Author Comment

by:ramesh4046
ID: 39601773
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
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601779
Add the bolded

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

Author Comment

by:ramesh4046
ID: 39601803
I have added those 2 lines in my code. You can find the updated code here
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601816
But we are getting the sliders at the right values - yes?
0
 

Author Comment

by:ramesh4046
ID: 39601821
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601827
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.
0
 

Author Comment

by:ramesh4046
ID: 39601838
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.
0
 
LVL 58

Expert Comment

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

Author Comment

by:ramesh4046
ID: 39601862
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

0
 
LVL 58

Expert Comment

by:Gary
ID: 39601887
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

0
 

Author Comment

by:ramesh4046
ID: 39601892
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601900
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="";
0
 

Author Comment

by:ramesh4046
ID: 39601906
I am not getting anything in the screen.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601909
Can you attach your csv file, I need to work on this locally
0
 

Author Comment

by:ramesh4046
ID: 39601915
Sure. I am attaching the CSV file with this comment. Please let me know if you need more information.
demo.csv
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601930
Can you attach Paginated.php and DoubleBarLayout.php
0
 

Author Comment

by:ramesh4046
ID: 39601935
Sure. I am attaching it.
DoubleBarLayout.php
Paginated.php
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601939
Another one
PageLayout.php
0
 

Author Comment

by:ramesh4046
ID: 39601942
Sure,I have uploaded that file. Please let me know if you need more information.
PageLayout.php
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39601975
See how this works for you

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="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="simple-slider.css" rel="stylesheet" type="text/css" />
<link href="simple-slider-volume.css" rel="stylesheet" type="text/css" /> 
</head>
<body>
<?php 
require_once "Paginated.php";
require_once "DoubleBarLayout.php";

$names = file('demo.csv');
isset($_GET['page'])?$page = $_GET['page']:$page=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;
isset($_GET['slider1'])?$s1=$_GET['slider1']:$s1=0;
isset($_GET['slider2'])?$s2=$_GET['slider2']:$s1=0;
isset($_GET['slider3'])?$s3=$_GET['slider3']:$s1=0;
isset($_GET['slider4'])?$s4=$_GET['slider4']:$s1=0;
isset($_GET['slider5'])?$s5=$_GET['slider5']:$s1=0;

while ( $row = $pagedResults->fetchPagedRow())
{
    if ($page == 1 && $header) 
	{
        $header = false;
        continue;  // Skip this header row
    }
    $temp=explode(",",$row);


	$display="";
	if($temp[1]<$s1){
		$display="display:none";
	}
	elseif($temp[2]<$s2){
		$display="display:none";
	}
	elseif($temp[3]<$s3){
		$display="display:none";
	}
	elseif($temp[4]<$s4){
		$display="display:none";
	}
	elseif($temp[5]<$s5){
		$display="display:none";
	}
	
	echo '<tr style="'. $display . '"><td>';



    $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 = 0;
    while ($i <= $total_columns-1) {
	     $data1[$i][] = (int) $row[$i];
		 $i++;
	 }
}

$i = 0;

while ($i <= $total_columns-1) {

    $_SESSION["min-column-$i"] = min($data1[$i]);
    $_SESSION["max-column-$i"] = max($data1[$i]);
	$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 >

            });
        });
});
$("slider:changed")
</script>

</body>

</html>

Open in new window

0
 

Author Comment

by:ramesh4046
ID: 39601989
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.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39601994
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.
0
 

Author Comment

by:ramesh4046
ID: 39602005
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?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39602011
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.
0
 

Author Comment

by:ramesh4046
ID: 39602012
I really appreciate your help. Please let me know if you need more information.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39602023
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.
0
 

Author Comment

by:ramesh4046
ID: 39602030
Sure, I really appreciate your help. I will do that. Thanks a lot again for your help!!
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now