0

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.

1 Resposta 1

0

Consegui fazer com que o botão fique dinamico, da seguinte forma. acrescentei o atributo value com o valor de status ativo (1) ou inativo (0) vindo do banco de dados

<input type="checkbox" value="0" /> <!-- se inativo value 1, ativo value 0 -->

Sim eu inverto o valor do value para poder utiliza-lo posteriormente, e passo por referencia apenas o id e o value utilizo o jquery para recuperar utilizando $('id').attr('value'); e após a insersão dos dados no banco mudo o valor do value para o valor inverso ao recuperado pelo attr(), se o recuperado pelo attr for 0 o novo valor setado será 1 e assim sucessivamente deixando-o dinâmico, não é uma alternativa correta, mas foi a que resolveu o problema no momento.

function att_user(id) {  
var valor = $('#21').attr('value');  
        $.ajax({
            type: "POST",
            url: "#",
            data: {
                id: id,
                valor: valor
            },
            success: function (result) {
                if(valor == 1){
                    $('#func'+id).val(0);
                    alert('Ativado');
                }else if(valor == 0){
                    $('#func'+id).val(1);
                     alert('Desativado');
                }
               
            }
        });
    }
.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" value="0" type="checkbox" checked onclick="att_user('21')">
  <label for="21"></label>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .