I have a problem with jquery, I do not really have much practice with jquery, but I work with ajax and json to query the database and return data.
Well I have a page that the client wants me to take from example: link , on the left side we have the filters, Format, Category and Level of learning, to each checkbox that we click, I show the material of its respective category, so I'm doing an ajax for validation and return json and display in jquery the materials that have the id of the category returned via json.
The problem is the parent categories I can not return all the child materials and when I uncheck the checkebox, I can not return all the results, I know I'm lousy to explain but anyway follows the code. Disregard php are just classes I use to make CRUD HTML:
<!--- filtros -- >
<div class="filtro-materiais">
<p class="categoria">Por Formato</p>
<div class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label" id="video">
<input type="checkbox" class="form-check-input" name="e" value="22" rel="catformat">
<span class="nome-filtro">Video</span>
</label>
</form>
</div>
<div class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label" id="e-book">
<input type="checkbox" class="form-check-input" name="e" value="666" rel="catformat">
<span class="nome-filtro">E-book</span>
</label>
</form>
</div>
<div class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label" id="webinar">
<input type="checkbox" class="form-check-input" name="e" value="667" rel="catformat">
<span class="nome-filtro">Webinar</span>
</label>
</form>
</div>
<div class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label" id="kit">
<input type="checkbox" class="form-check-input" name="e" value="668" rel="catformat">
<span class="nome-filtro">Kit</span>
</label>
</form>
</div>
<div class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label" id="ferramenta">
<input type="checkbox" class="form-check-input" name="e" value="669" rel="catformat">
<span class="nome-filtro">Ferramenta</span>
</label>
</form>
</div>
<p class="categoria">Por categoria</p>
<div class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="e" value="1015" rel="all">
<span class="nome-filtro">Atrair</span>
</label>
</form>
</div>
<div style="margin-left: 30px;" class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label">
<input type="checkbox" class="form-check-input all 1015" name="e" value="1026" rel="cat" id="1015">
<span class="nome-filtro">Blog</span>
</label>
</form>
</div>
<div style="margin-left: 30px;" class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label">
<input type="checkbox" class="form-check-input all 1015" name="e" value="1027" rel="cat" id="1015">
<span class="nome-filtro">Links Patrocinados</span>
</label>
</form>
</div>
<div style="margin-left: 30px;" class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label">
<input type="checkbox" class="form-check-input all 1015" name="e" value="1028" rel="cat" id="1015">
<span class="nome-filtro">Produção de conteúdo</span>
</label>
</form>
</div>
<div class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="e" value="1029" rel="all">
<span class="nome-filtro">Converter</span>
</label>
</form>
</div>
<div style="margin-left: 30px;" class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label">
<input type="checkbox" class="form-check-input all 1029" name="e" value="1030" rel="cat" id="1029">
<span class="nome-filtro">Otimização (A/B Tests)</span>
</label>
</form>
</div>
<div style="margin-left: 30px;" class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label">
<input type="checkbox" class="form-check-input all 1029" name="e" value="1031" rel="cat" id="1029">
<span class="nome-filtro">Páginas de Conversão (Landing Pages)</span>
</label>
</form>
</div>
<div class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="e" value="1032" rel="all">
<span class="nome-filtro">Relacionar</span>
</label>
</form>
</div>
<div style="margin-left: 30px;" class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label">
<input type="checkbox" class="form-check-input all 1032" name="e" value="1033" rel="cat" id="1032">
<span class="nome-filtro">CRM e Vendas</span>
</label>
</form>
</div>
<div style="margin-left: 30px;" class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label">
<input type="checkbox" class="form-check-input all 1032" name="e" value="1034" rel="cat" id="1032">
<span class="nome-filtro">Email Marketing</span>
</label>
</form>
</div>
<div style="margin-left: 30px;" class="form-check">
<form method="POST" action="" name="formCat">
<label class="form-check-label">
<input type="checkbox" class="form-check-input all 1032" name="e" value="1035" rel="cat" id="1032">
<span class="nome-filtro">Facebook</span>
</label>
</form>
</div>
</div>
<!--- fim filtros -- >
<! --- Materiais --->
<div class="col-md-8 material-container">
<div class="col-sm-6 col-md-4 col-lg-3 mat 667 1026">
<a href="#">
<div class="destaque"></div>
<figure class="capa">
<img title="Webinar RS Submit" alt="Baixe Webinar RS Submit" src="http://localhost:8080/clikss/uploads/800/2017/10/webinar-rs-submit.jpg"></figure></a><pclass="nome-material"><a href="#">
</a><a href="" title="Baixe Webinar RS Submit"> Webinar RS Submit</a>
</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mat 666 1027">
<a href="#">
<div class="destaque"></div>
<figure class="capa">
<img title="E-book marketing digital" alt="Baixe E-book marketing digital" src="http://localhost:8080/clikss/uploads/800/2017/10/e-book-marketing-digital.png"></figure></a><pclass="nome-material"><a href="#">
</a><a href="" title="Baixe E-book marketing digital"> E-book marketing digital</a>
</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mat 666 1027">
<a href="#">
<div class="destaque"></div>
<figure class="capa">
<img title="Como fazer campanhas no facebook" alt="Baixe Como fazer campanhas no facebook" src="http://localhost:8080/clikss/uploads/800/2017/10/como-fazer-campanhas-no-facebook.png"></figure></a><pclass="nome-material"><a href="#">
</a><a href="" title="Baixe Como fazer campanhas no facebook"> Como fazer campanhas no facebook</a>
</p>
</div>
</div>
<! --- fim Materiais --->
Jquery:
$(function () {
$("#filters :checkbox").click(function () {
var action = $(this).attr('rel');
var cat_id = $(this).val();
$.ajax({
url: 'ajax/ajax.php',
data: {action: action, cat_id: cat_id},
type: 'POST',
dataType: 'json',
beforeSend: function () {
$("div.mat").hide();
},
success: function (data) {
$("#filters :checkbox:checked").each(function () {
$("." + $(this).val()).show();
});
}
});
});
});
The example we have to follow would be this link
According to the artual code what should I do to get the same result as the example?.
Thanks to everyone, I'm willing to try to explain better.