-1
I’m having a problem with jquery, actually I don’t have much practice with jquery, but work with ajax and json for database query and data return.
Well I have a page that the client wants me to take example: https://resultadosdigitais.com.br/materiais-educativos/ , on the left side we have the filters, Format, Category and Level of learning, at each checkbox we click I display the material of their respective category, so far I’m doing an ajax for validation and return json and display in jquery the materials that have the id of the returned category via json.
The problem is the parent categories I can not return all children materials and when I uncheck checkebox, I can not return all results, I know I am bad to explain more anyway follows the code. Disregard php are only classes I use to do 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><p class="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><p class="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><p class="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 https://resultadosdigitais.com.br/materiais-educativos/
According to the artual code what I should do to achieve the equal result of the example?.
Thank you all I am willing to try to explain better.
Good afternoon, as it is a question of Javascript, it would be better if you put the HTML code generated by PHP. To facilitate the understanding of the code.
– Rafael Marcos
OK thanks, I updated the code.
– Diego Macedo