Safari and Firefox have different behaviour on dojo ready function

Question

As dojo 1.7> don't provide OnLoad status handling, some nice features such as OnLoad in Jquery not really support by Dojo. Dojo have a similar feature such as ready or DomReady is close to OnLoad, let us have a look.

I had some dojo form fields need to be checked on the page loaded. Those fields mainly was used to hold browser geoLocation information to facilitate user find local business information, I need a OnLoad function to check browser have geoLocation support or not, if it is, dojo script will populate user browser latitude and longitude information to a dojo form fields, other wise, I need enable an other field such as postcode to be changed to "required" to ask user provide his local postcode.

My dojo script looks like:

<script type="text/javascript">
    require(["dojo/ready","dojo/dom","dojo/dom-attr"], function(ready,dom,domAttr){
        ready(function(){
            var Geo = {};
            if (navigator.geolocation){
                navigator.geolocation.getCurrentPosition(success, error);
            }else{
            }
            function success(position) {
                Geo.lat = position.coords.latitude;
                Geo.lng = position.coords.longitude;
                populateHeader(Geo.lat, Geo.lng);
            }
            function error() {
                console.log("Geocoder failed");
                domAttr.set(dom.byId("criteria_postcode"),"required",true);
            }
            function populateHeader(lat, lng) {
                dom.byId("criteria_latitude").value=Number(lat);
                dom.byId("criteria_longitude").value=Number(lng);
            }
        });
     });
</script>

This function supposed will be load on DOM ready, but it never work properly. criteria_postcode field never be set to required in the page.

I also tried to test on submit event function by using dojo script, my code looks like:

<script type="dojo/on" data-dojo-event="submit">
    if(this.validate()){
        require(["dijit/focus", "dojo/dom", "dojo/domReady!"], function(focusUtil,dom){
            // fetch a node by id="someNode"
            var pcnode = dom.byId("criteria_postcode");
            var latnode = dom.byId("criteria_latitude");
            var lngnode = dom.byId("criteria_longitude");
            console.log(pcnode.value+"|"+latnode.value+"|"+lngnode.value);
        });
        return confirm('Form is valid, press OK to submit');
    }

This paragraph of dojo script will print out a console log and waiting for user click ok to confirm before submit to server.

Unfortunately, firefox works but not for safari, safari print out the console log after submit, is that true? I was confused.

ben ben · Accepted Answer · 2015-08-05T09:55:41

domReady is the right approach, but instead of doing it aty submit time, you should do it at load time. also defining all function and then running the navigator.geolocation is better:

<script type="text/javascript">
require(["dojo/dom","dojo/dom-attr","dojo/domReady!"], function(dom,domAttr){
        var Geo = {};
        function success(position) {
            Geo.lat = position.coords.latitude;
            Geo.lng = position.coords.longitude;
            populateHeader(Geo.lat, Geo.lng);
        }
        function error() {
            console.log("Geocoder failed");
            domAttr.set(dom.byId("criteria_postcode"),"required",true);
        }
        function populateHeader(lat, lng) {
            dom.byId("criteria_latitude").value=Number(lat);
            dom.byId("criteria_longitude").value=Number(lng);
        }
        if (navigator.geolocation){
            navigator.geolocation.getCurrentPosition(success, error);
        }else{

        }
 });
</script>

At submit time, you obviously don't need to use dojo/domReady! (DOM is ready otherwise user could not submit)

Safari and Firefox have different behaviour on dojo ready function

1 Answers