Como atualizar conteúdo ao clicar

Front-end JavaScript
,
#1

Olá galera, eu tenho uma página que trabalha com filtros, e preciso saber como atualizar somente o conteúdo (ou seja a div) quando a opção do filtro for clicada.

Esse é meu código no HTML:

section class="cd-gallery">
                ul>
                   li class="mix color-1 color-3 color-uncharted 4 a thief's end check1 radio2 option3"><a href="#">img src="images/Produtos/Jogos/PlayStation4/uncharted4-a-thiefs-end.png" alt="Image 1"></a>p class="descricao">Uncharted 4 - A Thief's End</p>
                    p class="preco">R$ 350,00</p></li>
                   <li class="mix color-2 color-fifa 17 check1 radio2 option2"><a href="#">img src="images/Produtos/Jogos/PlayStation4/fifa-17.jpg" alt="Image 2"></a>p class="descricao">FIFA 17</p>
                    p class="preco">R$ 350,00</p></li>
                   <li class="mix color-1 color-gran turismo sport check1 radio3 option1"><a href="#">img src="images/Produtos/Jogos/PlayStation4/gran-turismo-sport.jpg" alt="Image 3"></a>p class="descricao">Gran Turismo Sport</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-1 color-no man's sky check1 radio2 option4"><a href="#">img src="images/Produtos/Jogos/PlayStation4/no-mans-sky.jpg" alt="Image 4"></a>p class="descricao">No Man's Sky</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-1 color-horizon zero dawn check1 radio3 option2"><a href="#">img src="images/Produtos/Jogos/PlayStation4/horizon-zero-dawn.jpg" alt="Image 5"></a>p class="descricao">Horizon Zero Dawn</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-2 color-street fighter v check1 radio3 option3"><a href="#">img src="images/Produtos/Jogos/PlayStation4/street-fighter-v.jpg" alt="Image 6"></a>p class="descricao">Street Fighter V</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-2 color-quantum break check1 radio2 option1"><a href="#">img src="images/Produtos/Jogos/PlayStation4/bloodborne.jpg" alt="Image 7"></a>p class="descricao">Bloodborne</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-1 color-tom clancy's the division limited edition check1 radio3 option4"><a href="#">img src="images/Produtos/Jogos/PlayStation4/the-last-guardian.jpg" alt="Image 8"></a><p class="descricao">The Last Guardian</p
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-2 color-f1 2016 check2 radio2 option3"><a href="#">img src="images/Produtos/Jogos/XboxOne/quantum-break.png" alt="Image 9"></a>p class="descricao">Quantum Break</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-1 color-for honor check2 radio2 option4"><a href="#">img src="images/Produtos/Jogos/XboxOne/tom-clancy-s-the-division-limited-edition.jpg" alt="Image 10"></a><p class="descricao">Tom Clancy's The Division Limited Edition/p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-1 color-dark souls III check2 radio3 option2"><a href="#">img src="images/Produtos/Jogos/XboxOne/dark-souls-iii.jpg" alt="Image 11"></a>p class="descricao">Dark Souls III</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-2 color-nba 2k 2016 check2 radio3 option1"><a href="#">img src="images/Produtos/Jogos/XboxOne/nba2k16.jpg" alt="Image 12"></a>p class="descricao">NBA 2K16</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-2 color-f1 2016 check2 radio2 option3"><a href="#">img src="images/Produtos/Jogos/XboxOne/f12016.png" alt="Image 9"></a>p class="descricao">F1 2016</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-1 color-for honor check2 radio2 option4"><a href="#">img src="images/Produtos/Jogos/XboxOne/for-honor.jpg" alt="Image 10"></a>p class="descricao">For Honor</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-1 color-dark souls III check2 radio3 option2"><a href="#">img src="images/Produtos/Jogos/XboxOne/homefront-the-revolution.jpg" alt="Image 11"></a>p class="descricao">Homefront: The Revolution</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-2 color-nba 2k 2016 check2 radio3 option1"><a href="#">img src="images/Produtos/Jogos/XboxOne/lichdom-battlemage.jpg" alt="Image 12"></a>p class="descricao">Lichdom: Battlemage</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-2 color-super mario maker check3 radio2 option1"><a href="#">img src="images/Produtos/Jogos/Nintendo/super-mario-maker.jpg" alt="Image 7"></a>p class="descricao">Super Mario Maker</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-1 color-mario tennis ultra smash check3 radio3 option4"><a href="#">img src="images/Produtos/Jogos/Nintendo/mario-tennis-ultra-smash.jpg" alt="Image 8"></a><p class="descricao">Mario Tennis Ultra Smash</p
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-2 color-skylanders superchargers check3 radio2 option3"><a href="#">img src="images/Produtos/Jogos/Nintendo/rodea-the-sky-soldier.jpg" alt="Image 9"></a>p class="descricao">Rodea The Sky Soldier</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-1 color-super smash bros check3 radio2 option4"><a href="#">img src="images/Produtos/Jogos/Nintendo/mighty-no-9.jpg" alt="Image 10"></a>p class="descricao">Mighty No.9</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-1 color-rodea the sky soldier check3 radio3 option2"><a href="#">img src="images/Produtos/Jogos/Nintendo/skylanders-superchargers.jpg" alt="Image 11"></a>p class="descricao">Skylanders Superchargers</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-2 color-lego star wars the force awakens check3 radio3 option1"><a href="#">img src="images/Produtos/Jogos/Nintendo/super-smash-bros.png" alt="Image 12"></a>p class="descricao">Super Smash Bros</p>
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-2 color-lego star wars the force awakens check3 radio3 option1"><a href="#">img src="images/Produtos/Jogos/Nintendo/lego-marvel-avengers.jpg" alt="Image 12"></a><p class="descricao">LEGO Marvel Avengers</p
                    p class="preco">R$ 350,00</p></li>
                    li class="mix color-2 color-lego star wars the force awakens check3 radio3 option1"><a href="#">img src="images/Produtos/Jogos/Nintendo/lego-star-wars-the-force-awakens.png" alt="Image 12"></a><p class="descricao">LEGO Star Wars The Force Awakens</p
                    p class="preco">R$ 350,00</p></li>
                    li class="gap"></li>
                    li class="gap"></li>
                    li class="gap"></li>
                /ul>
            /section> <!-- cd-gallery -->

Se precisar do filtro eu mando. Agradeço desde já

#2

terá que da uma lida sobre java script, basicamente você constroi um corpo http e envia a requisição, modifica para onde vai e quando retornar seu status você ira verificar o conteudo, desta maneira atualizando a informação, caso esteja trabalhando com servidor… Assim sendo usara ajax.

https://www.w3schools.com/xml/ajax_intro.asp
ou
https://www.w3schools.com/jquery/jquery_ajax_get_post.asp

caso queira somente colocar alguma informação manualmente, só usar o metodo onClick() exemplo,

<textfield id="campoTexto" column="50" row="50"/>
<button onclick="metodo()" value="click"/>

<script>
        function metodo() {
                document.getElementById("campoTexto").innerHTML = "hello";
         }
</script>

não há muito segredo, no caso do botão, só chamei um evento no botão, que no caso é o click do mouse, e ele chamou a function método, neste método requisitava que se fosse encontrado na DOM um elemento com o id “campoTexto” ele modificaria se corpo com “hello”, nem sei se a function ira funcionar, só serve como exemplo mesmo. xD.

#3

olha mano, sobre a função do botão até matou uma duvida minha, mas o que eu preciso mesmo é atualizar um bloco apertando um botão, ou seja , adicionar uma função no botão que faça não a página atualizar, mas sim o bloco ou a div.

#4

Entre client vs. servidor via JQUERY

https://www.w3schools.com/jquery/jquery_ajax_get_post.asp
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_load

$("button").click(function(){
    $.get("demo_test.asp", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

caso você queira somente atualizar uma informação ao clicar, o código já se encontra a baixo, mas se você não entendeu é porque precisa estudar javascript.

<textfield id="campoTexto" column="50" row="50"/>
<button onclick="metodo()" value="click"/>

<script>
        function metodo() {
                document.getElementById("campoTexto").innerHTML = "hello";
         }
</script>
#5

brother, eu coloquei um código de atualizar conteúdo usando js, que é:

$(document).ready(function(){
        $("input[type=radio]").click(function(event) {
            $(".cd-gallery ul").load('consoles.html',aviso());
        });
});
function aviso(){
	alert("O conteúdo será carregado agora!");
}

Só que infelizmente, para fazer o código funcionar eu precisei colocar uma página dentro do .load(), e eu queria saber como atualizar o conteúdo sem precisar colocar dentro do .load() um página, ou seja, dentro da própria página.

#6

Se você não colocar como responder, a pessoa não recebe aviso kkk.

com js você faz tudo https://www.w3schools.com/xml/ajax_intro.asp, eu ainda não utilizo framework, quando estiver melhor partirei para cima. Entrando neste link você terá explicação de como utiliza-lo, mas recomendo que estude todo o java script, se não fica dificil entender sua implementação.