views:

27

answers:

1

i've a search form in which a user enters the keyword and the results are displayed with pagination. everything works fine except for the fact that when the user clicks on the 'Next' button, the pagination panel disappears as well when the page loads to retrieve the data through ajax.

how do i make the pagination panel static, while the data is being retrieved?

search.html:

  <form name="myform" class="wrapper">
      <input type="text" name="q" id="q" onkeyup="showPage();" class="txt_search"/>
      <input type="button" name="button" onclick="showPage();" class="button"/>
      <p> </p>
        <div id="txtHint"></div>

    </form>

ajax:

var url="search.php";
url += "?q="+str+"&page="+page+"&list=";
url += "&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);

function stateChanged(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
} //end if
} //end function

search.php:

 $self = $_SERVER['PHP_SELF'];
            $limit = 3; //Number of results per page
            $adjacents = 2;
            $numpages=ceil($totalrows/$limit);

            $query = $query." ORDER BY idQuotes LIMIT " . ($page-1)*$limit . ",$limit";
            $result = mysql_query($query, $conn)
             or die('Error:' .mysql_error());
?>

<div class="search_caption">Search Results</div>
<div class="search_div">
<table class="result">
    <?php while ($row= mysql_fetch_array($result, MYSQL_ASSOC)) {
        $cQuote =  highlightWords(htmlspecialchars($row['cQuotes']), $search_result);
        ?>
        <tr>
        . . .display results. . .
        </tr>
    <?php } ?>
</table>
</div>

<hr>
<div class="searchmain">
<?php
   //Create and print the Navigation bar
       $nav="";
       $next = $page+1;
       $prev = $page-1;
       if($page > 1) {
            $nav .= "<a onclick=\"showPage('','$prev'); return false;\" href=\"$self?page=" . $prev . "&q=" .urlencode($search_result) . "\">< Prev</a>";

            $first = "<a onclick=\"showPage('','1'); return false;\" href=\"$self?page=1&q=" .urlencode($search_result) . "\"> << </a>" ;
        }

        else {
            $nav .= "&nbsp;";
            $first = "&nbsp;";
        }

       for($i = 1 ; $i <= $numpages ; $i++) {
            if($i == $page) {
                $nav .= "<span class=\"no_link\">$i</span>";
            }else{
                $nav .= "<a onclick=\"showPage('',$i); return false;\" href=\"$self?page=" . $i . "&q=" .urlencode($search_result) . "\">$i</a>";
            }
        }

        if($page < $numpages) {
            $nav .= "<a onclick=\"showPage('','$next'); return false;\" href=\"$self?page=" . $next . "&q=" .urlencode($search_result) . "\">Next ></a>";

            $last = "<a onclick=\"showPage('','$numpages'); return false;\" href=\"$self?page=$numpages&q=" .urlencode($search_result) . "\"> >> </a>";
        }

        else {

             $nav .= "&nbsp;";
             $last = "&nbsp;";
        }

        echo  $first . $nav . $last;
?>

</div>
A: 

Not sure what you mean. Just change the result table not the whole page in showPage function.

Nux
please elaborate.
fuz3d
Well, assuming you make an AJAX call in showPage(), then after reciving data you can change the active page state with JS and only change the table (you might want to id to it for easier look up). You might also want to use some AJAX library - like sajax or something like that to get a cleanr code.
Nux