[jQuery] Selectors Trouble
<span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: 13px; border-collapse: collapse; "><div>Hello guys, I'm doing a pagination for my site, and I'm having some problems with my selectors...</div>
<div>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:</div><div>#1 - My #loading div seems that's not appearing when I open the #box div
It should appears while loading the data
</div>
<div>#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
</div><div>I'm testing all locally, in my Apache server.</div>
<div>
</div><div>Here goes the code for my INDEX.PHP file:</div><div>
</div><div><div id="box"></div><div>ÂÂ Â<!-- ajax will load the content... --></div><div><span style="white-space: pre; "> </span><div id="loading"><img src="imgs/loader.gif" alt="carregando" />Carregando dados...</div> Â Â</div>
<div></div><!-- End boxes area --></div><div>
INDEX.PHP also contains this js:
</div><div>
</div><div><div>$
'a.menuGuestbook'
.click
function
{</div><div><span style="white-space: pre; "> </span>$
'#box'
.show
'slow'
;</div>
<div><span style="white-space: pre; "> </span>$
'#box'
.load
'guestbook/guestbook.php?page=1', Hide_Load
;</div><div><span style="white-space: pre; "> </span>return false;</div><div><span style="white-space: pre; "> </span>}
;</div>
<div><span style="white-space: pre; "> </span>$
'#close'
.live
'click', function
{</div><div><span style="white-space: pre; "> </span>$
'#box'
.hide
'slow'
;</div><div><span style="white-space: pre; "> </span>return false;</div>
<div><span style="white-space: pre; "> </span>}
;</div><div><span style="white-space: pre; "> </span>// ----------------------- show and hide loading -------------------------</div><div><span style="white-space: pre; "> </span>//Display Loading Image</div>
<div><span style="white-space: pre; "> </span>function Display_Load
{</div><div><span style="white-space: pre; "> </span>$
'#box #loading'
.fadeIn
'slow'
;</div><div><span style="white-space: pre; "> </span>$
'#box #loading'
.html
""
;</div>
<div><span style="white-space: pre; "> </span>}</div><div><span style="white-space: pre; "> </span>//Hide Loading Image</div><div><span style="white-space: pre; "> </span>function Hide_Load
{</div><div><span style="white-space: pre; "> </span>$
'#box #loading'
.fadeOut
'slow'
;</div>
<div><span style="white-space: pre; "> </span>}</div><div><span style="white-space: pre; "> </span>// ---------------------- ajax' calls -------------------------------------</div><div><span style="white-space: pre; "> </span>//Default Starting Page Results</div>
<div><span style="white-space: pre; "> </span>$
"#paginacao li:first"
</div><div><span style="white-space: pre; "> </span>.css
{'color' : '#FF0084'}
.css
{'border' : 'none'}
;</div>
<div><span style="white-space: pre; "> </span>Display_Load
;<span style="white-space: pre; "> </span></div><div><span style="white-space: pre; "> </span>//Pagination Click</div><div><span style="white-space: pre; "> </span>$
'#pagination li'
.live
'click',function
{</div>
<div><span style="white-space: pre; "> </span>Display_Load
;</div><div><span style="white-space: pre; "> </span>//CSS Styles</div><div><span style="white-space: pre; "> </span>$
"#pagination li"
</div><div>
<span style="white-space: pre; "> </span>.css
{'border' : 'solid #DDD 1px'}
</div>
<div><span style="white-space: pre; "> </span>.css
{'color' : '#0063DC'}
;</div><div><span style="white-space: pre; "> </span></div><div><span style="white-space: pre; "> </span>$
this
</div><div><span style="white-space: pre; "> </span>.css
{'color' : '#FF0084'}
</div>
<div><span style="white-space: pre; "> </span>.css
{'border' : 'none'}
;</div><div><span style="white-space: pre; "> </span></div><div><span style="white-space: pre; "> </span>//Loading Data</div><div>
<span style="white-space: pre; "> </span>var pageNum =Â<a href="http://this.id/" target="_blank" style="color: rgb
6, 88, 181
; ">this.id</a>;</div>
<div><span style="white-space: pre; "> </span>$
"#box"
.load
"guestbook/guestbook.php?page="
pageNum, Hide_Load
;</div><div><span style="white-space: pre; "> </span>}
;</div><div>
</div><div>Inside my GUESTBOOK.PHP file I have a div called "paginacao", here goes the code:</div>
<div>
</div><div><div><div id="paginacao"></div><div><span style="white-space: pre; "> </span><?php<span style="white-space: pre; "> </span></div><div><span style="white-space: pre; "> </span>$per_page = 2;</div>
<div><span style="white-space: pre; "> </span>$sql = "select * from tb_guestbook";</div><div><span style="white-space: pre; "> </span>$result = mysql_query
$sql
;</div><div><span style="white-space: pre; "> </span>$count = mysql_num_rows
$result
;</div>
<div><span style="white-space: pre; "> </span>$pages = ceil
$count/$per_page
</div><div><span style="white-space: pre; "> </span>?></div><div>ÂÂ Â<ul id="pagination"></div><div><span style="white-space: pre; "> </span><?php</div>
<div><span style="white-space: pre; "> </span>//Pagination Numbers</div><div><span style="white-space: pre; "> </span>for
$i=1; $i<=$pages; $i
{</div><div><span style="white-space: pre; "> </span>echo '<li id="'.$i.'">'.$i.'</li>';</div>
<div><span style="white-space: pre; "> </span>}</div><div>ÂÂ Â Â Â?></div><div>ÂÂ Â</ul></div><div></div></div><div>
</div><div>Thanks for help!!</div></div></div></span>