Nest Virtual Pagination in an Ajax Tab

[Kev]

1) Script Title: Ajax Tabs Content Script (v 2.2) Demo 2
2) Script Title:Virtual Pagination script v2.0 Demo 3


3) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm
4) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/virtualpagination.htm

5) Describe problem:

Separately the scripts word great. When trying to combine them Virtual Pagination stops working. It simply disappears when nested in an Ajax Tab. I have tried for hours to no avail.

Basically I need to nest Virtual Pagination and call it externally to one of the Ajax Tabs.

Thank You.
Kev

[Kev]

I figured it out. I guess I was just to sleepy last night. :)

Sometimes things can be right in front of us and very simple. So, why do I always take the hard route?

I just added it through Iframe as apposed to calling it through Ajax.

[Venu12]

I have somewhat similar problem with virtual pagination. Here is the code I am working with


<?php
// database connection
require_once('./includes/base.php');

if($_GET['logout'] == 1){
@$_SESSION = array();
@session_unregister($_SESSION['userID']);
@session_unregister($_SESSION['userName']);
@session_unregister($_SESSION['userUser']);
@session_unregister($_SESSION['userPass']);
@session_destroy();
}

require("./templates/$template/header.php");

?>

<div id="blurb" align="right">

<script language="javascript">
function isClear()
{
document.myForm[0].value='';
return true;

}
</script>
<!-- new search -->
<?php
ob_start();
if(!empty($_SESSION['userID']) and !empty($_POST['user'])){
echo '<form action="search.php" method="post" name="myForm">
<input type="text" value="search here" id="search" size="20" name="search" onFocus="return isClear();"/>
<input type="submit" name="serachuser" value="search"/></form>';
}
?>
</div>
<br>
<div id="blurb" align="justify">
Hello world <?php echo "$sitename"; ?> is blah, blah, blah.......!
</div>
<br>

<div id="container-5">
<ul>
<li><a href="#fragment-13"><span>Chat, news and more</span></a></li>
<li><a href="#fragment-14"><span>Links</span></a></li>
<li><a href="#fragment-15"><span>Images</span></a></li>

</ul>
<div id="fragment-13">
<?php


$sql = mysql_query("SELECT users.userUser, posts.postID, posts.postPost, posts.postTime, posts.postComments, userAvatar FROM users, posts WHERE users.userID = posts.postUserID ORDER BY posts.postTime DESC ");
while($row = mysql_fetch_array($sql)){
$abcd= $row['userName'];
$abcd = str_replace (" ", "-", $abcd);
$time = reltime($row['postTime']);

echo '
<div class="virtualpage">
<table width="100%" >
<td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'" width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8" border=1" cellspacing="1" cellpadding="1" ><b>'.$row['postPost'].'</b><br>Posted by:&nbsp;'.$row['userUser'].',&nbsp;<a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['postID'].'">Comments</a>&nbsp;'.$row['postComments'].' ,&nbsp;Time elapsed:&nbsp; '.$time.'</a></td>
</table><br>

</div>';}




?>

<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>


</div>


</div>



</div>


<div id="fragment-14">
<?php

$sql = mysql_query("SELECT users.userUser, links.linksID, links.linksLink, links.linksPost, links.linksTime, links.linksComments,userAvatar FROM users, links WHERE users.userID = links.linksUserID ORDER BY links.linksTime DESC");
while($row = mysql_fetch_array($sql)){
$abcd= $row['userName'];
$abcd = str_replace (" ", "-", $abcd);
$time1 = reltime($row['linksTime']);

echo '
<div class="virtualpage">
<table width="100%" >
<td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'" width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8" border=1" cellspacing="1" cellpadding="1" ><b>'.$row['linksPost'].'</b><br>Posted by:&nbsp;'.$row['userUser'].',&nbsp;<a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['linksID'].'">Comments</a>&nbsp;'.$row['linksComments'].' ,&nbsp;Time elapsed:&nbsp; '.$time1.'</a></td>
</table><br>

</div>';}

?>


<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>


</div>
<div id="fragment-15">
<?php
// testing
grabimages('SELECT users.userUser, images.imagesID, images.imagesFile, images.imagesPost, images.imagesTime, images.imagesComments FROM users, images WHERE users.userID = images.imagesUserID ORDER BY images.imagesTime DESC LIMIT 20');

?>

</div>
</div>








<?php

// Display footer
require("./templates/$template/footer.php");
?>

<table align="center"><tr><td align="center">
<script type="text/javascript" defer="defer">
var gallery=new virtualpaginate("virtualpage",10)
gallery.buildpagination("gallerypaginate")
</script>
</td></tr></table>




When I place:


<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>

in <div id="fragment-13"> </div> it shows up in all other <div> ids. How do I stop this? I would like to paginate each tab sepaarately.

[jdedering]

I'm working on the same problem as the original poster but using an iframe isn't possible because of the way I am managing my content. Has anyone figured out this problem?


I'm trying to find a way to designate which, of seven, <select> fields is chosen. I'm trying to do this by creating seven individual virtualpaginate.js pages (virtualpaginate.js, virtualpaginate2.js, virtualpaginate3.js, ... etc).

Please help!