HTML not showing up on Firefox

Question

I am trying to return a PHP page via AJAX and it always loads in Chrome. In Firefox, it loads about 5% of the time, the other times it loads with nothing with no JS/PHP errors. I'm just echoing straight html back without CSS.

Here is my Ajax:

if(geo_position_js.init()){
            geo_position_js.getCurrentPosition(displayPosition,error_callback,{enableHighAccuracy:true,options:5000});
        }
        else{
            alert("Functionality not available");
        }

        function error_callback(p)
        {
            alert('error='+p.message);
        }       

    function displayPosition(loc) {
        var mylat = loc.coords.latitude;
        var mylong = loc.coords.longitude;
        $.ajax({
            type: "POST",
            url: "distancetest.php",
            data: "long="+mylong+"&lat="+mylat,
            success: function(html2){
                $('#locationinfo').html(html2);
                console.log(html);
           }
        });

    }

My PHP is basically doing this a couple times:

$query = "SELECT * FROM tbl_geo WHERE cat_id=1";
    $result = mysql_query ($query) or die(mysql_error());
    echo "<h2>Restaurants</h2>";
    while ($row = mysql_fetch_array($result)){
        if($row['lat'] != ''){
            $distance = distance($_POST['lat'], $_POST['long'], $row['lat'], $row['lng'], "k");
            if($distance < 2000){
                $attractions[] = array('name' => $row['name'], 'address' => $row['address'], 'distance' => $distance);
            }
        }
    }
    $attractions = array_sort($attractions,'distance');
    $attractions = array_values($attractions);
    for ($i = 0; $i <= 10; $i++) {
        if(isset($attractions[$i]['distance'])){
            echo 'You are '.$attractions[$i]['distance'].'km away from '.$attractions[$i]['name'].' at '.$attractions[$i]['address'].'<br/>';
        }
    }

Works in some browsers, but displays nothing in others. Any ideas?

UPDATE: Turns out this is a problem with geolocation in Firefox. It fails at getting the position but doesn't come back to the error_callback function. Live example is here: http://adamzwakk.com/geolocate/

Answer 1

Are you sure that your browser supports what you are doing?

Try this: http://html5demos.com/geo

You can also download wireshark and check the information sent by you and returned from the server.

It is also good practice to put blank php page (just echo a random string) in the same directory where you want to generate your php and see if it is working. On Windows based servers it is a common problem that PHP can be set to work in specific directories, and because of mis-installing can fail in others. Every browser handles errors and warning messages differently, so if it works in chrome, it does not mean it works on everything else. Have you tried with Safari and Opera?

Answer 2

I opened up FireBug and your clicked on the link to find my address. It returned a load of links saying "undefined". In FireBug it shows that your script is returning this:

<?xml version="1.0" encoding="utf-8" ?>
  <geoData>
    <restaurants>
    </place>
    </restaurants>
    <accommodations>
    </accommodations>
    <things>
    </things>
  </geoData>

I indented it to make it look nicer. It appears your application is returning nothing in the XML. You are also closing a tag which isn't open!

Answer 3

Use console.log() with caution

Using console.log() in your javascript code throws an exception when firebug is disabled or not installed. (95% of the time?)
I wrote a little wrapper function "dump(var)" dump.js that checks if firebug is enabled so it's also safe to use in production code.

PS: I noticed:

 success: function(html2){
   $('#locationinfo').html(html2);
   console.log(html);
 }

Is the html variable defined earlier or did you mean html2.