jQuery Rest Service响应仅适用于Chrome浏览器，不适用于IE或FF

Question

When visiting the site http://www.dentalo.se you should see this image.

I'm a calling a RestService at http://www.dentalo.se/RestService/Dentalo.svc/Companies and I know it working and getting a response. I have tested the service.

I'm using Google Maps to render location for the Google maps. It renders location when using Chrome browser. But I cannot understand why it doesn't work in Firefox, Internet Explorer . On mobile devices it doesn't work on any browser even chrome .

This is the error message I receive in Firefox. If just visit http://www.dentalo.se you will see the error. I only want to add the relevant code. If you need more code tell me.

---

sg = [object Object], url = error, line = [Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://dentalo.se/assets/plugins/jquery-1.10.2.min.js :: .send :: line 6" data: no]

---

This some JavaScript code that I have included.

<script src="/assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<!-- Start Google Map JavaScript -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=sv"></script>
<script src="/assets/plugins/gmaps/gmaps.js" type="text/javascript"></script>
<!-- End Google Map JavaScript -->

shorter version of JavaScript Code

if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(ShowPosition);
            }
            else {
                x.innerHTML = "Geolocation is not supported by this browser.";
            }
            function showError(error) {
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        alert("User denied the request for Geolocation.");
                        break;
                    case error.POSITION_UNAVAILABLE:
                        alert("Location information is unavailable.");
                        break;
                    case error.TIMEOUT:
                        alert("The request to get user location timed out.");
                        break;
                    case error.UNKNOWN_ERROR:
                        alert("An unknown error occurred.");
                        break;
                }
            }
            function ShowPosition(position) {
                //begin rest call
                $("#latitude").val(position.coords.latitude);
                $("#longitude").val(position.coords.longitude);
                $.ajax({
                    type: "GET",
                    cache: false,
                    async: false,
                    url: "http://www.dentalo.se/RestService/Dentalo.svc/Companies",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        map = new GMaps({
                            el: '#map',
                            lat: position.coords.latitude,
                            lng: position.coords.longitude,
                            zoom: 15,
                            zoomControl: true,
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            zoomControlOpt: {
                                style: google.maps.ZoomControlStyle.SMALL,
                                position: google.maps.ControlPosition.RIGHT_TOP
                            },
                            panControl: true,
                            scrollwheel: true
                        });
                        map.addMarker({
                            lat: position.coords.latitude,
                            lng: position.coords.longitude,
                            title: 'Min position',
                            icon: 'http://www.dentalo.se/assets/img/map/user_x64.png'
                        });
                        $.each(data, function (index, item) {
                                    map.addMarker({
                                                    lat: item.Latitude ,
                                                    lng: item.Longitude ,
                                                    title: item.Address ,
                                                    icon: GetMarkerImage(item.Status),
                                                    infoWindow: { 
                                                        content: '<div style="width: 300px"><h4>' + item.Name + '</h4><br /><p>' + item.Address + ', ' + item.County.Name + '</p><div class="four columns alpha"><a class="btn blue ' + SetDisplayClass(item.Status) + '" href="booking/' + item.CompanyId + '" ><i class="m-icon-swapright m-icon-white"></i> Boka</a> <a href="#" onClick="showPopUp(&apos;' + item.CompanyId +'&apos;);return false;" class="btn default">Information</a></div></div>',
                                                    }
                                        })
                        });
                    },
                    error: function (msg, url, line) {
                        //alert('error trapped in error: function(msg, url, line)');
                        alert('msg = ' + msg + ', url = ' + url + ', line = ' + line);
                    }
                });

Many thanks.

* Begin Edit *

I have solved the problem. It was a Url issue. In the ajax call to the rest service you should not specify the complete Url.

You should do it like this

I change this line

url: " http://www.dentalo.se/RestService/Dentalo.svc/Companies ",

To

url: "RestService/Dentalo.svc/Companies",

        $.ajax({
            type: "GET",
            cache: false,
            async: false,
            url: "RestService/Dentalo.svc/Companies",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                map = new GMaps({
                    el: '#map',
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                    zoom: 15,
                    zoomControl: true,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    zoomControlOpt: {
                        style: google.maps.ZoomControlStyle.SMALL,
                        position: google.maps.ControlPosition.RIGHT_TOP
                    },
                    panControl: true,
                    scrollwheel: true
                });
                map.addMarker({
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                    title: 'Min position',
                    icon: 'http://www.dentalo.se/assets/img/map/user_x64.png'
                });
                $.each(data, function (index, item) {
                            map.addMarker({
                                            lat: item.Latitude ,
                                            lng: item.Longitude ,
                                            title: item.Address ,
                                            icon: GetMarkerImage(item.Status),
                                            infoWindow: { 
                                                content: '<div style="width: 300px"><h4>' + item.Name + '</h4><br /><p>' + item.Address + ', ' + item.County.Name + '</p><div class="four columns alpha"><a class="btn blue ' + SetDisplayClass(item.Status) + '" href="booking/' + item.CompanyId + '" ><i class="m-icon-swapright m-icon-white"></i> Boka</a> <a href="#" onClick="showPopUp(&apos;' + item.CompanyId +'&apos;);return false;" class="btn default">Information</a></div></div>',
                                            }
                                })
                });
            },
            error: function (msg, url, line) {
                //alert('error trapped in error: function(msg, url, line)');
                alert('msg = ' + msg + ', url = ' + url + ', line = ' + line);
            }
        });

* End Edit *

Answer 1

the getCurrentPosition method has an infinite time out by default. Try this:

navigator.geolocation.getCurrentPosition(ShowPosition, showError, {timeout:2000})

There are two other options you can set in this object: enableHighAccuracy and maximumAge

Check out: http://diveintohtml5.info/geolocation.html for more info.