textbox disappears in paging - php
i'm calling the search.php page via ajax to search.html. the problem is, since i've implemented paging, the textbox with the search keyword from search.html 'disappears' when the user clicks the 'Next' button [because the page goes to search.php which has no textbox element]
i'd like the textbox with the search keyword to be there, when the user goes through the records via paging. how'd i achieve this?
search.html:
<body>
<form name="myform" class="wrapper">
<input type="text" name="q" onkeyup="showPage();" class="txt_search"/>
<input type="button" name="button" onclick="showPage();" class="button"/>
<p>
<div id="txtHint"></div>
<div id="page"></div>
</form>
</body>
search.php [the relevant part]:
$self = $_SERVER['PHP_SELF'];
$limit = 5; //Number of results per page
$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="caption">Search Results</div>
<div class="center_div">
<table>
<?php while ($row= mysql_fetch_array($result, MYSQL_ASSOC)) {
$cQuote = highlightWords(htmlspecialchars($row['cQuotes']), $search_result);
?>
<tr>
<td style="text-ali开发者_如何学Cgn:right; font-size:15px;"><?php h($row['cArabic']); ?></td>
<td style="font-size:16px;"><?php echo $cQuote; ?></td>
<td style="font-size:12px;"><?php h($row['vAuthor']); ?></td>
<td style="font-size:12px; font-style:italic; text-align:right;"><?php h($row['vReference']); ?></td>
</tr>
<?php } ?>
</table>
</div>
<?php
//Create and print the Navigation bar
$nav="";
if($page > 1) {
$nav .= "<a href=\"$self?page=" . ($page-1) . "&q=" .urlencode($search_result) . "\">< Prev</a>";
$first = "<a href=\"$self?page=1&q=" .urlencode($search_result) . "\"><< First</a>" ;
}
else {
$nav .= " ";
$first = " ";
}
for($i = 1 ; $i <= $numpages ; $i++) {
if($i == $page) {
$nav .= "<B>$i</B>";
}else{
$nav .= "<a href=\"$self?page=" . $i . "&q=" .urlencode($search_result) . "\">$i</a>";
}
}
if($page < $numpages) {
$nav .= "<a href=\"$self?page=" . ($page+1) . "&q=" .urlencode($search_result) . "\">Next ></a>";
$last = "<a href=\"$self?page=$numpages&q=" .urlencode($search_result) . "\">Last >></a> ";
}
else {
$nav .= " ";
$last = " ";
}
echo "<br /><br />" . $first . $nav . $last;
}
ajax.js:
var xmlHttp
function showPage(str)
{
var str = document.myform.q.value;
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="search.php";
url += "?q="+str+"&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
function GetXmlHttpObject() {
var xmlHttp=null;
try {
// For these browsers: Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
//For Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
} //end function */
Your next and previous links need to use AJAX as well.
I'd provide a code sample but you didn't provide the code you're using to fetch search.php via AJAX. If you post your AJAX code I can demonstrate the changes you need to make to fetch the next and previous pages via AJAX.
EDIT: I would modify the showPage function to accept a page number, and make the next and previous links call that:
function showPage(str,page)
{
var str = document.myform.q.value;
if(typeof page == 'undefined')
page = 0;
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="search.php";
url += "?q="+str+"&page="+page+"&list=";
url += "&sid="+Math.random();
...
Then, your page links should look like:
$nav .= "<a onclick=\"showPage('',$i); return false;\" href=\"$self?page=$i&q=" .urlencode($search_result) . "\">$i</a>";
加载中,请稍侯......
精彩评论