CODEWITHSUNDEEP
javascriptjqueryjquery-uifunction
Daniel James Clarke
Daniel James Clarke

Reputation: 165

help me wrap up a slider into a function I can call

A while ago I posted a question about a jquery slider here

This now works a treat but I now need to wrap it up in a function for each day of the week so I can pass in values as some of the values are hard coded. I've tried doing this and Firebugs telling me that slider is undefined.

All I want to do is call the function seven times for each day of the week and pass in the id for the slider, id for the div that holds the times, the id for the div that holds the generated table, the id for the table itself and an id for the button.

The current code is this:

var startTime;
var endTime;

$("#slider-range").slider({
    range: true, min: 0, max: 1439, values: [540, 1020], step:5, slide: slideTime, /*change: */});
function slideTime(event, ui){
    var minutes0 = parseInt($("#slider-range").slider("values", 0) % 60);
    var hours0 = parseInt($("#slider-range").slider("values", 0) / 60 % 24);
    var minutes1 = parseInt($("#slider-range").slider("values", 1) % 60);
    var hours1 = parseInt($("#slider-range").slider("values", 1) / 60 % 24);
    startTime = getTime(hours0, minutes0);
    endTime = getTime(hours1, minutes1);
    $("#time").html('<p>Opening time: ' + startTime + '</p><p>Closing time: ' + endTime + '</p>');
function getTime(hours, minutes) {
    minutes = minutes + "";
    if (hours == 12) {
    hours = 12;
}
if (hours > 12) {
    hours = hours;
}
if (minutes.length == 1) {
    minutes = "0" + minutes;
}
return hours + ":" + minutes ;

function getTimeloop(minutesloop) {
    minutesloop = minutesloop + "";
    if (minutesloop.length == 1) {
        minutesloop = "0" + minutesloop;
    }
returnminuetsloop;
}                                   }   
                                        slideTime();
                                        $('#btnUpdatetable').click(function(){
var startLoop = parseInt($("#slider-range").slider("values", 0));
var endLoop = parseInt($("#slider-range").slider("values", 1));
$('#bookingTimesTable').remove();
$('<table id="bookingTimesTable">').appendTo('#generatedResultTable');
for(i = startLoop; i < endLoop; i+=5)
{
$('<tr><td style="width:145px; padding-left: 10px;">' + parseInt(i/ 60 % 24) + ':' +  getTimeloop(parseInt(i % 60)) + '</td><td style="padding-left: 10px;" ><input class="chx" name="' + parseInt(i/ 60 % 24) + ':' +  getTimeloop(parseInt(i % 60)) + '" type="checkbox" value="' + parseInt(i/ 60 % 24) + ':' +  getTimeloop(parseInt(i % 60)) + '" /></td></tr>').appendTo('#bookingTimesTable');
}
var i=0;
var period = $('#cboBooking').val();        

$('.chx').each(function(){
  $(this).attr('checked',(i % period ==0));
  i++;
});
$('#bookingTimesTable tr:odd').css('background','#dedede');
});

If you could help me on this that would be great! Its being implemented for seven days of the week on a tabbed interface and I really want to get it up and running fast

Dan

Upvotes: 0

Views: 190

Answers (1)

draeton
draeton

Reputation: 685

Just a quick note of assistance... Wrap the entire thing in a constructor function, which will form a closure upon all of the contained variables and functions. Then pass in what you would like to redefine as function arguments:

function BookingSlider (sliderId, timesDivId, tableDivId, tableId, buttonId) {
    // your code
}

Use this constructor to instantiate new instances of BookingSlider, passing in the appropriate values:

var bsMonday = new BookingSlider('slider-range', 'time', 'generatedResultTable', 'bookingTimesTable', 'btnUpdatetable');

Make sure you substitute all string constants with the appropriate arguments in your function:

'#btnUpdatetable'

becomes

'#' + buttonId

Upvotes: 1

Related Questions