Why is async causing issues in my javascript?

Question

Can anyone tell me why async: false; doesn't allow my spinner to display during data load? But when I used async: true; it reverses my default display toggle?

I currently have list set up with 5 different items. 3 of those items are set up to display by default when the page loads. Then they can be clicked off or the other 2 items can be clicked on. When I use async: true; to get my spinner to display, its like it doesn't recognize the default toggles. Even though they are selected on page load, the information does not display. It only displays after they are UNselected.

$(function () {
        var HistoryViewModel;
        var xspinner = new Spinner();
        $.ajax({
            url: '/Users/GetAccountHistory',
            type: 'POST',
            async: false,
            cache: false,
            data: { accountId: @Model.Account.AccountID },
            beforeSend: function () {
                xspinner.showSpinner("Getting History Information...");
            },
            complete: function () {
                xspinner.hide();
            },
            success: function (data) {
                HistoryViewModel = new RCM.ViewModels.History.HistoryViewModel(ko.mapping.fromJS(data));
                ko.applyBindings(HistoryViewModel, document.getElementById('ListPanel'));
                ko.applyBindings(HistoryViewModel, document.getElementById("DetailsPanel"));
                ie9HeightFix();
            },
            error: function (xhr, textStatus, errorThrown) {
                notify.show({ type: 'error', header: 'Error!', content: 'Error fetching History, ' + xhr.statusText });
                return false;
            }
        });
        function ie9HeightFix() {
            if(document.addEventListener && !window.requestAnimationFrame) 
            { 
                var eTop = $('.AccountHx').offset().top; //get the offset top of the element
                var dTop = eTop - $(window).scrollTop(); //position of the ele w.r.t window
                var cHeight = $(window).height() - dTop - $(".colophon").height();
                $(".AccountHx").css("height", cHeight);
                $(".AccountHx").css("position", "relative");
                $(".AccountHx").css("overflow-x", "hidden");
                $(".AccountHx-detailsPanel").css("left", "32rem");
                $(".viewDetailsButton").css("right", "2rem");
            }
        }
        $(window).resize(function() {
            ie9HeightFix();
        });
        $("#vToggle").click();
        $("#pToggle").click();
        $("#sToggle").click();
        $(".search-button").click(function(event){
            $(".subHeader").toggleClass("search-visible");
            $(".AccountHx-items").toggleClass("search-visible");
            $(".search-button").toggleClass("search-visible");
        });
        $(".filter-button, .modal-close").click(function(event){
            $(".AccountHx-filtersPanel").toggleClass("filters-visible");
            $(".filter-birdBeak").toggle();
        });
        $(".filterButtons input").attr("disabled", false);
    });

    $("#vToggle").click(function(){
        $(".js-vItem").toggle();
        $("#vToggle").toggleClass("is-active");
    });
    $("#cToggle").click(function(){
        $(".js-claimItem").toggle();
        $("#cToggle").toggleClass("is-active");
    });
    $("#nToggle").click(function(){
        $(".js-nItem").toggle();
        $("#nToggle").toggleClass("is-active");
    });
    $("#sToggle").click(function(){
        $(".js-sItem").toggle();
        $("#sToggle").toggleClass("is-active");
    });
    $("#pToggle").click(function(){
        $(".js-pItem").toggle();
        $("#pToggle").toggleClass("is-active");
    });
    $("li.filterButton").click(function(){
        $(this).parent().siblings(".clearButton").show();
        $(".AccountHx-filtersPanel .clearButton--all").css('display', 'inline-block');
    });
    $(".clearButton").click(function(){
        var hiddenOption = $(this).siblings(".filterButtons").children(".hiddenOption");
        hiddenOption.siblings('.is-active').removeClass('is-active');
        hiddenOption.toggleClass("is-active");
        $(this).hide();
    });
    $(".AccountHx-filtersPanel .clearButton--all").click(function() {
        $(".AccountHx-filtersPanel .filterButton").removeClass("is-active");
        $(".AccountHx-filtersPanel .hiddenOption").toggleClass("is-active");
        $(".AccountHx-filtersPanel .filterCheckbox").attr('checked', false);
        $(".AccountHx-filtersPanel .clearButton").hide();
        $(this).hide();
    })

Can you include a working code sample and simplify the code included to be a small as possible (ie don't include unrelated js)? — Carrie Kendall, Jul 10 '15 at 20:06

score 0 · Accepted Answer · answered Jul 13 '15 at 17:04

0

The answer that I discovered is to move the
$("#visitToggle").click(); $("#paymentToggle").click(); $("#statementToggle").click();

inside the following section
success: function (data) {...}

and change async to true

answered Jul 13 '15 at 17:04

AtlasBowler

267
1
8
18

Why is async causing issues in my javascript?

1 Answers1