Data-filter não carregam seis blocos como no “TODOS”

[kaiquemix 1]

Entrando em uma categoria não carrega seis blocos vindo do banco dedados como no "TODOS" só aqueles que ja foram carregados no todos.

Preciso que carregue igual no TODOS, a cada categoria carregue seis blocos de acordo com os blocos com as classes do $menu

Vejam aqui: somospixel.com/test

na aba portfolio.

MENU:

     <div class="button-group filters-button-group listado">

      <button class="button is-checked bttodos" data-filter="todos" onclick="filtrar('todos')">TODOS</button>


      <button class="button btnone btc filter" data-filter="visu" onclick="filtrar('visu')">IDENTIDADE VISUAL</button>

      <button class="button btnone" data-filter="web" onclick="filtrar('web')">DESENVOLVIMENTO WEB</button>

      <button class="button btnone btc" data-filter="grafico" onclick="filtrar('grafico')">MATERIAL GRÁFICO</button>

      <button class="button btnone"  data-filter="comu" onclick="filtrar('comu')">COMUNICAÇÃO VISUAL</button>

      <button class="button btnone btc"  data-filter="digi" onclick="filtrar('digi')">MARKETING DIGITAL</button>

    </div>

função e divs dos blocos

      function pegaDados()

        {

            var idUltimo = $("#buttonIdUltimoItem").val();

            jQuery.ajax

                ({


                    url: "pegaPortifolio.php?id="+idUltimo,

                    dataType: "json", //Tipo de Retorno

                    success:

                    function(data) {

                        console.log(data);

                        var pt1 = "";

                        var i = 1;

                        var ultimo_id = 0;


                          var size = 0, key;

                          for (key in data) {

                                if (data.hasOwnProperty(key)) size++; 


                            }


                         for(i = 0; i < size; i++){


                             pt1 +='<div class="element-item filter filtros todos  '+data[i].menu+'" data-category="transition"><div style="padding:2.5px;"><div style="border: 1px solid #AAAAAA;"><a href="#portfolioModal54" onclick="portfolioModal('+data[i].id+')" class="portfolio-link" data-toggle="modal"><img src="images/port/mini/'+data[i].imageM+'" alt="project 2"><div class="fundo-port"><h1>'+data[i].tipo+'</h1><h2>'+data[i].nome+'</h2></div></a></div></div></div>';



                             ultimo_id = data[i].id;


                             $("#buttonIdUltimoItem").val(ultimo_id);


                          }


                          monta_html(pt1);               


                    }

                });

             filtrar($('#buttonIdUltimoItem').attr('class'));


        }



        function monta_html(dados){


          $(".grid").append(dados); //joga o valor para um elemento html

        }


        </script>





                   <div class="wrap">

        <div class="grid">

              <?php

        $servidor = 'localhost';

        $banco      = '###';

        $usuario  = '####';

        $senha    = '##';

        $link     = @mysql_connect($servidor, $usuario, $senha);

        $db          = mysql_select_db($banco,$link);

        $idUltimoItem = 0;

        if(!$link)

        {

            echo "erro ao conectar ao banco de dados!";exit();

        }


        $sql = "SELECT * FROM portfolio ORDER BY id DESC limit 6";

        $query = mysql_query($sql);


        while($sql = mysql_fetch_array($query)){

        $id = $sql["id"];

        $idUltimoItem = $id;

        $nome = $sql["nome"];

        $tipo = $sql["tipo"];

        $desc = $sql["desc"];

        $menu = $sql["menu"];

        $imageM = "images/port/mini/" . $sql["imageM"];

        $imageF = $sql["imageF"];

            ?>

                  <div class="element-item filter filtros todos <?php echo "$menu";?>" data-category="transition">


                      <div style="padding:2.5px;">

                      <div style="border: 1px solid #AAAAAA;">

                           <!--<a href="#portfolioModal54" class="portfolio-link" data-toggle="modal" id="executaAjax" value="Executa ajax">-->

                           <a href="#portfolioModal54" class="portfolio-link" data-toggle="modal" onclick="portfolioModal(<?php echo $id;?>)" value="Executa ajax">

                                                    <img src="<?php echo "$imageM"?>" alt="project 2">

                              <div class="fundo-port">

                                <h1><?php echo "$tipo"?></h1>

                                <h2><?php echo "$nome"?></h2>

                            </div>


                              </a>


                          </div>


                      </div>


          </div>

                <?php

        }

        ?> 

        </div></div>

                <!-- BOTÃO CARREGAR MAIS-->

               <div id="rend-more">

                 <!-- <input type="hidden" value="0" id="ultimo_id"> campo oculto que armazena o valor do ultimo ID buscado no banco -->


                    <button  type="button" id="buttonIdUltimoItem" onClick="pegaDados();" value="<?= $idUltimoItem;?>" style="width: 262px; height: 50px; border: 1px solid rgb(84, 128, 128); position: relative; top: 30%; left: 50%; transform: translateX(-50%); cursor: pointer;  background-color: white;" class="todos">

                        <h2 style="text-align: center;color:#4d8984;font-family: 'Gotham-Thin';float: left;font-size: 25px;padding-left: 30px;padding-top: 5px;">CARREGAR</h2>

                        <h3 style="padding-left: 5px;float: left;font-size: 25px;color:#4d8984;font-family: 'gotham-bold';padding-top: 5px;">+</h3></button>

                </div> 

            </div>    

pegaPortifolio.php

    <?php


    function fn_conexao(){


        $dbuser = "apixel_admin";

        $dbpass = "pixel123";


        try {


            $pdo = new PDO('mysql:host=##;dbname=######',  $dbuser, $dbpass);

            $pdo -> setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING );

        } catch(Exception $e) {


            echo 'Erro na conexao: ' . $e->getMessage();

        }


        return $pdo;

    }


    function dados($pdo){


        try {   


                if(!isset($_GET['id']) or $_GET['id'] == null){


                    $id = 0; //se o GET nao for enviado o for enviado como nullo , a variável ID pega o valor de 0


                }else{


                    $id = $_GET['id']; //pega o valor passado via GET

                }


                $arr = array();


                $sql = "ALTER DATABASE portfolio CHARSET = UTF8 COLLATE = utf8_general_ci";

                $sql = "SELECT * FROM portfolio WHERE id < $id ORDER BY id DESC LIMIT 6";

                $stmt = $pdo->prepare($sql);

                $stmt->execute();

                $linha = $stmt->fetchAll(PDO::FETCH_ASSOC);

                if($stmt->rowCount() >= 1){


                    return $linha; //retorna o resultado da query


                }else {


                    return 0;


                }

            } catch(Exception $e) {


                print 'Erro ao inserir os dados no banco: ' . $e->getMessage();

                $conexao = desconecta($conexao);


            }

    }


    $conexao = fn_conexao();

    $dados = dados($conexao);


    $dados = json_encode($dados); //converte o resultado para json


    print $dados; //imprime os dados na tela

    ?>

[Gabriel Heming 766]

Em primeiro lugar, seu problema é javascript e não PHP.

 

Em segundo lugar, uma chamada ajax é assíncrona, dessa forma, o método filtrar não aguardará o término da chamada ajax para realizar o filtro.

 

Outro ponto, que pode ser pertinente ou não, dependendo do método javascript utilizado, elementos adicionados dinamicamente ao DOM não são reconhecidos.

 

Em terceiro lugar, qual a biblioteca que está utilizando?

[kaiquemix 1]

Desculpe, não percebi.

 

Não entendi muuutio bem ><, mas e ufiz dessa maneira que foi o unico jeito que consegui porem tem esse pequeno bug.

 

Estou usando codig bruto somente com jquery, poderia mover para a area de javascript?

[Gabriel Heming 766]

Se método filtrar é o responsável por criar os grupos da forma correta, coloque ele dentro do callback sucess ou no complete. Assim você garantirá que a função seja chamada no momento certo.

[kaiquemix 1]

Poderia me dar como fazer ?? estou um pouco confuso