Home/ Questions/Q 790647
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T21:42:56+00:00

i’m calling the search.php page via ajax to search.html. the problem is, since i’ve

  • 0

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-align: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 .= "&nbsp;";
            $first = "&nbsp;";
        }

       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 .= "&nbsp;";
             $last = "&nbsp;";
        }

        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 */
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>";
    • 0