Weird execution of JavaScript, JQuery and JQWidgets

Question

OK,... I am using JQuery v2.2.3, JQWidgets v4.1.2 for the front end with ASP.NET MVC 5 for the back end I am using ASP.NET c#.

My page would be similar to a SPA, in that it is massively huge. the part I am having difficulty with is where the script is supposed to repopulate all of my JQXGrids using a synchronous Ajax call. I know Ajax was meant to be a-synchronous but when a-synchronous the ajax calls ignore my repetitive calls. Here is what is supposed to happen:

When the end user selects new from the account dropdown, the script closes the grid, clears the selection and opens the new account dialogue.
After the account is created, the new account creation dialogue is closed.
(This is where it goes weird) The script is then supposed to repopulate all JQXGrids on the page to reflect the addition.
Finally, the account that is created is supposed to be auto selected in the dropdown that created the account.

Here is what the script is actually doing in its current state:

When the end user selects new from the account dropdown, the script closes the grid, clears the selection and opens the new account dialogue.
After the account is created, the new account creation dialogue is closed.
The script then attempts to repopulate all JQXGrids on the page to reflect the addition.
The script is making duplicate dropdowns below each dropdown.
The account that is created is auto selected in the dropdown that created the account. However, when selected the grid ONLY shows that account, when the duplicate grids are selected, all accounts show up AND when the dialogue is closed, the dropdown grid that was clicked on (the duplicate) stays on the screen.

Here is my HTML/Razor Script section that all JQXGrids are modeled after:

<div class="col-sm-7">
    <div id="jqxSubAccountDropdownButton">
        <div id="jqxSubAccountDropdownWidget" style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxSubAccountDropdownGrid"></div>
        </div>
    </div>
</div>

Here is the script section that is supposed to autopopulate it initiate the sequence:

function PopulateAccounts(rePopulate) {
    PopulateAccountArray("jqxSubAccountDropdownGrid", F, null, null, rePopulate);
}

Here is the script section that Saves the new account and spits back the record ID Guid:

function SaveAccount(GridName) {
    var rowIndex;
    var AccountNumber = $("#txtNewAccountAccountNumber").val();
    var AccountTypeID = $("#listAddNewAccountType").val();
    var Balance = $("#txtEndingBalance").val();
    var CurrencyReferenceListID = $("#listNewAccountCurrency").val();
    var Description = $("#txtNewAccountDescription").val();
    var Name = $("#txtAccountName").val();
    var Note = $("#txtNewAccountNote").val();
    var OpenBalance = $("#txtEndingBalance").val();
    var OpenBalanceDate = $("#txtEndingDate").val();
    var OrderChecksAt = $("#txtNewAccountOrderChecks").val();
    var ParentID = $("#chkAddNewAccountSubAccount").val();
    var RoutingNumber = $("#txtNewAccountRoutingNumber").val();
    var TaxLineInfoReturnTaxLineID = $("#listNewAccountTaxLineMapping").val();

    var _AccountData = {
        "GridName": GridName,
        "AccountData": {
            "Name": Name,
            "IsActive": T,
            "ParentID": ParentID,
            "AccountTypeID": AccountTypeID,
            "SpecialAccountTypeID": null,
            "IsTaxAccount": null,
            "AccountNumber": AccountNumber,
            "RoutingNumber": RoutingNumber,
            "Description": Description,
            "Note": Note,
            "Balance": OpenBalance,
            "TotalBalance": OpenBalance,
            "OpenBalance": OpenBalance,
            "OpenBalanceDate": OpenBalanceDate,
            "TaxLineInfoReturnTaxLineID": TaxLineInfoReturnTaxLineID,
            "CashFlowClassification": null,
            "CurrencyReferenceListID": CurrencyReferenceListID,
            "OrderChecksAt": OrderChecksAt
        }
    };

    callService("POST", g_WebServiceSaveAccountURL, _AccountData, function (jsonData) {
        alert("Record Added");

        PopulateAccounts(true);

        rowIndex = GetRowIDOfItemByGUID(GridName, jsonData.AccountID, "AccountIndex");
        $("#" + GridName).jqxGrid('selectrow', rowIndex);
    });
}

Here is the Script section that is supposed to create the grid and assign an event binding:

function AccountsMulticolumn(GridName, data, rePopulate) {
    var _Object = $("#" + GridName);
    var _ObjectParent = _Object.parent();
    var _ObjectParentParent = _Object.parent().parent();

//      if (rePopulate) {
//          _Object.remove();
//          _ObjectParent.append("<div id='" + GridName + "'></div>")
//      }

    var source = { localdata: data, datatype: "array" };

    $(_ObjectParentParent).jqxDropDownButton({ width: 150, height: 25 });
    $(_Object).jqxGrid({
        width: 550,
        height: 200,
        source: source,
        theme: 'energyblue',
        columns: [
            { text: '', datafield: 'AccountIndex', width: 0 },
            { text: 'Account Name', datafield: 'AccountName', width: 300 },
            { text: 'Account Type', datafield: 'AccountType', width: 200 }
        ]
    });

    $(_Object).jqxGrid('selectionmode', 'singlerow');

    $(_Object).bind('rowselect', function (event) {
        var args = event.args;
        var row = $(_Object).jqxGrid('getrowdata', args.rowindex);

        if (row["AccountName"].toString().toLowerCase() !== "new") {
            var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row["AccountName"] + '</div>';
            _ObjectParentParent.jqxDropDownButton('close');
        }
        $(_ObjectParentParent).jqxDropDownButton('setContent', dropDownContent);
        if (row["AccountName"].toString().toLowerCase() === "new") {
            _ObjectParentParent.jqxDropDownButton('close');
            $("#divNewAccountDetails").dialog("open");
            $(_Object).jqxGrid('clearselection');
            g_JQXGridName = GridName;
        }
    });
}

Here is the Script section that gets the data from the API and parses it into a usable format for the JQXGrid functions:

function PopulateAccountArray(GridName, ShowNew, rePopulate) {
    callService("GET", g_WebServiceAccountsGetAllSpecialURL, null, function (jsonResult) {
        var data = new Array();

        var AccountIndex_Default = [""];
        var AccountName_Default = [""];
        var AccountNotes_Default = [""];

        if (ShowNew) {
            AccountName_Default = ["New"];
        }

        var _oAccountID = [];
        var _oAccountName = [];
        var _oAccountNotes = [];

        if (jsonResult.length > 0) {
            for (i = 0; i < jsonResult.length; i++) {
                _oAccountID[i] = jsonResult[i].RecordID;
                _oAccountName[i] = jsonResult[i].AccountName;
                _oAccountNotes[i] = jsonResult[i].AccountType;
            };

            var AccountIndex_FromService = _oAccountID;
            var AccountName_FromService = _oAccountName;
            var AccountType_FromService = _oAccountNotes;

            var AccountIndex = AccountIndex_Default.concat(AccountIndex_FromService);
            var AccountName = AccountName_Default.concat(AccountName_FromService);
            var AccountType = AccountNotes_Default.concat(AccountType_FromService);
        } else {
            var AccountIndex = AccountIndex_Default;
            var AccountName = AccountName_Default;
            var AccountType = AccountNotes_Default;
        }

        for (var i = 0; i < AccountIndex.length; i++) {
            var row = {};
            row["AccountIndex"] = AccountIndex[i];
            row["AccountName"] = AccountName[i];
            row["AccountType"] = AccountType[i];
            data[i] = row;
        }

        AccountsMulticolumn(GridName, data, rePopulate);
    });
}

And finally my AJAX call:

function callService(Type, Url, Data, successFunction) {
    $.ajax({
        type: Type,                     // GET or POST or PUT or DELETE verb
        dataType: "json",
        async: false,
        url: Url,                       // Location of the service
        data: Data,                     // Data sent to server
        success: successFunction,
        error: serviceErrorHandler      // When Service call fails
    });
}

John Schultz John Schultz · Accepted Answer · 2016-07-28T06:57:58

Turns out, I am my own worst enemy. I realized that function call placement is pretty much IMPORTANT. So after completely rewriting my functions, mvc razor code placement, making sure I was using Synchronous calls in my AJAX call, and re specifying the grid data for the JQ Widget grid, all issues were resolved.

Weird execution of JavaScript, JQuery and JQWidgets

1 Answers