tags:

views:

149

answers:

1

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 */
+1  A: 

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>";
Josh
updated the question with the code. please check.
fuz3d
Cool. Updated answer with code :-)
Josh
thanks. i modified the code, but now it's giving me an sql error. `Error:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '-5,5' at line 1` i'm assuming this has got something to do with the modifications in ajax?
fuz3d
The page passed to showPage must be -5 somewhere...
Josh
k cool, it works now. i changed the value of page from 0 to 1 in ajax.
fuz3d