CODEWITHSUNDEEP
phpjquerygoogle-maps-api-3
martincarlin87
martincarlin87

Reputation: 11042

jQuery AJAX Request Error

I've done a few AJAX requests using jQuery in my time but for some reason I can't get this one to work.

What my code does is ask the user for their location, geocodes it using the Google Maps API and returns the 5 closest stores to the user.

If I visit the page called by the ajax request in the browser with the URL parameters entered manually then it works fine, e.g. www.domain.com/storelocator/geocode.php?address=xxxxxx

index.php

<form id="storeform">
    <input type="text" id="address" size="50"/>
    <span><input id="submit" type="image" src="../images/btnsmall.jpg" value="Search" /></span>
</form>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=geometry&sensor=false" ></script>
<script type="text/javascript">
$(document).ready(function() {

    $('#storeform').submit(function() {
        var address = $('#address').val();
        var params = $('#storeform').serialize();

        if (address == '') {
        alert('Please enter a location');
        }

        $.ajax({
            url: "geocode.php",
            data: params,
            dataType: 'html',
            type: 'GET',
            success: function(response){
                 $('#stores').html(response);        
            }
        }); 
    });
});
</script>

geocode.php

ini_set('display_errors', 1);
error_reporting(E_ALL);

$db_conn = mysql_connect('xxxxxx', 'xxxxxx', 'xxxxx') or die('error');
mysql_select_db('xxxx', $db_conn) or die('error');

$address = $_GET['address'];
$earth_radius = 3959;
$ch = curl_init('http://maps.google.com/maps/api/geocode/json?address='.$address.'&sensor=false');

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$geocode = curl_exec($ch);
curl_close($ch);

$output= json_decode($geocode);

$lat = $output->results[0]->geometry->location->lat;
$lng = $output->results[0]->geometry->location->lng;

$sql = "SELECT *, ( $earth_radius * acos( cos( radians($lat) ) * cos( radians( latitude ) ) * cos( radians( longitude ) - radians($lng) ) + sin( radians($lat) ) * sin( radians( latitude ) ) ) ) AS distance FROM stores HAVING distance < 25 ORDER BY distance LIMIT 5";
$result = mysql_query($sql);
$stores = '';

if (mysql_num_rows($result) > 0){
    while($row = mysql_fetch_array($result))
    {
        $stores .= $row['town'].' - '.$row['name'];
        $stores .='<br />';
    }
}
else {
    $stores = 'No results!';
}

echo $stores;

It's hard to see the error in Firebug because it comes and goes so fast but it looks like an internal server error in geocode.php somehow.

Also, when I do submit my form, I get strange x and y parameters in my url, e.g.

http://www.domain.com/store-locator/index.php?x=13&y=11 and I have no idea why.

Any help would be much appreciated.

Upvotes: 1

Views: 275

Answers (1)

devnull69
devnull69

Reputation: 16544

If you use .submit() like this, it will definitely refresh the page (most probably while the request is still running). You should "return false" to prevent this default behavior.

$(document).ready(function() {

$('#storeform').submit(function() {
    var address = $('#address').val();
    var params = $('#storeform').serialize();

    if (address == '') {
    alert('Please enter a location');
    }

    $.ajax({
        url: "geocode.php",
        data: params,
        dataType: 'html',
        type: 'GET',
        success: function(response){
             $('#stores').html(response);        
        }
    }); 

    return false;
});
});

Upvotes: 1

Related Questions