<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="scoring-telkomsel">
<div class="panel panel-primary">
<div class="panel-heading"></div>
<div class="panel-body">
<div class="form-group text-center">
<div class="col-sm-4 col-md-4">
<input type="checkbox" name="fancy-checkbox-danger-custom-icons" autocomplete="off" />
<div class="btn-group">
<label for="fancy-checkbox-danger-custom-icons" class="btn-v1 btn btn-primary">
<span class="home-glyph glyphicon glyphicon-minus"></span>
</label>
<label for="fancy-checkbox-danger-custom-icons" class="btn btn-default active" disabled>
Ver1
</label>
</div>
</div>
<div class="col-sm-4 col-md-4">
<input type="checkbox" name="fancy-checkbox-danger-custom-icons" autocomplete="off" />
<div class="btn-group">
<label for="fancy-checkbox-danger-custom-icons" class="btn-v2 btn btn-primary">
<span class="office-glyph glyphicon glyphicon-minus"></span>
</label>
<label for="fancy-checkbox-danger-custom-icons" class="btn btn-default active" disabled>
Ver2
</label>
</div>
</div>
<div class="col-sm-4 col-md-4">
<input type="checkbox" name="fancy-checkbox-danger-custom-icons" autocomplete="off" />
<div class="btn-group">
<label for="fancy-checkbox-danger-custom-icons" class="btn-v3 btn btn-primary">
<span class=" telpon-glyph glyphicon glyphicon-minus"></span>
</label>
<label for="fancy-checkbox-danger-custom-icons" class="btn btn-default active" >
Ver3
</label>
</div>
</div>
</div>
<div class="row text-center score">
<div class="col-md-12">
<button class="btn btn-md btn-primary " id="requestTelkomsel" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Loading" data-sukses-text="<i class='fa fa-check'></i> Good" data-gagal-text="<i class='fa fa-times'></i> Fail">Submit</button>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="container">
<div class="panel-download">
</div>
</div>
</div>
.panel-download{
/*margin: 20px;*/
padding-top: 40px;
margin: 40px;
border: 2px #666;
box-shadow: 0 0 27px rgba(0,0,0,.25);
}
.panel-group{
padding: 20px;
}
.scoring-telkomsel{
padding: 20px;
margin: 20px;
box-shadow: 0 0 27px rgba(0,0,0,.25);
}
.score{
padding-top: 4em;
}
.form-group input[type="checkbox"] {
display: none;
}
$(function () {
var x;
var home = 'test';
var office = null;
var telpon = 'test';
var data = {
"status" : 200,
"data": [{
"nama": "elkin",
"id_number": "121212",
"alamat": "jl beringin",
}, {
"nama": "suketi",
"id": "44444",
"alamat": "jl sawo",
},
{
"nama": "test",
"id_number": "123",
"alamat": "jl sawo",
}]
};
$('#requestTelkomsel').click(function (e){
e.preventDefault();
var $this = $(this);
var produkType = 'tsel';
$this.button('loading');
if (home === null )
{
$('.btn-v1').removeClass('btn-primary').addClass('btn-danger');
$('.home-glyph').removeClass('glyphicon-minus').addClass('glyphicon-remove');
} else {
$('.btn-v1').removeClass('btn-primary').addClass('btn-success');
$('.home-glyph').removeClass('glyphicon-minus').addClass('glyphicon-ok');
}
if(office === null)
{
$('.btn-v2').removeClass('btn-primary').addClass('btn-danger');
$('.office-glyph').removeClass('glyphicon-minus').addClass('glyphicon-remove');
} else {
$('.btn-v2').removeClass('btn-primary').addClass('btn-success');
$('.office-glyph').removeClass('glyphicon-minus').addClass('glyphicon-ok');
}
if(telpon === null)
{
$('.btn-v3').removeClass('btn-primary').addClass('btn-danger');
$('.telpon-glyph').removeClass('glyphicon-minus').addClass('glyphicon-remove');
} else {
$('.btn-v3').removeClass('btn-primary').addClass('btn-success');
$('.telpon-glyph').removeClass('glyphicon-minus').addClass('glyphicon-ok');
}
$this.button('sukses').removeClass('btn-primary').addClass('btn-success').prop('disabled', false);
});
if(data.status == 200)
{
let datas = data.data;
// console.log(datas);
for (x = 0; x < datas.length; x++){
var nama = datas[x].nama;
var id = datas[x].id_number;
var alamat = datas[x].alamat;
var pefindo = datas[x].id_id;
var div = document.createElement('div');
div.className = 'panel-group';
div.innerHTML =
'<div class="panel panel-primary">' +
'<div class="panel-heading">List Data</div>' +
'<div class="panel-body">' +
'<label for="staticName" class="col-sm-2 col-form-label">Nama </label>' +
'<div class="col-sm-10">' +
'<input type="text" readonly class="form-control-plaintext staticName" value="'+ nama +'">' +
'</div>' +
'<label for="staticId" class="col-sm-2 col-form-label">ID Number </label>' +
'<div class="col-sm-10">' +
'<input type="text" readonly class="form-control-plaintext staticId" value="' + id + '">' +
'</div>'+
'<label for="staticAlamat" class="col-sm-2 col-form-label">add </label>' +
'<div class="col-sm-10">' +
'<input type="text" readonly class="form-control-plaintext staticAlamat" value="' + alamat + '">' +
'</div>'+
'<label for="staticPefindo" class="col-sm-2 col-form-label">ID </label>' +
'<div class="col-sm-10">' +
'<input type="text" readonly class="form-control-plaintext staticPefindo" value="' + pefindo + '">' +
'</div>'+
'<div class="col-sm-12 text-right">' +
'<button class="btn btn-primary" onClick="alert(' + id + ');">Download</button>' +
'</div>'+
'</div>' + '</div>';
$('.panel-download').append(div);
}
}
});
