I am developing a web application for managing orders and finance in a restaurant. To enhance the functionality of my application, I require more screens to operate with. To facilitate this, I have implemented a small function to toggle between visibility:
function switchTab(toActivate, toDeactivate) {
var $toActivate = $(toActivate);
var $toDeactivate = $(toDeactivate);
if ($toDeactivate.is(":visible")) {
$toDeactivate.css("visibility", "hidden");
$toActivate.css("visibility", "visible");
}
}
In addition, I have also designed a function that allows for deleting existing orders. This function is utilized to delete an order while on the screen for creating one.
function delete_order() {
if (confirm("Are you sure you want to delete this order?")) {
if ($("#new-order").is(":visible")) {
switchTab(orderListScreen, newOrderScreen);
switchTab(orderInformationScreen, availableProductsScreen);
alert("Only this is getting called");
} else if ($("#list").is(":visible")) {
$(".selectedRow").remove();
alert("Why doesnt this get called?");
}
}
}
Issue
Whenever I create and then delete an order using the delete button triggering the delete_order() function, it works well as it refers to the correct section of the code (
if (newOrderScreen.is(":visible"))The snippet of code to bring up a new order screen is as follows:
function new_order() {
switchTab(newOrderScreen, orderListScreen);
switchTab(availableProductsScreen, orderInformationScreen);
}
Note: The
.selectedRowclass is assigned when selecting a row.Note: The
#listscreen is displayed by default, while the#new-orderscreen is only shown upon clicking a respective button.
The CSS styling for the two switching screens is outlined below:
#new-order {
position: absolute;
left: 0;
top: 0;
width: 40%;
z-index: 1;
visibility: hidden;
}
#list {
display: block;
}
Query
Why does the code not select the right part of the if statement for existing orders? And why does it function correctly when displaying the new order screen?