Andrew,
The only thing that jumps out at me is that the FORM has method="POST" while the PHP expects "GET".
If this doesn't fix it then you need a debug strategy. I suggest splitting the thing down the middle - test client-side and server-side independently.
1. TEST THE REQUESTING PAGE
a. Test against a hard coded test page in place of results.php . Create a page with the single line "*** TEST MESSAGE ***" and save as test.html , then edit your form tag to read <form action="test.html" ... .
b. Was the test message retreived and displayed properly in the target DIV?
2. TEST THE PHP
a. Comment out the whole $("form.ajax").submit(function(){ .... such that on form submission a regular (non-AJAX) request is made.
b. Are search results correctly returned and displayed in a new page?
3. If both tests (1 and 2) are successful, then you have an incompatibility between the AJAX request and the what the PHP expects. (You have already fixed POST/GET but there may be something else).Airshow
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
Andrew,
I did change the $_GET to $_POST and I've messed around with my code and I think its in the results.php page. Because when I changed my <form action="search_query.php"> to <form action=""> it pops up my original page. So I can conclude that my ajax code is correct? But I'm not sure what my problem is with my search_query.php
You can be confident that your ajax code is capable of issuing a null request and handling the response. You don't yet know that it composes the intended request correctly. Now that you are using GET, you can insert a javascript alert to observe the composed URL before it is sent.
Have you tried my tests 1 and 2 yet?Airshow
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
So my tests 1 and 2 are successful? If so then I would guess that server-side is OK.
Before you do anything else, make sure the AJAX code is OK by adding a couple of debug statements :
$(document).ready(function(){
$("form.ajax").submit(function(){
var ajax_div = $(this).attr("id")+"_results";
var data = $(this).serialize();
alert(data);//debug statement (serialised form data)
var url = $(this).attr("action");
var type = $(this).attr("method").toUpperCase();
$.ajax({
url: url,
data: data,
type: type,
success: function(data){
alert(data);//debug statement (tabulated search results)
$("#"+ajax_div).html(data);
}
});
return false;
});
});
Do you see the two alerts and do they contain what you expect?Airshow
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
Andrew,
... I don't get anything for ALERT 2
Do you mean you get an alert with a blank message, or no alert at all?
There's a big difference.Airshow
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
Let's try some more debug statements in the javascript
$(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 = $(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
$("#"+ajax_div).html(data);
},
complete: function(XMLHttpRequest, textStatus){
alert("COMPLETE: " + textStatus);//debug alert
},
error: function(XMLHttpRequest, textStatus){
alert("ERROR: " + textStatus);//debug alert
}
});
return false;
});
});
What alerts do you get now?Airshow
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
Let's try some more debug statements in the javascript.
$(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 = $(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
$("#"+ajax_div).html(data);
},
complete: function(XMLHttpRequest, textStatus){
alert("COMPLETE: " + textStatus);//debug alert
},
error: function(XMLHttpRequest, textStatus){
alert("ERROR: " + textStatus);//debug alert
}
});
return false;
});
});
What alerts do you get now?Airshow
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
Andrew,
I posted a reply here 12 hours ago but it's disappeared!!!
The problem appears to be "POST" which I thought we had gotten rid of.
Never mind, the easiest thing is to hard-code "GET" in the function:
Replace
var type = $(this).attr("method").toUpperCase();
with
var type = "GET";
Airshow
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
Hmmmm, looks like we have to start looking server-side at the php.
Looking at this line,
if(isset($_GET['search_term']) && isset($_GET['addressInput']) && isset($_GET['search_button'])){
see if you can devise a test to see if all three variables are set. If any of them are not set then the search clearly won't work. I seem to recall that jquery.ajax() chooses not to pass on the value of a submit button by default so that's something you might consider changing (ie delete && isset($_GET['search_button']) from the if clause above).Airshow
Airshow
WiFi Lounge Lizard
2,683 posts since Apr 2009
Reputation Points: 321
Solved Threads: 372
