Search code examples
jquerynavigationreload

Navigation Bar without Refreshing page content

I have the following link structure (navigation bar) on a page:

<table border="0">
  <tr>
    <td><?php if ($pageNum_get_thumbs > 0) { // Show if not first page ?>
        <a href="<?php printf("%s?pageNum_get_thumbs=%d%s", $currentPage, 0, 
    $queryString_get_thumbs); ?>"><img src="First.gif" /></a>
        <?php } // Show if not first page ?></td>
     <td><?php if ($pageNum_get_thumbs > 0) { // Show if not first page ?>
        <a href="<?php printf("%s?pageNum_get_thumbs=%d%s", $currentPage, 
     max(0, $pageNum_get_thumbs - 1), $queryString_get_thumbs); ?>"><img 
    src="Previous.gif" /></a>
        <?php } // Show if not first page ?></td>
    <td><?php if ($pageNum_get_thumbs < $totalPages_get_thumbs) { // Show if 
     not last page ?>
        <a class="nav_link" href="<?php printf("%s?pageNum_get_thumbs=%d%s", 
   $currentPage, min($totalPages_get_thumbs, $pageNum_get_thumbs + 1), 
   $queryString_get_thumbs); ?>"><img src="Next.gif" /></a>
        <?php } // Show if not last page ?></td>
    <td><?php if ($pageNum_get_thumbs < $totalPages_get_thumbs) { // Show if 
   not last page ?>
        <a href="<?php printf("%s?pageNum_get_thumbs=%d%s", $currentPage, 
        $totalPages_get_thumbs, $queryString_get_thumbs); ?>"><img 
     src="Last.gif" /></a>
        <?php } // Show if not last page ?></td>
  </tr>
</table>

Is there any way that one can click on any of the links without refreshing the entire page? This is what it looks like on the page:

Thumbnail navigation bar

I have tried Ajax (onclick GET method) and other suggestion from various sites, but I am having no luck.

Solution

  • Bind click event to link and pass javascript:void(0) in href. as shown below, This will stop refreshing of the page.

    <a href="javascript:void(0)" onclick="yourFunction(params)"><img src="First.gif" /></a>

    and create yourFunction(params) in the code.

    javascript:void(0) will stop page refreshing. And onclick will get fired once you click the link, You can write your remaining logic there.

    You can write link like shown below.

    <a href="javascript:void(0)" onclick="yourFunction(<?php printf("%s?pageNum_get_thumbs=%d%s", $currentPage, 0, 
    $queryString_get_thumbs); )"><img src="First.gif" /></a>

    And function like below.

    function yourFunction(params){

window.location.href = params;// or any other logic as per your requiriement;
}