using ajax for search engine result not working? - Page 2

Question

hielo 65 Veteran Poster

13 Years Ago

In your ajax code, try changing:
if you alert() the value of data before the ajax request is sent, are you seeing the search_button? IF not change:

var data = $(this).serialize();

to:

var data = $(this).serialize() +'&search_button=Search';

andrewliu commented: Excellent help! brilliant! +0

hielo 65 Veteran Poster

13 Years Ago

assuming your pagination script is generating links SIMILAR to:

<a href="search.php?page=1">1</a>
<a href="search.php?page=2">2</a>

try changing it so the output is:

<a href="search.php?page=1" onclick="return ajaxSearch(document.getElementById('search'), this.href)">1</a>
<a href="search.php?page=2" onclick="return ajaxSearch(document.getElementById('search'), this.href)">2</a>

Then in your script tag, instead of the $(document).ready(...) you have, try the modified version below (include the ajaxSearch() function I am providing):

<script type="text/javascript">
function ajaxSearch(f,u)
{
     var ajax_div = $(f).attr("id")+"_results";
     var data = $(f).serialize() +'&search_button=Search';
     var url = u?u:$(f).attr("action");
     var type = $(f).attr("method").toUpperCase();
     $.ajax({
        url: url,
        data: data,
        type: type,
        success: function(data){
            $("#"+ajax_div).html(data);
        }
     });
     return false;
}

$(document).ready(function(){

  $("form.ajax").submit(function(){
  	ajaxSearch(this,'');
	return false;
  });

});
</script>

hielo 65 Veteran Poster

13 Years Ago

it sounds like your "main" page is index.php and you are posting to search.php. It that is the case your pagination links should have href="search.php..." , NOT href="index.php..." . It sounds like your links are posting to the "main" page (index.php in my example).

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Well done guys - you've made some real progress at last.

Going back to an earlier idea, we should be able to simplify things by hardcoding some values. We can do this because ajaxSearch is dedicated to a specific task whereas it was originally based on something more general.

We can also move Hielo's ajaxSearch inside document.ready and take the opportunity to attach pagination link behaviour with jQuery to avoid having to build and serve lengthy pagination tags server-side.

$(document).ready(function(){

  var searchForm = document.getElementById('search');
  var searchURL = "search.php?";
  var searchResultsID = "search_results";

  function ajaxSearch(first_pos){
    first_pos = (!first_pos) ? 0 : first_pos;
    var url = searchURL + [$(searchForm).serialize(), 'search_button=Search', 'first_pos='+first_pos].join('&');
    $.ajax({
      url: url,
      type: "GET",
      success: function displayResults(data){
        $("#"+searchResultsID).html(data);//display the results complete with raw pagination links
        $("a:.searchPagination").click(function(){//now give pagination links approriate behaviour
          ajaxSearch(this.getAttribute('first_pos') || 0);
          return false;
        });
      }
    });
    return false;
  }

  $(searchForm).submit(function(){
    ajaxSearch(0);
    return false;
  });

});

The pagination links can now be built in a much simplified version of pagination.php:

<?php
global $first_pos;
global $sites;
global $results;
global $RESULTS_LIMIT;

if($first_pos > 0)
{
  $back = max(0, $first_pos-$RESULTS_LIMIT);
  echo "<a class=\"searchPagination\" href=\"\" first_pos=\"$back\" title=\"previous $RESULTS_LIMIT\">&lt;</a>&nbsp;|&nbsp;";
}
else
{
  echo "&lt;&nbsp;|&nbsp;";
}
if($results > $RESULTS_LIMIT)
{
  $sites = ceil($results / $RESULTS_LIMIT);
}
for ($i=1; $i<=$sites; $i++)
{
  $fwd = ($i-1) * $RESULTS_LIMIT;
  $linkTxt = ($fwd == $first_pos) ? "<b>$i</b>" : $i;
  echo "<a class=\"searchPagination\" href=\"\" first_pos=\"$fwd\">$linkTxt</a>&nbsp;|&nbsp;";
}
if(isset($first_pos) && $first_pos < $results-$RESULTS_LIMIT)
{
  $fwd = $first_pos + $RESULTS_LIMIT;
  echo "<a class=\"searchPagination\" href=\"\" first_pos=\"$fwd\" title=\"next $RESULTS_LIMIT\">&gt;</a>";
  $fwd = $results-$RESULTS_LIMIT;
}
else
{
  echo "&gt;";
}
?>

Andrew, I have actually tested all this so it should work if you install it correctly.

Suggest you backup your files before doing the changes as they are quite extensive.

Good luck

Airshow

Edited 13 Years Ago by Airshow because: n/a

andrewliu commented: Excellent! Thank you! +0

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2010-09-20T22:30:23+00:00

OK, that's something to go on.

Could you remind me, what is the nature of the returned HTML? Is it a fully formed table or just table rows?

Airshow

andrewliu 0 Junior Poster · Answer 2 · 2010-09-20T22:36:51+00:00

Since I'm still new to this. What do you mean by fully formed table or just table rows? I believe my search result echos out rows from my database.

hielo 65 Veteran Poster · Answer 3 · 2010-09-21T00:28:09+00:00

but now when I test my alerts, I get div tag alerts in my SUCCESS alert, and for COMPLETE: success

OK, but does the SUCCESS alert also have the output of your php search script?

try:

$(document).ready(function(){

 $("form.ajax").submit(function(){
     var ajax_div = $(this).attr("id")+"_results";
     var data = $(this).serialize();
     var url  = $(this).attr("action");
     var type = "GET";//$(this).attr("method").toUpperCase();
    // alert([url, data, type].join("\n"));//debug alert
     $.ajax({
        url: url,
        data: data,
        type: type,
        success: function(data){
            alert("SUCCESS: " + data);//debug alert
            if( document.getElementById(ajax_div) )
            {
             $("#"+ajax_div).html(data);
            }
            else
            {
              alert('I was not able to locate any element with id=' + ajax_div +'. You must provide a "target" element in which to dump/load the results!');
            }
        },
	        complete: function(XMLHttpRequest, textStatus){
          //  alert("COMPLETE: " + textStatus);//debug alert
        },
        error: function(XMLHttpRequest, textStatus){
           // alert("ERROR: " + textStatus);//debug alert
        }
     });
     return false;
  });

});

andrewliu 0 Junior Poster · Answer 4 · 2010-09-21T00:41:43+00:00

The success has an output of an HTML tag that I commented out. Why is that?

<!-- the html tag --!>

or if I do take it out I just get

SUCCESS:

and doesnt show anything.

I do have <table> tags with echoing out the rows from my database.

hielo 65 Veteran Poster · Answer 5 · 2010-09-21T00:50:03+00:00

and HTML CLOSING comment tag does NOT have a "!" symbol. The proper comment should be:

<!-- the html tag -->

WRONG:

<!--require("includes/pagination.php")!-->

CORRECT:

<!-- require("includes/pagination.php"); -->

Fix that and try again.

hielo 65 Veteran Poster · Answer 6 · 2010-09-21T00:53:41+00:00

FYI: on your original post, you are trying to insert the result into '#search_results', BUT I did not see any element with id="search_results" . Be sure to provide a target element:

<div id="search_results"></div>

andrewliu 0 Junior Poster · Answer 7 · 2010-09-21T01:14:14+00:00

I deleted my HTML comment to see if it works, it still doesn't work.

I also have the search_results tag in my index page where my ajax code is in. I also just put it in my search_query.php but my SUCCESS is getting a few tags but no results from database

Does it matter about my pagination page? I have a few url codes in there. But I should still be able to get some output from my database regardless of my pagination page.

hielo 65 Veteran Poster · Answer 8 · 2010-09-21T01:21:35+00:00

>>Does it matter about my pagination page?
That depends on whether or not it is producing html code that would "break" your initial markup. Do you have a link to your page?

andrewliu 0 Junior Poster · Answer 9 · 2010-09-21T01:24:48+00:00

>>Does it matter about my pagination page?
That depends on whether or not it is producing html code that would "break" your initial markup. Do you have a link to your page?

I don't have a link. I'm using localhost.

this is my pagination php code

<?PHP
global $first_pos;
global $sites;
global $results;
global $RESULTS_LIMIT;

if($first_pos > 0)
{
  $back=$first_pos-$RESULTS_LIMIT;
  if($back < 0)
  {
    $back = 0;
  }
  echo "<a href='index2.php?search_term=".stripslashes($search_term)."&addressInput=$location_term&search_button=Search&first_pos=$back' ></a>";
}
if($results>$RESULTS_LIMIT)
{
  $sites=intval($results/$RESULTS_LIMIT);
  if($results%$RESULTS_LIMIT)
  {
    $sites++;
  }
}
for ($i=1;$i<=$sites;$i++)
{
  $fwd=($i-1)*$RESULTS_LIMIT;
  if($fwd == $first_pos)
  {
      echo "<a href='index2.php?search_term=".stripslashes($search_term)."&addressInput=$location_term&search_button=Search&first_pos=$fwd '><b>$i</b></a> | ";
  }
  else
  {
      echo "<a href='index2.php?search_term=".stripslashes($search_term)."&addressInput=$location_term&search_button=Search&first_pos=$fwd '>$i</a> | ";   
  }
}
if(isset($first_pos) && $first_pos < $results-$RESULTS_LIMIT)
{
  $fwd=$first_pos+$RESULTS_LIMIT;
  echo "<a href='index2.php?search_term=".stripslashes($search_term)."&addressInput=$location_term&search_button=Search&first_pos=$fwd ' > >></a>";
  $fwd=$results-$RESULTS_LIMIT;
}
?>
    </td>
  </tr>
</table>

I'm pretty sure that it won't break my any of my codes to search for the results.

My echoing outputs are in my search_query.php and its not producing any outputs. I had my search engine working before i used the ajax code.

andrewliu 0 Junior Poster · Answer 10 · 2010-09-21T03:06:58+00:00

andrewliu 0 Junior Poster

13 Years Ago

NICE! that worked!!!

andrewliu 0 Junior Poster · Answer 11 · 2010-09-21T03:08:12+00:00

Thank you!!

However, if I wanted to add my pagination, how would it work with my ajax code?

If I click on next or whatever, I have set it where it will go to that url. How do I do it so it won't have to refresh the page, it will change in that div id="search_results" tag?

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 12 · 2010-09-21T03:30:11+00:00

Andrew,

(Pagination will need to be changed to work with ajax. Suppress it for now by commentiing out the include statement in the results page.)

Edit : Ignore; things have moved on since I last refreshed the page.

Airshow

andrewliu 0 Junior Poster · Answer 13 · 2010-09-21T05:49:08+00:00

I tried what you suggested, and when I go on the next page. I get another index.php again (another form under the previous one). So I'm getting a duplicate.

andrewliu 0 Junior Poster · Answer 14 · 2010-09-21T06:26:49+00:00

That makes sense, but now when I changed the index.php to search.php, my pagination links are not clickable anymore. It won't click to the next page.

andrewliu 0 Junior Poster · Answer 15 · 2010-09-22T06:43:42+00:00

Thank you for help me guys!

But I commented out my old codes and applied the one you suggested, but now it won't search anything. Am I missing something here?

Thanks again

EDIT: I got it!!! whoot!

thanks guys!!

hielo 65 Veteran Poster · Answer 16 · 2010-09-22T07:11:51+00:00

hielo 65 Veteran Poster

13 Years Ago

That was easy!
:)

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 17 · 2010-09-22T15:10:50+00:00

Airshow 416 WiFi Lounge Lizard

13 Years Ago

That was easy!
:)

I second that.

Airshow

andrewliu 0 Junior Poster · Answer 18 · 2010-09-23T03:35:39+00:00

andrewliu 0 Junior Poster

13 Years Ago

yeah i felt that way too ;)

thanks again guys!