twan twan - 4 months ago 17
Ajax Question

Only animate on last loaded items (ajax loadmore)

I got a page which shows some items, when you press a button more items are loaded. The entire div wrapping the items has a class to it that makes it animate.

My problem:

When you press the button, the entire script is loaded again through ajax (with an added limit in the query) so all of them animate again.

Is it possible to only make the newly loaded items animate? Maybe by counting what new items are loaded or something.

I can't really wrap my head around on how to do this, maybe someone can help me on the way.

The animate class is called: FadeIn

My php script:

<?PHP
class Connection {
// Configure Database Vars
private $host = 'localhost';
private $username = 'name';
private $password = 'pass';
private $db_name = 'db';
public $dbase;

function __construct() {
// Create connection
$db = new mysqli($this->host, $this->username, $this->password, $this->db_name);

// Check connection
if ($db->connect_errno > 0) {
die('Unable to connect to the database: '.$db->connect_error);
}

$this->db = $db;
}

public function query($query) {
$db = $this->db;
$this->db->query('SET NAMES utf8');
if (!$result = $this->db->query($query)) {
die('There was an error running the query ['.$db->error.']');
} else {
return $result;
}
}

public function multi_query($query) {
$db = $this->db;
if (!$result = $this->db->multi_query($query)) {
die('There was an error running the multi query ['.$db->error.']');
} else {
return $result;
}

}

public function real_escape_string($value) {
return $this->db->real_escape_string($value);
}

public function inserted_id() {
return $this->db->insert_id;
}
}

$conn = new Connection;

// Websites
$web = "SELECT * FROM `name` WHERE catid = 9 AND state = 1 ORDER BY ordering LIMIT 0,".$_POST['limit']."";
$webcon = $conn->query($web);
$webcr = array();
while ($webcr[] = $webcon->fetch_array());

foreach($webcr as $website){
$web_images = $website['images'];
$web_imgs = json_decode($web_images);

if($website['title'] != ''){
if($web_imgs->{'image_intro'}){
$weboverzicht .= '
<div class="col-md-4 wow fadeIn" data-wow-duration="2s" style="padding:0px">
<div class="post">
<div class="post-heading">
<a style="max-height: 220px;" class="post-image" href="'.$website['alias'].'.html">
<img class="websiteimg" src="cms/'.$web_imgs->{'image_intro'}.'" class="" alt="post" />
</a>
</div>
<div class="post-body" style="min-height:70px;border:none;">
<a href="'.$website['alias'].'.html"><h5>'.$website['title'].'</h5></a>
<p class="lijnhoogte">'.strip_tags($website['introtext']).'</p>
<p class="bekijkproject2"><a class="infolink" href="'.$website['alias'].'.html">Bekijk project</a></p>
</div>
</div>
</div>';
}else{
$weboverzicht .= '
<div class="col-md-4 wow fadeIn" data-wow-duration="2s" style="padding:0px">
<div class="post">
<div class="post-heading">
<a style="max-height: 220px;" class="post-image" href="'.$website['alias'].'.html">
<img class="websiteimg" src="image.jpg" class="" alt="post" />
</a>
</div>
<div class="post-body" style="min-height:70px;border:none;">
<a href="'.$website['alias'].'.html"><h5>'.$website['title'].'</h5></a>
<p class="lijnhoogte">'.strip_tags($website['introtext']).'</p>
<p class="bekijkproject2"><a class="infolink" href="'.$website['alias'].'.html">Bekijk project</a></p>
</div>
</div>
</div>';
}
}
}
echo $weboverzicht;
?>


My ajax file:

(function(){
/*
Meer websites laden
*/
var limit = 3;

$('#loadmore').click(function() {
limit += 3;

ajax();

});

var posts = document.getElementById('loadnews');

function ajax() {
$.ajax({
url: 'includes/loadmore.php',
type: "POST",
data: {limit: limit},
success: function(data){
loadnews.innerHTML = data;
},
error: function(jqXHR, exception) {
if (jqXHR.status === 0) {
alert('Not connect.\n Verify Network.');
} else if (jqXHR.status == 404) {
alert('Requested page not found. [404]');
} else if (jqXHR.status == 500) {
alert('Internal Server Error [500].');
} else if (exception === 'parsererror') {
alert('Requested JSON parse failed.');
} else if (exception === 'timeout') {
alert('Time out error.');
} else if (exception === 'abort') {
alert('Ajax request aborted.');
} else {
alert('Uncaught Error.\n' + jqXHR.responseText);
}
}
});
}

ajax();
}());

Answer
  1. get familiar with offset http://www.w3schools.com/php/php_mysql_select_limit.asp

2.

success: function(data){
    var newWrapper = document.createElement('div')
    //add class to newWrapper or whatever
    newWrapper.innerHTML=data;
    loadnews.appendChild(newWrapper)
}