0

link de referência: http://www.dapweb.org/dapdaniel/rosiane/temporada.php

Possuo um form com algumas opções dispostas em check boxes, para mudá-las de acordo com o clique estou utilizando AJAX, o seguinte código:

function function1() {
  $('.form-check-input').on('change', function() {
    $('.form-check-input').not(this).prop('checked', false);

    $.ajax({
      url: "ajax/temporadacheckbox.php",
      type: "POST",
      async: true,
      cache: false,
      data: {
        tipo: $('input:checkbox:checked').val()
      },
      success: function(data) {
        $("#grid").hide(),
          $('#grid2').html(data);
      }
    });
  });
}

A div grid2, vem correta e dinamicamente de outra pagina PHP.

Exemplo da div dinâmica:

<div class="product-item bg-light">
<div class="card">
    <div class="thumb-content">
        <!-- <div class="price">$200</div> -->
        <a href="resumo.php?cidade=$cid&categoria=temporadas&id=$id">
            <img class="card-img-top img-fluid" src="imagens/$foto" alt="Card image cap">
        </a>
    </div>
    <div class="card-body">
        <h4 class="card-title"><a href="resumo.php?cidade=$cid&categoria=temporadas&id=$id">$nome</a></h4>
        <ul class="list-inline product-meta">
            <li class="list-inline-item">
                <a href="resumo.php?cidade=$cid&categoria=temporadas&id=$id"><i class="fa fa-folder-open-o"></i>Hospedagens</a>
            </li>

        </ul>
        <p class="card-text">$texto</p>
        <div class="product-ratings">
            <ul class="list-inline">
                <li class="list-inline-item selected"><i class="fa fa-star"></i></li>
                <li class="list-inline-item selected"><i class="fa fa-star"></i></li>
                <li class="list-inline-item selected"><i class="fa fa-star"></i></li>
                <li class="list-inline-item selected"><i class="fa fa-star"></i></li>
                <li class="list-inline-item"><i class="fa fa-star"></i></li>
            </ul>
        </div>
    </div>
</div>

As duas rodam dentro de um form, que preenchem as informações de acordo com a requisição, a div grid2, deve apenas filtrar a categoria selecionada.

Desejo que quando o usuário não tiver nenhuma opção marcada no check box, eu mostre a div original, a div grid, como posso fazer?

3
  • 1
    explique melhor o que você quer fazer, eu não entendi muito bem.
    – Dudut
    11/05/2019 às 16:56
  • tenho um form com alguns input check box, do qual você só pode selecionar um por vez, quando você clica em uma opção e muda para outra, ele carrega a div correspondente ao checkbox que você selecionou corretamente. Porém, quando não há nenhum checkbox selecionado, ele não mostra nada. Eu quero mostrar a div original quando não estiver nada selecionado. Obs: ao entrar na pagina, antes de selecionar qualquer check, ele mostra a div que eu quero exibir, apenas após selecionar qualquer um deles e desfaço a seleção que a div exibida fica vazia. 11/05/2019 às 18:00
  • Deixa ver se compreendí, a div com o id=grid corresponde a div que deseja mostrar quando não há nenhum checkbox selecionado?! Certo?? 12/05/2019 às 8:59

2 Respostas 2

1
+100

Adicione o evento de click diretamente nos checkbox.

$('input:checkbox').click(function() {

    $('input:checkbox').not(this).prop('checked', false);

    if ($(this).is(':checked')) {
        changeByTipo($(this).val());
    } else {
        $('#grid').show();
        $('#grid2').empty().hide();
    }
});

function changeByTipo(tipo) {
    $.ajax({
        url: "ajax/temporadacheckbox.php", 
        type: "POST",
        async: true,
        cache: false,
        data: { tipo : tipo },
        success: function(data) {
            $("#grid").hide();
            $('#grid2').html(data).show();
        }
    });
};
12
  • amigo, também não funcionou correto, ele deve marcar apenas um checkbox por vez, não permitindo que mais de um seja selecionado, e quando não há nenhum selecionado ele continua me mostrando a ultima chamada da página dinamica, ao menos agora, a div não fica vazia, mas quando eles estiverem zerados, eu quero mostrar a div original. 12/05/2019 às 14:07
  • olhe a página para entender: dapweb.org/dapdaniel/rosiane/temporada.php 12/05/2019 às 14:08
  • 1
    Eu esqueci de adicionar o método show() no grid que exibe os dados da requisição. Faz o teste agora @DanielGomesDaSilvaMoreira. 13/05/2019 às 11:59
  • 1
    Funcionou Vitor!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Boa!!!!!!!!!!!!!!!!!!!!!!!! Parabéns, muitissimo obrigado mano! 13/05/2019 às 12:53
  • 1
    Vamos continuar esta discussão no chat. 13/05/2019 às 13:04
0

Embora não tenha compreendido bem a tua pergunta fiz um script que talvez possa te ajudar.

Para verificar se nenhum checkbox foi selecionado tens que usar a declaração if/else , conforme o exemplo abaixo.

Exemplo:

$('.form-check-input').on('change', function() {

  $('.form-check-input').not(this).prop('checked', false);
  let inputCheckedValue = $('.check-input:checkbox:checked').val(); // valor do último input selecionado

  if (inputCheckedValue) { // Pelo menos um checkbox foi selecionado: Faça a requisição
    // ...
    $.ajax({
      url: "ajax/temporadacheckbox.php",
      type: "POST",
      async: true,
      cache: false,
      data: {
        tipo: inputCheckedValue
      },
      success: function(data) {
        $("#grid").hide();
        $('#grid2').html(data);
      }
    });
    // ...
  } else { // Nenhum checkbox foi selecionado: mostra a div original
    $("#grid").show(); // Mostrar a div original
    $('#grid2').empty().hide(); // Limpar e esconder a div dinâmica
    // ...
  }  
})
4
  • não funcionou amigo, semanticamente deve ter algo errado, mas a lógica do if e else já me deu uma luz aqui, infelizmente, como os pontos da recompensa estão altos, vou passá-los pra quem me responder o mais próximo do compilável. 12/05/2019 às 14:04
  • se ajudar, aqui está o link da página: dapweb.org/dapdaniel/rosiane/temporada.php 12/05/2019 às 14:08
  • na verdade, apenas o retorno do else que não está correto, vou te enviar como o codigo ficou aqui 12/05/2019 às 14:18
  • function function1() { $('.form-check-input').on('change', function() { let inputCheckedValue = $('.form-check-input').not(this).prop('checked', false); if(inputCheckedValue) {$.ajax({ url: "ajax/temporadacheckbox.php", type: "POST", async: true, cache: false, data: { tipo :$('input:checkbox:checked').val()}, success: function(data){ $("#grid").hide(), $("#pagination").hide(), $('#grid2').html(data);} }); else { $("#grid").show(), $('#grid2').empty().hide(); // Limpar e esconder a div dinâmica // ... } });} 12/05/2019 às 14:21

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 .