<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="form-group">
<h3>Veuillez choisir un cycle :</h3><br/>
<label>Cycle: </label>
<form method="post" accept-charset="utf-8" action="<?php echo site_url("filiere/filiere_add"); ?>">
<select name="cyc" id ="Select1" class="input-small">
<?php foreach($cycle as $row) {?>
<option value="<?php echo $row->id; ?>"><?php echo $row->libelle; ?></option>
<?php }?>
</select>
</form>
<button class="btn btn-success" onclick="display()"><i class="glyphicon glyphicon-plus"></i> display</button>
</div>
<div id="x" style="display:none;" class="container">
</center>
<button class="btn btn-success" onclick="add_filiere()"><i class="glyphicon glyphicon-plus"></i> Ajouter une filiere</button>
<br />
<br />
<table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Identifiant</th>
<th>Libellé</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach($filiere as $row){?>
<tr>
<td><?php echo $row->id;?></td>
<td><?php echo $row->libelle;?></td>
<td>
<button class="btn btn-warning" onclick="edit_filiere(<?php echo $row->id;?>)"><i class="glyphicon glyphicon-pencil"></i></button>
<button class="btn btn-danger" onclick="delete_filiere(<?php echo $row->id;?>)"><i class="glyphicon glyphicon-remove"></i></button>
</td>
</tr>
<?php }?>
</tbody>
</table>
</div>
<script src="<?php echo base_url('assests/datatables/js/jquery.dataTables.min.js')?>"></script>
<script src="<?php echo base_url('assests/datatables/js/dataTables.bootstrap.js')?>"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable( {
"lengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]]
});
} );
var save_method; //for save method string
var table;
function add_filiere()
{
save_method = 'add';
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
//$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
}
function display()
{
document.getElementById('x').style.display = 'block';
}
function edit_filiere(id)
{
save_method = 'update';
$('#form')[0].reset(); // reset form on modals
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('index.php/filiere/filiere_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('[name="i"]').val(data.id);
$('[name="l"]').val(data.libelle);
$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Modifier département'); // Set title to Bootstrap modal title
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
function save()
{
var url;
if(save_method == 'add')
{
url = "<?php echo base_url('index.php/filiere/filiere_add')?>";
}
else
{
url = "<?php echo base_url('index.php/filiere/filiere_update')?>";
}
// ajax adding data to database
$.ajax({
url : url,
type: "POST",
data: $('#form').serialize(),
dataType: "JSON",
success: function(data)
{
//if success close modal and reload ajax table
$('#modal_form').modal('hide');
location.reload();// for reload a page
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error adding / update data');
}
});
}
function delete_filiere(id)
{
if(confirm('Voulez vous supprimer cette filiere ?'))
{
// ajax delete data from database
$.ajax({
url : "<?php echo site_url('index.php/filiere/filiere_delete')?>/"+id,
type: "POST",
dataType: "JSON",
success: function(data)
{
location.reload();
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error deleting data');
}
});
}
}
</script>
<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Départements</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Identifiant</label>
<div class="col-md-9">
<input name="i" placeholder="Identifiant" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Libelle</label>
<div class="col-md-9">
<input name="l" placeholder="Nom" class="form-control" type="text">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Bootstrap modal -->
</body>
</html>