0
OK, ... Я использую JQuery v2.2.3, JQWidgets v4.1.2 для интерфейса с ASP.NET MVC 5 для задней части. Я использую ASP.NET C#.Странное выполнение JavaScript, JQuery и JQWidgets
Моя страница будет похожа на SPA, потому что она огромна. часть, с которой я сталкиваюсь, заключается в том, где сценарий должен перезаписывать все мои JQXGrids, используя синхронный вызов Ajax. Я знаю, что Ajax должен был быть синхронным, но когда a-synchrony вызовы ajax игнорируют мои повторяющиеся вызовы. Вот что должно произойти:
- Когда конечный пользователь выбирает новый из раскрывающегося списка, скрипт закрывает сетку, очищает выделение и открывает диалог новой учетной записи.
- После создания учетной записи открывается новый диалог создания учетной записи.
- (Здесь это странно) Затем сценарий должен повторно заполнить все JQXGrids на странице, чтобы отразить добавление.
- И наконец, созданная учетная запись должна быть автоматически выбрана в раскрывающемся списке, создавшем учетную запись.
Вот что сценарий на самом деле делает в своем текущем состоянии:
- Когда конечный пользователь выбирает новый из счета выпадающего списка, сценарий закрывает сетку, очищает выбор и открывает новый диалог с учетной записью.
- После создания учетной записи открывается новый диалог создания учетной записи.
- Затем сценарий пытается повторно заполнить все JQXGrids на странице, чтобы отразить добавление.
- Сценарий создает дубликаты выпадающих под каждым выпадающим списком.
- Созданная учетная запись автоматически выбирается в раскрывающемся списке, создавшем учетную запись. Однако при выборе сетки ТОЛЬКО показывает эту учетную запись, когда выбраны повторяющиеся сетки, при открытии диалога все учетные записи отображают И, когда диалог закрыт, на экране отображается выпадающая сетка, на которую была нажата (дубликат).
Вот мой/раздел HTML Бритва скрипт, который все JQXGrids моделируют:
<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>
Вот раздел сценария, который, как предполагается, заполняются автоматически он инициирует последовательность:
function PopulateAccounts(rePopulate) {
PopulateAccountArray("jqxSubAccountDropdownGrid", F, null, null, rePopulate);
}
Вот раздел сценария, который сохраняет новую учетную запись и возвращает обратно идентификатор записи. 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);
});
}
Вот раздел сценария, который предполагается создать сетку и назначить событие связывания:
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;
}
});
}
Вот раздел скрипта, который получает данные от API и разбирает его в удобный формат для JQXGrid функции:
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);
});
}
И, наконец, мой вызов AJAX:
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
});
}