Hello guys, I'm doing a pagination for my site, and I'm having some problems
with my selectors...
In my site I have a #box div and inside this div I call by ajax my
guestbook, which contains a pagination, it's already working, but I'm having
TWO problems:
#1 - My #loading div seems that's not appearing when I open the #box div (It
should appears while loading the data)
#2 - I could not highlight the current page which is displaying the messages
(If user is at page 1, the link for the page 1 should have a different
color, and other stuff)
I'm testing all locally, in my Apache server.
Here goes the code for my INDEX.PHP file:
<div id="box">
<!-- ajax will load the content... -->
<div id="loading"><img src="imgs/loader.gif" alt="carregando" />Carregando
dados...</div>
</div><!-- End boxes area -->
INDEX.PHP also contains this js:
$('a.menuGuestbook').click(function() {
$('#box').show('slow');
$('#box').load('guestbook/guestbook.php?page=1', Hide_Load());
return false;
});
$('#close').live('click', function() {
$('#box').hide('slow');
return false;
});
// ----------------------- show and hide loading -------------------------
//Display Loading Image
function Display_Load() {
$('#box #loading').fadeIn('slow');
$('#box #loading').html("");
}
//Hide Loading Image
function Hide_Load() {
$('#box #loading').fadeOut('slow');
}
// ---------------------- ajax' calls -------------------------------------
//Default Starting Page Results
$("#paginacao li:first")
.css({'color' : '#FF0084'}).css({'border' : 'none'});
Display_Load();
//Pagination Click
$('#pagination li').live('click',function() {
Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #DDD 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$("#box").load("guestbook/guestbook.php?page="+pageNum, Hide_Load());
});
Inside my GUESTBOOK.PHP file I have a div called "paginacao", here goes the
code:
<div id="paginacao">
<?php
$per_page = 2;
$sql = "select * from tb_guestbook";
$result = mysql_query($sql);
$count = mysql_num_rows($result);
$pages = ceil($count/$per_page)
?>
<ul id="pagination">
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++) {
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
</ul>
</div>
Thanks for help!!