Jquery Pagination & HREF problem

Page 1 of 1

4 Replies - 40739 Views - Last Post: 03 October 2011 - 01:32 PM

#1 umerkk   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 03-October 11

Jquery Pagination & HREF problem

Posted 03 October 2011 - 10:37 AM

hello.
i have developed a php based search page, that search from database and it has php based pagination,
and from my index page, i am calling that search page using jquery into the resutlist div tag.

it all works fine till now,
but when i click on next of the pagination link, it took me to the search result page,
what i want , is a way that the next href of search page (php pagination) to be called and show its result on the same div tag, without refreshing that page,,


On my index page, i have this code to search and fetch result to resultlist div tag. 
$(document).ready(function(){ 
        $('#search').click(function() { 
        $('#resultlist').html('Loading, Please wait....'); 
                var searchVal = $('#q').val(); 
                $.ajax({ 
                        type: 'GET', 
                        url: 'do_search.php', 
                        data: 'keyword=' + searchVal, 
                        dataType: 'html', 
                        
                        success: function(response) { 
                                $('#resultlist').html(response); 
                                tb_init('a.thickbox'); 
                        } 
                }); 
        }); 
        
        });


and on my search page, the next href pass some querystrings like
http://localhost/do_...h.php?pagenum=2


now, all i need is that the http://localhost/saa...h.php?pagenum=2 <-- this link to be load into that resutlist without redirection or anythign else.

remeber, the next link is on the search page, that is called asynchornously using jquery.


Looking forward to hear from you soon

Is This A Good Question/Topic? 0
  • +

Replies To: Jquery Pagination & HREF problem

#2 Jstall   User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: Jquery Pagination & HREF problem

Posted 03 October 2011 - 12:30 PM

Hi,

What is happening now? Are you getting the "Loading, Please wait...." message?

If #search is a link you may want to include 
return false;

At the bottom of your click event handler to prevent the default action of clicking the link.
Was This Post Helpful? 0
  • +
  • -

#3 umerkk   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 03-October 11

Re: Jquery Pagination & HREF problem

Posted 03 October 2011 - 12:41 PM

No, at first search, the search results loads on the specified DIV.
but i have pagination on that result page, that is being fetched to that div, and if i click on those links, it navigate me to the actual result page.. i want somehow to make those link also load on the results div,

i m new to this, so i dont get code very easily
Was This Post Helpful? 0
  • +
  • -

#4 Jstall   User is offline

  • Lurker
  • member icon

Reputation: 434
  • View blog
  • Posts: 1,042
  • Joined: 08-March 09

Re: Jquery Pagination & HREF problem

Posted 03 October 2011 - 01:05 PM

Have you tried putting return false; at the end of your click event listener like I suggested? It sounds like right now the click is doing the default action, which is following the link. Returning false in the click handler is one way to prevent that.

Next you would want to make sure that searchVal is what you expect and that your AJAX call is returning what you expect. If you are using a web dev tool like Firebug you can view AJAX posts and responses in the console. It can be very useful when you are debugging this type of thing.
Was This Post Helpful? 0
  • +
  • -

#5 umerkk   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 03-October 11

Re: Jquery Pagination & HREF problem

Posted 03 October 2011 - 01:32 PM

Hello,
this is what my index page looks like and this is the code of my index page, that makes the call to the search page
<script type="text/javascript">
$(document).ready(function(){
	$('#search').click(function() { 
	$('#resultlist').html('Loading, Please wait....');
		var searchVal = $('#q').val();
		$.ajax({
			type: 'GET',
			url: 'do_search.php',
			data: 'keyword=' + searchVal,
			dataType: 'html',
			
			success: function(response) {
				$('#resultlist').html(response);
				tb_init('a.thickbox');
			}
		});
	});
	
	

	
});
</script>

<body>
<input type="text" id="q" onclick="this.select()" name="q" length="200" autocomplete="off" class="yui-ac-input">
     <input type="submit" name="search" id="search" value="Search"  />



and my search.php page have this code..
REMEMBER, my search button call this page and load its result on resultslist div.

<?php
include("misc/database.php");

if (!(isset($_GET['pagenum']))) 
 { 
 $pagenum = 1; 
 } else
 $pagenum  = $_GET['pagenum'];
 $page_rows = 10; 

$keyword = $_GET['keyword'];
$trimmed = trim($keyword);



$page_query = "Select  e1.name as song_name,e2.name as album_name,e1.singer as singer,e1.id as song_id,e2.id as album_id,e2.year as album_year,e2.starring,e2.genre,e2.label,e2.artist,img from songs as e1 left join albums as e2 on e1.album = e2.id  where e1.name like \"%$trimmed%\" or e2.name like \"%$trimmed%\" or e1.singer like \"%$trimmed%\"  or e2.artist like \"%$trimmed%\" ";
$page_result = mysql_query($page_query);
$count1 = mysql_num_rows($page_result);

 $last = ceil($count1/$page_rows);
 if ($pagenum < 1) 
 { 
 $pagenum = 1; 
 } 
 elseif ($pagenum > $last) 
 { 
 $pagenum = $last; 
 } 
  $max = 'limit ' .($pagenum - 1) * $page_rows .',' .$page_rows; 

$query = "Select  e1.name as song_name,e2.name as album_name,e1.singer as singer,e1.id as song_id,e2.id as album_id,e2.year as album_year,e2.starring,e2.genre,e2.label,e2.artist,img from songs as e1 left join albums as e2 on e1.album = e2.id  where e1.name like \"%$trimmed%\" or e2.name like \"%$trimmed%\" or e1.singer like \"%$trimmed%\" or e2.artist like \"%$trimmed%\" and e1.album = e2.id order by e1.name DESC $max";
$result = mysql_query($query);
if($result)
{
$count = mysql_num_rows($result);


if($count)
{
	?>
   
     <?php
while($row = mysql_fetch_assoc($result))
{


	?>
    [b]MY HTML DATA TO SHOW RESULTS FORMATTED[/b]

  <?php
} ?>
  <div id="pagenation_footer" align="center"><div>
  <?php
   $next = $pagenum+1;
   if ($pagenum == 1)
   {
	   ?>
  
  <span class="pagedisabled">&lt; Prev</span><span id="currentpage" class="pagedisabled">1</span>
  <?php
   } else
   {
  ?>
  <a class="pageenabled blue_link" href="#" onclick="get_page('<?php echo "{$_SERVER['PHP_SELF']}?pagenum=2"; ?>'); current_pagenum=2;return false;">2</a><a class="pageenabled blue_link" href="#" onclick="get_page('<?php echo "{$_SERVER['PHP_SELF']}?pagenum=3"; ?>'); current_pagenum=3;return false;">3</a><a class="pageenabled blue_link" href="#" onclick="get_page('<?php echo "{$_SERVER['PHP_SELF']}?pagenum=4"; ?>'); current_pagenum=4;return false;">4</a><a class="pageenabled blue_link" href="#" onclick="get_page('<?php echo "{$_SERVER['PHP_SELF']}?pagenum=$next"; ?>'); current_pagenum=2;return false;" id ="search2">Next &gt;</a></div>
  
  
  <div class="results">(33 songs)</div></div></div>
  
  
  
    <?
   }
 if ($pagenum == 1) 
 {
 } 
 else 
 {
 echo " <a href='{$_SERVER['PHP_SELF']}?pagenum=1'> <<-First</a> ";
 echo " ";
 $previous = $pagenum-1;
 echo " <a href='{$_SERVER['PHP_SELF']}?pagenum=$previous'> <-Previous</a> ";
 } 
 //just a spacer
 echo " ---- ";
 if ($pagenum == $last) 
 {
 } 
 else {
 $next = $pagenum+1;
 echo " <a href='{$_SERVER['PHP_SELF']}?pagenum=$next'>Next -></a> ";
 echo " ";
 echo " <a href='{$_SERVER['PHP_SELF']}?pagenum=$last'>Last ->></a> ";
 } 


echo "</td></tr>";
?>

<?php

}else
echo "No Record Found";


} else
echo "There is an error in your query. Error Code: 0x8415F";


?>




NOW,, R u getting what i am trying to ask ?

as u can see the screenshots,, the first file is of the search page, 2nd screenshot is after loading the search results, 3rd is showing the next link, which is also came from the search results page, and 4th is the result i get when i click that link..

what i want is that, it dnt show me the result as in screenshot 4, but show me the same result just like in screenshot 2

Attached image(s)

  • Attached Image
  • Attached Image
  • Attached Image
  • Attached Image

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1