Ajax returns repeated content

Asked

Viewed 270 times

1

And the following I have an ajax script that returns me an array with new data that exist in the database 1 in 1 second, this working the problem and that it always repeats me the content that is already present in the database.

Script

<script> 
$(document).ready(function() {
    setInterval(function() {
        var ultimo_post = 0;
        console.log($('#mostra_posts section').lenght);
        if ($('#mostra_posts section').lenght) {
            ultimo_post = $('#mostra_posts section').attr('id');
        }
        $.ajax({
            type: "POST",
            url: "ajax/mostra_posts.php",
            dataType: "JSON",
            data: {
                id_estabelecimento: "<?php echo $row->id; ?>",
                ultimo_post: ultimo_post
            },
            cache: false
        }).done(function(data) {
            console.log(data);
            $.each(data, function(index, value) {
                $('#mostra_posts').append(value);
            });
        }).fail(function(data) {
            console.log(data);
        });
    }, 2000); //Aqui você informa a cada quantos segundos irá fazer a requisição, no caso está 5 segundos 
});
</script>

Mostra_posts.php

<?php
header('Cache-Control: no-cache, must-revalidate'); 
//Alteramos o cabeçalho para que o retorno seja do tipo JSON 
header('Content-Type: application/json; charset=utf-8');
session_start();
require_once("../gtm/bd/funcoes.php");
ligarBd();

$id_estabelecimento = filter_input(INPUT_POST, 'id_estabelecimento', FILTER_VALIDATE_INT); 
$ultimo_post = filter_input(INPUT_POST, 'ultimo_post'); 


//Caso tenha sido informado ou carregado algum post já..., caso contrário carregara todos; 
if ($ultimo_post === 0) { 
    $result_post = mysql_query("SELECT * FROM posts WHERE estabelecimento_id = $id_estabelecimento ORDER BY data DESC"); 
    //Você não precisa quebrar as aspas, quando são aspas o PHP entende que existe uma variável em algum lugar e ele vai substitui-lá; 
} else { 
    $result_post = mysql_query("SELECT * FROM posts WHERE estabelecimento_id = $id_estabelecimento AND id_post > $ultimo_post ORDER BY data DESC"); 
    //Você não precisa quebrar as aspas, quando são aspas o PHP entende que existe uma variável em algum lugar e ele vai substitui-lá; 
}
$return = array(); 
while ($row_posts = mysql_fetch_object($result_post)) { 
    $result_user_anex = mysql_query("SELECT * FROM users_social WHERE id = $row_posts->user_id"); 
    $row_user_anex = mysql_fetch_object($result_user_anex); 
    //Você não precisa quebrar as aspas, quando são aspas o PHP entende que existe uma variável em algum lugar e ele vai substitui-lá; 
    //Aqui precisei quebrar pois estou usando apóstrofos e quando uso eles o php não interpreta as variáveis; 
    $return[] = '
    <section class="container" id='.$row_posts->id_post.' style="margin:15px 0px 0px 0px; border-top-left-radius: 2px; border-top-right-radius: 2px;"> 
        <table border="0" cellpadding="0" cellspacing="0"> 
            <tr> 
                <td valign="top"> 
                    <div style="float:left; margin:0px 0px 10px 0px; "><img width="50" height="50" src='.$row_user_anex->user_foto.'/></div> 
                    <h3 style="float:left; margin:15px 0px 0px 10px;">'.utf8_encode($row_user_anex->fb_nome).'</h3> 
                </td> 
            </tr> 
        </table> 
        <p>'.utf8_encode($row_posts->opiniao).'</p> 
        <div style="float:left; margin:0px 5px 10px 0px;"><a href="#">Gosto</a></div> 
        <div style="float:left; margin:0px 5px 10px 0px;"><a href="#" >Comentar</a></div> 
        <div style="float:left; margin:0px 5px 10px 0px;"><a href="#" onClick="post_fb<?php echo $row_posts->id_post; ?>()">Partilhar</a></div> 
        <input type="hidden" name="post_id" id="post_id" value='.$row_posts->id_post.'/> 
    </section> 
    <table border="0" bgcolor="#E9EAED" style="border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;" width="100%" cellpadding="0" cellspacing="0"> 
        <tr> 
            <td valign="top" width="10%"> 
                <div style="padding:15px 5px 5px 20px;"><img width="33" height="33" src='.$_SESSION["user_foto"].'/></div> 
            </td> 
            <td valign="top" width="90%"> 
                <div style="padding:15px 20px 15px 5px;"> 
                    <input type="text" style="width:100%; height:33px;" placeholder="Escreve um comentário..." id="comentario" name="comentario" value=""> 
                </div> 
                <input type="submit" class="submit" style="display:none;" value=" Submit Comment " /> 
            </td> 
        </tr> 
    </table> 
    '; 
} 
echo json_encode($return); 
?>
  • what do you mean? explain better

  • I have this ajax making requests every 1 second to the file mostra_posts if the id of the mostra_posts is bigger than the id of the last posts then it shows the new posts only instead it keeps repeating the content that was already in the database

  • 1

    Two things I noticed: lenght should be length, and $('#mostra_posts section') takes all the <section> inside the container, not just the last one. At least these two problems are contributing to the result.

1 answer

1

Well I’ve already solved the problem so I’m here to put the solution for another person if you have the same problem.

<script> 
$(document).ready(function() {
    setInterval(function() {
        var ultimo_post = 0;
        console.log($('#mostra_posts section').length); // Tinha lenght e o correcto e length
        if ($('#mostra_posts section:last').length) { // Aqui adicionei section:last para dizer que e o ultimo post.
            ultimo_post = $('#mostra_posts section:last').attr('id');
        }
        $.ajax({
            type: "POST",
            url: "ajax/mostra_posts.php",
            dataType: "JSON",
            data: {
                id_estabelecimento: "<?php echo $row->id; ?>",
                ultimo_post: ultimo_post
            },
            cache: false
        }).done(function(data) {
            console.log(data);
            $.each(data, function(index, value) {
                $('#mostra_posts').append(value);
            });
        }).fail(function(data) {
            console.log(data);
        });
    }, 2000); //Aqui você informa a cada quantos segundos irá fazer a requisição, no caso está 5 segundos 
});
</script>

Thank you all for your help

Browser other questions tagged

You are not signed in. Login or sign up in order to post.