Estou utilizando o Ajax
para fazer atualização no banco de dados, mas estou passando dados por referência, ele funciona e atualiza no banco, mas se clicar no botão para desativar ele funciona mas se clico para desativar e em seguida em ativar, não funciona a menos que atualize toda a página, segue código de exemplo.
function att_user(id, valor) {
alert('Desativando');
$.ajax({
type: "POST",
url: "#",
data: {
id: id,
valor: valor
},
success: function (result) {
//$('body').text(result);
alert('Success!');
}
});
}
.switch__container {
margin: 5px auto;
width: 60px;
}
.switch {
visibility: hidden;
position: absolute;
margin-left: -9999px;
}
.switch + label {
display: block;
position: relative;
cursor: pointer;
outline: none;
user-select: none;
}
.switch--shadow + label {
padding: 2px;
width: 60px;
height: 30px;
background-color: #dddddd;
border-radius: 30px;
}
.switch--shadow + label:before,
.switch--shadow + label:after {
display: block;
position: absolute;
top: 1px;
left: 1px;
bottom: 1px;
content: "";
}
.switch--shadow + label:before {
right: 1px;
background-color: #d43f3a;
border-radius: 30px;
transition: background 0.4s;
}
.switch--shadow + label:after {
width: 31px;
background-color: #fff;
border-radius: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: all 0.4s;
}
.switch--shadow:checked + label:before {
background-color: #8ce196;
}
.switch--shadow:checked + label:after {
transform: translateX(30px);
}
/* Estilo Flat */
.switch--flat + label {
padding: 2px;
width: 60px;
height: 30px;
background-color: #dddddd;
border-radius: 30px;
transition: background 0.4s;
}
.switch--flat + label:before,
.switch--flat + label:after {
display: block;
position: absolute;
content: "";
}
.switch--flat + label:before {
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
background-color: #fff;
border-radius: 30px;
transition: background 0.4s;
}
.switch--flat + label:after {
top: 4px;
left: 4px;
bottom: 4px;
width: 56px;
background-color: #dddddd;
border-radius: 52px;
transition: margin 0.4s, background 0.4s;
}
.switch--flat:checked + label {
background-color: #8ce196;
}
.switch--flat:checked + label:after {
margin-left: 60px;
background-color: #8ce196;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch__container">
<input id="21" class="switch switch--shadow" type="checkbox" checked onclick="att_user('21', '0')">
<label for="21"></label>
</div>
ainda estou gatinhando no jquery e ajax, mas creio que referencia não seja a solução neste caso, mas ainda não consegui fazer de outra forma, queria deixar o botão dinamico.