locked
Loading Please Wait modal help RRS feed

  • Question

  • User853533811 posted

    Can someone help me with how to show a loading gif while this jquery is being ran. Sometimes it might take 1 second to pull back data, the next it might take 4 seconds.

    function GetMap() {
    map = new Microsoft.Maps.Map('#myMap', {});

    //Load the directions module.
    Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
    //Create an instance of the directions manager.
    directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
    directionsManager.setRequestOptions({
    routeMode: Microsoft.Maps.Directions.RouteMode.driving,
    routeOptimization: Microsoft.Maps.Directions.RouteOptimization.shortestDistance,
    routeIndex: Microsoft.Maps.Directions.RouteIndex
    });

    // Create waypoints to route between.

    var waypoint1 = new Microsoft.Maps.Directions.Waypoint({ address: '<%=Add1 %>' });
    directionsManager.addWaypoint(waypoint1);

    var waypoint2 = new Microsoft.Maps.Directions.Waypoint({ address: '<%=Add2 %>' });
    directionsManager.addWaypoint(waypoint2);

    //Add event handlers to directions manager.
    Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', directionsError);
    Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', directionsUpdated);

    //Calculate directions.
    directionsManager.calculateDirections();
    });
    }

    Monday, May 18, 2020 8:54 PM

All replies

  • User-1151440187 posted

    Hello, Good Morning.

    $(function(){
    $('.gif').show();
    $(window).load(function(){
    $('.gif').hide();
    $('#wrapper').show();
    });
    });

    I think this will help you.

    Thanks!

    Tuesday, May 19, 2020 4:23 AM
  • User-2054057000 posted

    Loading messages or gif images can be shown by making use of AJAX events.  

    Tuesday, May 19, 2020 5:18 AM
  • User853533811 posted

    I'm not very good with javascript. I'm still not sure how to do this.

    I found this, but not sure how to reference it in the to show this while the GetMap function is running.

    function ShowProgress() {
    setTimeout(function () {
    var modal = $('<div />');
    modal.addClass("modal");
    $('body').append(modal);
    var loading = $(".loading");
    loading.show();
    var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
    var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
    loading.css({ top: top, left: left });
    }, 200);
    }
    );

    Wednesday, May 20, 2020 12:36 AM
  • User-719153870 posted

    Hi rlcustoms,

    Window setTimeout(function, ms) Method is used to execute a function after ms time, so this does not seem to be very closely related to your initial needs.

    The basic solution for this requirement is to show a gif before you execute the function and hide that gif after the function is executed. Like the inner function in this ShowProgress and @shaili shah provided.

    Best Regard,

    Yang Shen

    Wednesday, May 20, 2020 7:43 AM