AJAX appear divs according to database ID (MYSQL)

2

I'm trying to make every time I press the #buttonIdUltimoItem a structured DIV to get information from the database from the newest to the oldest according to ID . The problem is always repeating the last three IDs

BUTTON:

<button type="button" id="buttonIdUltimoItem" onClick="pegaDados();" value="<?= $idUltimoItem;?>">CARREGA +</button>

SCRIPT:

  <script>

var corpo = ""; //define a variavel corpo como global


function pegaDados()
{
    var idUltimo = $("#buttonIdUltimoItem").val();
    jQuery.ajax
        ({

            url: "pegaPortifolio.php?id="+idUltimo,
            dataType: "json", //Tipo de Retorno
            success:


  <script>

var corpo = ""; //define a variavel corpo como global


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 '+data[i].menu+'" data-category="transition"><div style="padding:2.5px;"><div style="border: 1px solid #AAAAAA;"><a href="#portfolioModal54" 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;
                  }

                  monta_html(pt1);               

            }
        });

}


function monta_html(dados){

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

</script>

PegaPortifolio.php

 <?php

function fn_conexao(){

    $dbuser = "root";
    $dbpass = "";

    try {

        $pdo = new PDO('mysql:host=localhost;dbname=apixel_galeria',  $dbuser, $dbpass);
        $pdo -> setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING );
        $pdo->exec("SET CHARACTER SET utf8");//corrige os acentos na hora de gravar no BD
    } 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();

          //aqui , coloquei o limit como 2 para ficar mais facil os testes
            $sql = "SELECT * FROM portfolio WHERE id > $id ORDER BY id DESC LIMIT 3";
            $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
?>
    
asked by anonymous 18.01.2016 / 17:07

1 answer

1

This is happening because ajax is caching, so it is normal to always return the same data.

Disable caching on request > cache: false

It looks like this:

function pegaDados()
{
var idUltimo = $("#buttonIdUltimoItem").val();
jQuery.ajax
    ({
        url: "pegaPortifolio.php?id="+idUltimo,
        cache: false, // SEM CACHE
        dataType: "json", //Tipo de Retorno
        success:
        function(data) {
            console.log(data);
            var pt1 = "";
            var i = 1;
            var ultimo_id = 0;

E etc..
    
20.01.2016 / 14:03