javascript - 一旦我的 MSSQL 数据库发生变化，如何更新我的用户界面？
问题描述
我正在使用 Quarkus、Hibernate、MSSQL 和 OptaPlanner 开发一个简单的仓库管理系统。当我点击“解决”按钮时，我希望将客户订单分配到库存位置。当我的系统解决（使用约束）时，StockLocationID 将针对 ShopifyOrders，例如 CustomerOrder1(PK) 将分配给 StockLocationID(FK) = 26。
它已在数据库中成功更新，但是数据应该被检索回来并反映到我的用户界面上，我不知道为什么。我一直在使用quarkus-school-timetableling示例（OptaPlanner），现在遇到了这个问题，它没有将我的数据库中的更改反映到我的 UI 中。
这可能是我的 JavaScript 文件的问题吗？如果我使用演示数据，它工作得很好，但由于我使用的是我自己的数据库，所以它不起作用。
这是我当前的 javascript 文件：
function refreshAllDetails() {
$.getJSON("/allDetails", function (allDetails) {
refreshSolvingButtons(allDetails.solverStatus != null && allDetails.solverStatus !== "NOT_SOLVING");
$("#score").text("Score: " + (allDetails.score == null ? "?" : allDetails.score));
const allDetailsByRoom = $("#allDetailsByRoom");
allDetailsByRoom.children().remove();
const allDetailsByProductSKU = $("#allDetailsByProductSKU");
allDetailsByProductSKU.children().remove();
const allDetailsByProductName = $("#allDetailsByProductName");
allDetailsByProductName.children().remove();
const unassignedShopify = $("#unassignedShopify");
unassignedShopify.children().remove();
const theadByRoom = $("<thead>").appendTo(allDetailsByRoom);
const headerRowByRoom = $("<tr>").appendTo(theadByRoom);
headerRowByRoom.append($("<th>Picking Station</th>"));
$.each(allDetails.roomList, (index, room) => {
headerRowByRoom
.append($("<th/>")
.append($("<span/>").text(room.name))
.append($(`<button type="button" class="ml-2 mb-1 btn btn-light btn-sm p-1"/>`)
// .append($(`<small class="fas fa-trash"/>`)
.click(() => deleteRoom(room))));
});
const theadByProductSKU = $("<thead>").appendTo(allDetailsByProductSKU);
const headerRowByProductSKU = $("<tr>").appendTo(theadByProductSKU);
headerRowByProductSKU.append($("<th>Stock Location</th>"));
const productSKUList = [...new Set(allDetails.shopifyList.map(shopify => shopify.productSKU ))];
$.each(productSKUList, (index, productSKU) => {
headerRowByProductSKU
.append($("<th/>")
.append($("<span/>").text(productSKU)));
});
const theadByProductName = $("<thead>").appendTo(allDetailsByProductName);
const headerRowByProductName = $("<tr>").appendTo(theadByProductName);
headerRowByProductName.append($("<th>Stock Location</th>"));
const productNameList = [...new Set(allDetails.shopifyList.map(shopify => shopify.productName))];
$.each(productNameList, (index, productName) => {
headerRowByProductName
.append($("<th/>")
.append($("<span/>").text(productName)));
});
//Chnage productSKU to stockLocation
const tbodyByRoom = $("<tbody>").appendTo(allDetailsByRoom);
const tbodyByProductSKU = $("<tbody>").appendTo(allDetailsByProductSKU);
const tbodyByProductName = $("<tbody>").appendTo(allDetailsByProductName);
$.each(allDetails.stockLocationList, (index, stockLocation) => {
const rowByRoom = $("<tr>").appendTo(tbodyByRoom);
rowByRoom
.append($(`<th class="align-middle"/>`)
.append($("<span/>").text(`${stockLocation.stockLocation }`)
.append($("<br><em>").text(`SKU: ${stockLocation.productSKU}`)
.append($(`<button type="button" class="ml-2 mb-1 btn btn-light btn-sm p-1"/>`)))));
// .append($(`<small class="fas fa-trash"/>`)
// .click(() => deleteStockLocation(stockLocation))))));
const rowByProductSKU = $("<tr>").appendTo(tbodyByProductSKU);
rowByProductSKU
.append($(`<th class="align-middle"/>`)
.append($("<span/>").text(`
${stockLocation.productSKU}
`)));
$.each(allDetails.roomList, (index, room) => {
rowByRoom.append($("<td/>").prop("id", `stockLocation${stockLocation.id}room${room.id}`));
});
const rowByProductName = $("<tr>").appendTo(tbodyByProductName);
rowByProductName
.append($(`<th class="align-middle"/>`)
.append($("<span/>").text(`
${stockLocation.tower}
`)));
$.each(productSKUList, (index, productSKU) => {
rowByProductSKU.append($("<td/>").prop("id", `stockLocation${stockLocation.id}productSKU${convertToId(productSKU)}`));
});
$.each(productNameList, (index, productName) => {
rowByProductName.append($("<td/>").prop("id", `stockLocation${stockLocation.id}productName${convertToId(productName)}`));
});
});
$.each(allDetails.shopifyList, (index, shopify) => {
const color = pickColor(shopify.productSKU);
const lessonElementWithoutDelete = $(`<div class="card lesson" style="background-color: ${color}"/>`)
.append($(`<div class="card-body p-2"/>`)
.append($(`<h5 class="card-title mb-1"/>`).text(shopify.customerName))
.append($(`<p class="card-text ml-2 mb-1"/>`)
.append($(`<p class="card-text ml-2"/>`).text(`SKU: ${shopify.productSKU}`)
.append($(`<small class="ml-2 mt-1 card-text text-muted align-bottom float-right"/>`).text(shopify.shopifyID))
.append($(`<br><em>`).text(`Name: ${shopify.productName}`)))));
const lessonElement = lessonElementWithoutDelete.clone();
lessonElement.find(".card-body");
//$(`<button type="button" class="ml-2 btn btn-light btn-sm p-1 float-right"/>`)
//.append($(`<small class="fas fa-trash"/>`)
//.click(() => deleteShopify(shopify)
if (shopify.stockLocation == null || shopify.room == null) {
unassignedShopify.append(lessonElement);
} else {
$(`#stockLocation${shopify.stockLocation.id}room${shopify.room.id}`).append(lessonElement);
$(`#stockLocation${shopify.stockLocation.id}productSKU${convertToId(shopify.productSKU)}`).append(lessonElementWithoutDelete.clone());
$(`#stockLocation${shopify.stockLocation.id}productName${convertToId(shopify.productName)}`).append(lessonElementWithoutDelete.clone());
}
});
});
}
function convertToId(str) {
// Base64 encoding without padding to avoid XSS
return btoa(str).replace(/=/g, "");
}
function solve() {
$.post("/allDetails/solve", function () {
refreshSolvingButtons(true);
}).fail(function (xhr, ajaxOptions, thrownError) {
showError("Start solving failed.", xhr);
});
}
function refreshSolvingButtons(solving) {
if (solving) {
$("#solveButton").hide();
$("#stopSolvingButton").show();
if (autoRefreshIntervalId == null) {
autoRefreshIntervalId = setInterval(refreshAllDetails, 2000);
}
} else {
$("#solveButton").show();
$("#stopSolvingButton").hide();
if (autoRefreshIntervalId != null) {
clearInterval(autoRefreshIntervalId);
autoRefreshIntervalId = null;
}
}
}
function stopSolving() {
$.post("/allDetails/stopSolving", function () {
refreshSolvingButtons(false);
refreshAllDetails();
}).fail(function (xhr, ajaxOptions, thrownError) {
showError("Stop solving failed.", xhr);
});
}
function showError(title, xhr) {
const serverErrorMessage = !xhr.responseJSON ? `${xhr.status}: ${xhr.statusText}` : xhr.responseJSON.message;
console.error(title + "\n" + serverErrorMessage);
const notification = $(`<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="min-width: 30rem"/>`)
.append($(`<div class="toast-header bg-danger">
<strong class="mr-auto text-dark">Error</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>`))
.append($(`<div class="toast-body"/>`)
.append($(`<p/>`).text(title))
.append($(`<pre/>`)
.append($(`<code/>`).text(serverErrorMessage))
)
);
$("#notificationPanel").append(notification);
notification.toast({delay: 30000});
notification.toast('show');
}
$(document).ready(function () {
$.ajaxSetup({
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
;
// Extend jQuery to support $.put() and $.delete()
jQuery.each(["put", "delete"], function (i, method) {
jQuery[method] = function (url, data, callback, type) {
if (jQuery.isFunction(data)) {
type = type || callback;
callback = data;
data = undefined;
}
return jQuery.ajax({
url: url,
type: method,
dataType: type,
data: data,
success: callback
})
};
});
$("#refreshButton").click(function () {
refreshAllDetails();
});
$("#solveButton").click(function () {
solve();
});
$("#stopSolvingButton").click(function () {
stopSolving();
});
refreshAllDetails();
});
它会与我的 JavaScript 文件中的这个函数有什么特别的关系吗？
$(document).ready(function () {
$.ajaxSetup({
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
;
// Extend jQuery to support $.put() and $.delete()
jQuery.each(["put", "delete"], function (i, method) {
jQuery[method] = function (url, data, callback, type) {
if (jQuery.isFunction(data)) {
type = type || callback;
callback = data;
data = undefined;
}
return jQuery.ajax({
url: url,
type: method,
dataType: type,
data: data,
success: callback
})
};
});
解决方案
推荐阅读
- amazon-ec2 - CM & CD 服务器如何在 sitecore 中通信？
- php - 我从 dompdf 生成了多个 pdf，但是如何在本地保存这些文件
- json - 如何验证 json 对象中的 JSON 对象数组？
- mongodb - Deno 未捕获错误：不知道这样的主机。（操作系统错误 11001）
- c# - 构造函数如何设置类成员的默认值？
- python - Python：创建对象列表或将字符串转换为对象
- java - 如何创建时钟变量 - java.time
- javascript - 无法在 react native 中导入 .js 文件
- javascript - 无法使用 reactjs 中的嵌套 map() 和 useEffect() 以正确的顺序呈现产品
- c++ - 未通过时 std::bind() 抛出错误