create hide effect and news link show with classes and ajax

2

I have a 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 :col-md-12 div 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
     });
});

I wanted to create a news link from the database, where the user will click on the title and below the title it will open the respective notice to the link..but this dynamically ... see below the screen where they are the links it brings me the information however unconfigured. because I can not put the hide and show effect on these links and open individually.

    
asked by anonymous 29.06.2017 / 02:46

1 answer

1

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

2) Passing id to noticias.class.php is not so simple, but can be done by ajax . Let's go to the code.

3) Create a input hidden with id of the news you want to upload. This will allow you to transfer the value to javascript .

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

4) Now let's go to the javascript code 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 it clicks, this div will be displayed as a loading ... and then it will disappear.

6) In your noticias.class.php file, you should receive the ID of the news to add to WHERE of your SQL query. Of course, with the care with 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;

Notes: Each news item must have id in input , so you can pass this value through ajax . You see, .clicarnoticia is the hyperlink class. Now you just need to adapt there in your project.

Extra hint: You can add the fade effects of jquery , it looks pretty good.

    
29.06.2017 / 04:00