Posts

Showing posts with the label Bootstrap Modal

Donate

Bootstrap Modal In ASP.NET MVC With CRUD Operations

Image
Good afternoon fellow developers! I have been working with Bootstrap Modals before and it's time to demonstrate its significance using a simple ASP.NET MVC CRUD (Create Update Delete) application project using Entity Framework Database First approach. First is to create a basic BookDetails table on your SQL Server instance. USE [DemoDB] GO /****** Object: Table [dbo].[BookDetails] Script Date: 11/2/2020 12:26:53 PM ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[BookDetails]( [BookSerialNo] [int] IDENTITY (1,1) NOT NULL , [BookISBN] [ nchar ](15) NULL , [BookTitle] [varchar](120) NULL , [BookAuthor] [varchar](60) NULL , [BookPublisher] [varchar](50) NULL , [BookCategory] [varchar](20) NULL , PRIMARY KEY CLUSTERED ( [BookSerialNo] ASC ) WITH (PAD_INDEX = OFF , STATISTICS_NORECOMPUTE = OFF , IGNORE_DUP_KEY = OFF , ALLOW_ROW_LOCKS = ON , ALLOW_PAGE_LOCKS = ON ) ON [ PRIMARY ] ) ON [ PRIMARY ] GO Next is to create an ASP....

Bootstrap Modal Black Background Not Closing After Form Is Submitted

Hello fellow developers! Normally, when closing a Bootstrap Modal, the black background also disappear. However, if the closing of Bootstrap Modal is triggered by a close or button event fired from a "Yes" button of jQuery UI dialog the bootstrap dialog is closed but the black background of the bootstrap modal is still visible. The solution that I came up with is to close the modal dialog before the call to submit the form in the Yes callback function of the jQuery UI Dialog. function fnOpenNormalDialog($form) { var form = $form; $( '<div id="divConfirm"></div>' ).dialog({ resizable: false , modal: false , title: "Confirm Shipping" , height: 150, width: 350, open: function () { $( this ).html( "Confirm that this part is ready to be shipped?" ); }, buttons: { "Yes" : function () { $( this ).dialog( 'close' ); Callback( true , form); }, "No" : function () {...

Bootstrap Modal Hide Not Working On Form Submit In ASP.NET MVC

Good afternoon! I'm working on a ASP.NET MVC which uses the oldest version of Bootstrap which 3.0. Normally when working with modals, the hide() function works if using updated versions of the Bootstrap given the code below. The snippet should close the modal after a form has been submitted but this doesn't work as expected when working with the oldest version. $( "#modal-add" ).on( "submit" , "#form-add" , function (e) { e.preventDefault(); var form = $( this ); $.ajax({ url: form.attr( "action" ), method: form.attr( "method" ), data: form.serialize(), success: function (data) { $( "#modal-add" ).modal( 'hide' ); //close modal function $( "#tblEmployee" ).bootstrapTable( 'load' , data); showAlert( 'Saving of record successful!' , 'success' ); }, error: function (er) { showAlert( 'Error saving record. Please try again later.' , 'dan...

Donate