How to add a jquery input slider or toggle switch - php

Question

I am trying to add a toggle switch to allow the data to update to either yes or no on the table without actually clicking on the edit button. I am not sure how to go about this. I need it on the $e->Complete section. If it cant't be done in the admin_view then I will settle it in the edit_view page section but I need it so when they click on the yes or no that it automatically updates the post.
Admin_View.php page
<link href="<?php echo base_url();?>assets/css/bootstrap.min.css" rel="stylesheet">
<?php
$msg = $this->session->flashdata('msg');
if ( (isset($msg)) && (!empty($msg)) ) {
?>
<div class="alert alert-warning" >
×
<?php print_r($msg); ?>
</div>
<?php
}
$msg = $this->session->flashdata('msg1');
if ( (isset($msg)) && (!empty($msg)) ) {
?>
<div class="alert alert-danger" >
×
<?php print_r($msg); ?>
</div>
<?php
}
?>
<script>
$(document).ready(function(){
$('#table').dataTable();
});
$(document).ready(function(){
$('#date').trigger('click');
});
</script>
<div class="row-fluid" >
<div class="span10" style="margin-left:100px">
<div class="widget">
<div class="widget-header">
<i class="icon-truck"></i>
<h3>Admin Callins Edit View</h3>
</div>
<div class="widget-content" align="center">
<table class="table table-bordered" id="table">
<thead>
<tr>
<th id="date" style="text-align:center; background-color:#4C9ED9; color: #fff;">Date Scheduled</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Employee Name</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Employee Number</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Date Time Reported</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Reason</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Scheduled_Area</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Contact</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Approval Name</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Complete</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Edit</th>
<th style="text-align:center; background-color:#4C9ED9; color: #fff;">Delete</th>
</tr>
</thead>
<tr>
<?php $i=1; foreach($callin as $e ):?>
<td style="text-align:center;"><?php echo $e->Date_Scheduled;?></td>
<td style="text-align:center;"><?php echo $e->Employee_Name;?></td>
<td style="text-align:center;"><?php echo $e->Employee_Number;?></td>
<td style="text-align:center;"><?php echo $e->Time_Reported;?></td>
<td style="text-align:center;"><?php echo $e->Reason;?></td>
<td style="text-align:center;"><?php echo $e->Scheduled_Area;?></td>
<td style="text-align:center;"><?php echo $e->Contact;?></td>
<td style="text-align:center;"><?php echo $e->Approval;?></td>
<td style="text-align:center;"><?php echo $e->Complete;?></td>
<td style="text-align:center;" >
Edit
</td>
<td style="text-align:center;">
<a class="btn btn-default" href="#del_<?php echo $e->id?>" data-toggle="modal">Delete</a>
</td>
</tr>
<?php endforeach ;?>
</table>
<!--Modal Start here-->
<?php foreach($callin as $d):?>
<div class="modal fade" id="del_<?php echo $d->id;?>" tabindex="-1" role="dialog" aria-labelledby="addModal" aria-hidden="true" >
<form action="<?php echo base_url();?>callin/delete_callin" method="post" data-parsley-validate>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title" id="myAddLabel">Warning!</h4>
</div>
<div class="modal-body">
<div class="box-body">
<div align="center" class="alert alert-error">
<h4>Are You Sure to Delete this Details</h4>
</div><br>
</div><br><br>
<div align="center">
<input type="hidden" name="id" value="<?php echo $d->id;?>">
<button type="submit" class="btn btn-primary">Yes</button>
<button class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</form>
</div>
<?php endforeach;?>
edit_view.php page
<DOCTYPE!>
<html>
<head>
<title>Edit Page</title>
<link href="<?php echo base_url();?>assets/css/bootstrap.min.css" rel="stylesheet">
<link href="<?php echo base_url();?>assets/css/custom.css" rel="stylesheet">
</head>
<body>
<div class"col-lg-6">
<div class="alert alert-warning">
<br><br>
<h4>Edit Call-IN</h4>
<?php $msg = $this->session->flashdata('msg'); if((isset($msg)) && (!empty($msg))) { ?>
<div class="alert alert-success" >
×
<?php print_r($msg); ?>
</div>
<?php } ?>
<?php $msg = $this->session->flashdata('msg1'); if((isset($msg)) && (!empty($msg))) { ?>
<div class="alert alert-error" >
×
<?php print_r($msg); ?>
</div>
<?php } ?>
<form class="form-horizontal" action="<?php echo base_url();?>callin/update_callin" method="post">
<?php foreach($callin as $e):?>
<div class="pull-left">
<div class="form-group">
<label class="col-sm-5 control-label">Date Scheduled:</label>
<div class="btn btn-default" >
<input type="text" class="default" name="Date_Scheduled" value="<?php echo $e->Date_Scheduled;?>">
</div>
</div>
<div class="pull-left">
<div class="form-group">
<label class="col-sm-5 control-label">Employee Name:</label>
<div class="btn btn-default" >
<input type="text" class="default" name="Employee_Name" value="<?php echo $e->Employee_Name;?>">
</div>
</div>
<div class="pull-left">
<div class="form-group">
<label class="col-sm-5 control-label">Employee Number:</label>
<div class="btn btn-default" >
<input type="text" class="default" name="Employee_Number" value="<?php echo $e->Employee_Number;?>">
</div>
</div>
<div class="pull-left">
<div class="form-group">
<label class="col-sm-5 control-label"> Time Reported:</label>
<div class="btn btn-default" >
<input type="text" class="default" name="Time_Reported" value="<?php echo $e->Time_Reported;?>">
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label"> Reason:</label>
<?php
$Reason = $e->Reason;
$options = array("Bereavement","Clinic","FMLA","ILL","ILL 2nd Day","Jury Duty",
"ILL/PTO","IOW","Late","Late???","Layoff","Leave Early",
"LeaveEarly FMLA","LeaveEarly ILL","LeaveEarly Personal","LeaveEarly FMLA","LNTB5H",
"MIA","NCI","NCIBOD","NCIFL","NCOFL","Other","Personal","SAC","STO","VLO");
?>
<div class="btn btn-default">
<select name="Reason" class="default">
<?php
// Define $Reason here or the 'selected' attribute will not work
foreach($options as $option){
if($Reason == $option){
echo "<option value='".$option."' selected='selected'>".$option."</option>";
}
else{
echo "<option value='".$option."'>".$option."</option>";
}
}
?>
</select>
</div>
</div>
<?php
$Scheduled_Area = $e->Scheduled_Area;
$options = array("CLAIMS","TELECOM","CLEAN", "FLAT","HG SORT ",
"HG TOTE","HANG 1","HANG 2", "INBOUND", "LP","MAINT","OUTBOUND",
"PEP","QA/II","RACK SHOES", "REGIONAL DELIVERY","IT");
?>
<div class="form-group">
<label class="col-sm-5 control-label">Scheduled Area:</label>
<div class="btn btn-default">
<select name="Scheduled_Area" class="default">
<?php
// Define $department here or the 'selected' attribute will not work
foreach($options as $option){
if($Scheduled_Area == $option){
echo "<option value='".$option."' selected='selected'>".$option."</option>";
}
else{
echo "<option value='".$option."'>".$option."</option>";
}
}
?>
</select>
</div>
</div>
<div class="pull-left">
<div class="form-group">
<label class="col-sm-5 control-label">Contact:</label>
<div class="btn btn-default" >
<input type="text" class="default" name="Contact" value="<?php echo $e->Contact;?>">
</div>
</div>
<div class="pull-left">
<div class="form-group">
<label class="col-sm-5 control-label">Approval Name: </label>
<div class="btn btn-default" >
<input type="text" class="default" name="Approval" value="<?php echo $e->Approval;?>">
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Complete:</label>
<?php
$Complete = $e->Complete;
$options = array("NO","Yes");
?>
<div class="btn btn-default">
<select name="Complete" class="default">
<?php
// Define $Complete here or the 'selected' attribute will not work
foreach($options as $option){
if($Complete == $option){
echo "<option value='".$option."' selected='selected'>".$option."</option>";
}
else{
echo "<option value='".$option."'>".$option."</option>";
}
}
?>
</select>
</div>
</div>
<br>
<div class="footer" align="center">
<input type="hidden" value="<?php echo $e->id;?>" name="id">
<input type="submit" value="Update" class="btn btn-default">
<!--<input type="reset" value="Cancel" class="btn btn-default"> not working for some reason-->
<button class= "btn btn-default" onclick="location.href='<?php echo base_url();?>callin/list_callins'">Cancel</button>
</div>
</div>
</div>
<?php endforeach;?>
</form>
</body>
</html>

Answer 1

I put this in the edit_view page
<div class="form-group">
<div class="switch_options">
<label class="col-sm-5 control-label">Complete: </label>
<span class="switch_enable"> Yes </span>
<span class="switch_disable"> NO </span>
<input type="hidden" class="default"value="<?php echo $e->Complete;?>">
<input type="hidden" name="Complete" class="switch_val" value=""/>
</div>
In replace of this:
<div class="form-group">
<label class="col-sm-5 control-label">Complete:</label>
<?php
$Complete = $e->Complete;
$options = array("NO","Yes");
?>
<div class="btn btn-default">
<select name="Complete" class="default">
<?php
// Define $Complete here or the 'selected' attribute will not work
foreach($options as $option){
if($Complete == $option){
echo "<option value='".$option."' selected='selected'>".$option."</option>";
}
else{
echo "<option value='".$option."'>".$option."</option>";
}
}
?>
</select>
</div>
</div>
<br>
My jQuery code is this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.switch_options').each(function() {
//This object
var obj = jQuery(this);
var enb = obj.children('.switch_enable'); //cache first element, this is equal to Yes
var dsb = obj.children('.switch_disable'); //cache first element, this is equal to NO
var input = obj.children('input'); //cache the element where we must set the value
var input_val = obj.children('input').val(); //cache the element where we must set the value
/* Check selected */
if( 'NO' == input_val ){
dsb.addClass('selected');
}
else if( 'Yes' == input_val ){
enb.addClass('selected');
}
//Action on user's click(Yes)
enb.on('click', function(){
$(dsb).removeClass('selected'); //remove "selected" from other elements in this object class(NO)
$(this).addClass('selected'); //add "selected" to the element which was just clicked in this object class(Yes)
$(input).val('Yes').change(); //Finally change the value to Yes
});
//Action on user's click(NO)
dsb.on('click', function(){
$(enb).removeClass('selected'); //remove "selected" from other elements in this object class(Yes)
$(this).addClass('selected'); //add "selected" to the element which was just clicked in this object class(NO)
$(input).val('NO').change(); // //Finally change the value to NO
});
});
});
</script>
my CSS code is this:
<style type="text/css">
/* Main block */
.switch_options{
display: block;
font-family: "Helvetica", Arial, Sans-serif;
margin-bottom: 10px;
}
/* Main block clearfix */
.switch_options:before,
.switch_options:after{
content:'.';
display:block;
overflow:hidden;
visibility:hidden;
font-size:0;
line-height:0;
width:0;
height:0;
}
.switch_options:after{clear:both;}
/*Options*/
.switch_options span{
display: inline-block;
float: left;
padding: 4px 9px;
margin: 0;
cursor: pointer;
font-size: 12px;
font-weight: 700;
color: #555;
border: 1px solid #aaa;
text-transform: uppercase;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}
.switch_options span:first-of-type{
border-radius: 2px 0 0 2px;
border-right: 0;
}
.switch_options span:last-of-type{
border-radius: 0 2px 2px 0;
border-left: 0;
}
.switch_options span:hover{
background: #fafafa;
}
/* Active option */
.switch_options span.selected{
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
border-color: #0082A3;
color: #fff;
}
</style>

Answer 2

The first problem I see is on Admin_View.php, your table has some errors. you need to start the foreach loop before the <tr> tag. I would also try to place this inside <tbody> tags.
You have this:
<tr>
<?php $i=1; foreach($callin as $e ):?>
<td>..</td>
<!-- more tds -->
<td>..</td>
</tr>
<?php endforeach ;?>
Change it to this:
<tbody>
<?php $i=1; foreach($callin as $e ):?>
<tr>
<td>..</td>
<!-- more tds -->
<td>..</td>
</tr>
<?php endforeach ;?>
</tbody>