BConstable BConstable - 4 years ago 145
Javascript Question

JQuery Not Showing in JS

I've been making a slider in JS using JQuery to use as a time picker and trying to display it in my PHP script. I have been following these instructions and the first part worked perfectly fine. Now when I go to add the next stage, it does not show up anymore. Any ideas?

Link to instructions:

http://marcneuwirth.com/blog/2010/02/21/using-a-jquery-ui-slider-to-select-a-time-range/

Here is my code:

<script>
$(function() {
$( '#slider-range' ).slider({
range: true,
min: 0,
max: 839,
values: [ 60, 210 ],
slide: slideTime
});
function slideTime(event, ui){
var val0 = $('#slider-range').slider('values', 0),
val1 = $('#slider-range').slider('values'', 1),
minutes0 = parseInt(val0 % 60, 10),
hours0 = parseInt(val0 / 60 % 24, 10),
minutes1 = parseInt(val1 % 60, 10),
hours1 = parseInt(val1 / 60 % 24, 10);
startTime = getTime(hours0, minutes0);
endTime = getTime(hours1, minutes1);
$('#time').text(startTime + ' - ' + endTime);
}
function getTime(hours, minutes) {
var time = null;
minutes = minutes + "";
if (hours < 12) {
time = 'AM';
}
else {
time = 'PM';
}
if (hours == 0) {
hours = 12;
}
if (hours > 12) {
hours = hours - 12;
}
if (minutes.length == 1) {
minutes = '0' + minutes;
}
return hours + ':' + minutes + ' ' + time;
}
slideTime();
});
</script>

<script>
$(function() {
$( '#datepicker' ).datepicker({ dateFormat: 'yy-mm-dd' });
});

</script>
<?php
//settings
echo "<hr style='border: 1px solid #800000'><h3>Settings</h3>";
echo "<table style='width:100%;text-align:center;'>";
echo "<tr><td><h4>Date Selector</td><td><h4>Group Selector</td></tr>";
echo "<tr><td><input type='text' id='datepicker' name='date' value='Select a date...' onchange='this.form.submit()'></form></td>";
echo "</select></form></td></tr>";
echo "</table>";
if (isset($_GET['date'])) {
$date = $_GET['date'];
}
else {
$date = date("Y-m-d");
}
//boat booking
echo "<hr style='border: 1px solid #800000'><h3>Book Boats - ".$date."</h3>";
echo "<table style='width:100%;text-align:center;'>";
echo "<tr><td><h4>Time Selector<h4></td></tr>";
echo "</table>";
echo "<div class='slider' id='slider-range'></div>";
//logging
echo "<hr style='border: 1px solid #800000'><h3>Boat Usage</h3>";


Thanks in advance!

Answer Source

You should remove the extra quote ' in the following line :

val1 = $('#slider-range').slider('values'', 1);

Should be :

val1 = $('#slider-range').slider('values', 1);

And better if you can use change instead of slider to adjust the time.

$( '#slider-range' ).slider({ 
  range: true, 
  min: 0, 
  max: 839, 
  values: [ 60, 210 ], 
  step: 30,
  change: slideTime
}); 

function slideTime( event, ui){
  var val0 = $('#slider-range').slider('values', 0), 
      val1 = $('#slider-range').slider('values', 1), 
      minutes0 = parseInt(val0 % 60, 10), 
      hours0 = parseInt(val0 / 60 % 24, 10), 
      minutes1 = parseInt(val1 % 60, 10), 
      hours1 = parseInt(val1 / 60 % 24, 10); 

  startTime = getTime(hours0, minutes0); 
  endTime = getTime(hours1, minutes1); 

  $('#stime').text(startTime); 
  $('#etime').text(endTime); 
}
function getTime(hours, minutes) { 
  var time = null; 
  minutes = minutes + "";

  if (minutes.length == 1) { 
    minutes = '0' + minutes; 
  } 
  hours = hours +8; 
  return hours + ':' + minutes; 
} 

slideTime();
#slider-range{
  width:300px;
  margin-top:10px;
}
body {
  margin: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<h1>HTML Slider Test</h1>

<div id="slider-range"></div>

<div id="stime"></div>
<div id="etime"></div>
<p>Your slider has a value of <span id="slider-value"></span></p>

Hope this helps.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download