I am trying to add a class 'block' to certain li elements using jquery but the class is not getting added. The program is to show the time slots. if the certain time is blocked then it should be disabled. the program to create the time slots is here
public function __construct(){
$this->_meta['instance']='time';
$this->_meta['class']='time';
}
private function _selectbox($start,$end,$currentTime=false,$id=false,$name=false,$class=false){
$fromtime=$start;
$totime= $fromtime + "1";
$select = '<ul class="'.$class.'">';
for($i=$start;$i<=$end;$i++){
while($fromtime<$end){
$li='<li id="li-'.$fromtime.':00-'.$totime.':00" class="" style="width:24%;"><input type="radio" id="radio-'.$fromtime.':00-'.$totime.':00" name="'.$name.'" value="'.$fromtime.':00-'.$totime.':00"/>'.$fromtime.':00-'.$totime.':00</li>';
$select.=$li;
$fromtime=$fromtime + "1";
$totime=$totime + "1";
}
}
return $select;
}
public function show($meta=array()){
$this->_meta=array_merge($this->_meta,$meta);
return $this->_hour();
}
here i'm getting the blocked time slots and passing those variables to views.
$date = $_SESSION['date'];
$blocks = $block->getBlocksPerDay(date('d',strtotime($date)),
date('m',strtotime($date)),
date('Y',strtotime($date)));
$this->setData('blocks',$blocks);
$this->setData('date',$date);
public function getBlocksPerDay($day,$month,$year){
$connection = db::factory('mysql');
$sql = 'select * from blocks WHERE date LIKE "'.$year.'-'.$month.'-'.$day.'%"';
return $connection->getArray($sql);
}
Here is the view in which i'm sending the blocks as $blocks in input type hidden and also showing the time slots
<?php echo $time->show(array('instance'=>'from'));?>
<?php
if(sizeof($blocks)>0){
foreach($blocks as $block){
$time_from=explode(":",$block['time_from']);
$time_from_part1=$time_from[0];
$time_from_part2=$time_from[1];
$time_to=explode(":",$block['time_to']);
$time_to_part1=$time_to['0'];
$time_to_part2=$time_to['1'];
//echo $time_from_part1':'$time_from_part2'-'$time_to_part1':'$time_to_part2;
echo '<input type="hidden" class="blocks" disabled="disabled" value="'.$time_from_part1.':'.$time_from_part2.'-'.$time_to_part1.':'.$time_to_part2.'"/>';
}
}
?>
And Lastly here is the Jquery to add the class to li element to block the particular li element
$(document).ready(function() {
function setBlocks(){
var blocks = $('.blocks');
$.each(blocks,function(index,value){
$('#li-'+$(value).val()).addClass('block');
//$('#li-'+$(value).val()).find('input').remove();
});
}
setBlocks();
});
Here is the HTML Output Generated
<ul class="time"><li id="li-10:00-11:00" class="" style="width:24%;"><input type="radio" id="radio-10:00-11:00" name="from-time-hour" value="10:00-11:00"/>10:00-11:00</li><li id="li-11:00-12:00" class="" style="width:24%;"><input type="radio" id="radio-11:00-12:00" name="from-time-hour" value="11:00-12:00"/>11:00-12:00</li><li id="li-12:00-13:00" class="" style="width:24%;"><input type="radio" id="radio-12:00-13:00" name="from-time-hour" value="12:00-13:00"/>12:00-13:00</li><li id="li-13:00-14:00" class="" style="width:24%;"><input type="radio" id="radio-13:00-14:00" name="from-time-hour" value="13:00-14:00"/>13:00-14:00</li><li id="li-14:00-15:00" class="" style="width:24%;"><input type="radio" id="radio-14:00-15:00" name="from-time-hour" value="14:00-15:00"/>14:00-15:00</li><li id="li-15:00-16:00" class="" style="width:24%;"><input type="radio" id="radio-15:00-16:00" name="from-time-hour" value="15:00-16:00"/>15:00-16:00</li><li id="li-16:00-17:00" class="" style="width:24%;"><input type="radio" id="radio-16:00-17:00" name="from-time-hour" value="16:00-17:00"/>16:00-17:00</li><li id="li-17:00-18:00" class="" style="width:24%;"><input type="radio" id="radio-17:00-18:00" name="from-time-hour" value="17:00-18:00"/>17:00-18:00</li>
<input type="hidden" class="blocks" disabled="disabled" value="10:00-11:00"/>
Is there any fix???