create Hide effect and news link show with classes and ajax

Question

I have the class that retrieves data from the bank

public function ListAjNot(){
    try{
        $lernot = "SELECT tit_postjauport, pos_postjauport FROM noticia ";
        $listnot = $this->con->Connect()->prepare($lernot);
        $listnot->execute();
        $retListSelecionada = $listnot->fetch(PDO::FETCH_ASSOC);
        echo json_encode($retListSelecionada);
        }
     catch(PDOException $erro5){
     echo 'erro'.$erro5->getMessage();
        }
    }
}

This class is used by javascript($ajax) to retrieve data in my div :col-md-12 as shown below.

$(document).ready(function(){
    $('#col-md-12').empty();                 
    $.ajax({
        type:'post',                        //Defino o método HTTP usado
        dataType: 'json',                   //Defino tipo de retorno
        url: 'noticias.class.php',          //Defino o arquivo onde serão buscados os dados
     });
});

wanted to create a news link from the database, where the user will click on the title and below the title he will open the respective news to the link.. but this in a dynamic way... see below the screen of where the links are he brings me the information but disfigured. because I cannot put the Hide and show effect on these links and open individually.

Answer 1

1) First, you will have to make the query by ajax, passing to id of the news for your noticias.class.php know what news he will return.

2) Spend a id to the noticias.class.php it’s not that simple, but it can be done by ajax. Let’s go to the code.

3) Create a input hidden with the id of the news you want to load. With this you can transfer the value to the javascript.

<input type="hidden" value="999" id="someid" />

4) Now let’s go to the code of javascript with jquery.

    var loadid = $('#someid').val();
    $("#col-md-12" ).load( "noticias.class.php",{loadid:loadid});
    $(".clicarnoticia").on( "click", ".clicarnoticia", function (e){
        e.preventDefault();
        $(".loading-div").show();
        var page = $(this).attr("data-page");
            $('#col-md-12').empty();
            $("#col-md-12").load("noticias.class.php",{page:page,loadid:loadid}, function(){
                $(".loading-div").hide();
            });
    });

5) Now create a div with class .loading-div. When he clicks, this div will be displayed as a carrying... and then it’ll be gone.

6) In your file noticias.class.php, you must receive the ID news to add to WHERE of your consultation SQL. Of course, with proper care SQL Injection, checking if it is done with numbers only.

if(isset($_POST["loadid"])){
$loadid = filter_var($_POST["loadid"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
}
if (is_numeric($loadid)) {} else {echo '<br><center>O que você está tentando? Seu IP já foi registrado.</center>';die();}
   echo $loadid;

Remarks: every news should have a id in a input, in order to pass this value through ajax. Look at, .clicarnoticia is the hyperlink class. Now just you adapt ai in your project.

Extra tip: you can add the effects of fade of jquery, looks really nice.