0

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

0

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.

0

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;
  });

});
0

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.

Edited by andrewliu: n/a

0

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.

0

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>
0

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.

Edited by andrewliu: n/a

0

>>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?

0

>>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.

1

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';
Votes + Comments
Excellent help! brilliant!
0

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?

Edited by andrewliu: n/a

0

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

Edited by Airshow: n/a

0

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>
0

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.

Edited by andrewliu: n/a

0

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).

0

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.

1

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 by Airshow: n/a

Votes + Comments
Excellent! Thank you!
0

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!!

Edited by andrewliu: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.