Home

Problem with Bootstrap 4 Modal

%3CLINGO-SUB%20id%3D%22lingo-sub-797847%22%20slang%3D%22en-US%22%3EProblem%20with%20Bootstrap%204%20Modal%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-797847%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20using%20Edge%20Dev%2077.0.235.5%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20showing%2Fhiding%20a%20Bootstrap%204%20modal%20on%20Ajax%20calls%20using%20this%20jQuery%20code%3A%3C%2FP%3E%3CP%3E%24(document).ajaxStart(function%20()%20%7B%3CBR%20%2F%3E%24(%E2%80%98%23wait%E2%80%99).modal(%E2%80%98show%E2%80%99)%3B%3CBR%20%2F%3E%7D)%3B%3CBR%20%2F%3E%24(document).ajaxStop(function%20()%20%7B%3CBR%20%2F%3E%24(%E2%80%98%23wait%E2%80%99).modal(%E2%80%98hide%E2%80%99)%3B%3CBR%20%2F%3E%7D)%3B%3C%2FP%3E%3CP%3EWhen%20I%20make%20an%20Ajax%20call%20from%20an%20dropdown%20change%20in%20my%20View%2C%20this%20works%20fine.%20This%20Ajax%20call%20populates%20a%20table%20dynamically%20with%20links%20in%20the%20table%20header.%20Clicking%20one%20of%20these%20links%20will%20repeat%20the%20Ajax%20call%20with%20the%20data%20necessary%20to%20sort%20the%20table%20by%20the%20table%20header%20id%20on%20the%20backend%2C%20send%20the%20result%20to%20.done%7B%7D%20and%20rewrite%20the%20table.%20In%20Edge%20Dev%2C%20when%20I%20make%20the%20Ajax%20call%20from%20the%20dynamically%20generated%20link%2C%20the%20Bootstrap%204%20modal%20does%20not%20close%20on%20%24(%E2%80%98%23wait%E2%80%99).modal(%E2%80%98hide%E2%80%99).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20code%20works%20fine%20in%20Chrome%2C%20IE%20and%20Firefox%20but%20not%20in%20Edge%20Dev.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-799066%22%20slang%3D%22en-US%22%3ERe%3A%20Problem%20with%20Bootstrap%204%20Modal%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-799066%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F384375%22%20target%3D%22_blank%22%3E%40Carolyn_Schroeder%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20found%20a%20workaround%20which%20is%20to%20clear%20the%20div%20holding%20the%20dynamically%20generated%20table%20before%20the%20data%20is%20retrieved%20rather%20than%20after%20the%20data%20is%20retrieved.%26nbsp%3B%20I%20have%20attached%20the%20workaround%20solution.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-820119%22%20slang%3D%22en-US%22%3ERe%3A%20Problem%20with%20Bootstrap%204%20Modal%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-820119%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F384375%22%20target%3D%22_blank%22%3E%40Carolyn_Schroeder%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20am%20happy%20to%20report%20that%20the%20problem%20I%20report%20in%20the%20Reproduction%20project%20has%20been%20fixed%20in%20EdgeDev%26nbsp%3B%3CSPAN%3E78.0.249.1%3C%2FSPAN%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Carolyn_Schroeder
Occasional Contributor

I am using Edge Dev 77.0.235.5

 

I am showing/hiding a Bootstrap 4 modal on Ajax calls using this jQuery code:

$(document).ajaxStart(function () {
$(‘#wait’).modal(‘show’);
});
$(document).ajaxStop(function () {
$(‘#wait’).modal(‘hide’);
});

When I make an Ajax call from an dropdown change in my View, this works fine. This Ajax call populates a table dynamically with links in the table header. Clicking one of these links will repeat the Ajax call with the data necessary to sort the table by the table header id on the backend, send the result to .done{} and rewrite the table. In Edge Dev, when I make the Ajax call from the dynamically generated link, the Bootstrap 4 modal does not close on $(‘#wait’).modal(‘hide’).

 

This code works fine in Chrome, IE and Firefox but not in Edge Dev.

2 Replies

@Carolyn_Schroeder 

I have found a workaround which is to clear the div holding the dynamically generated table before the data is retrieved rather than after the data is retrieved.  I have attached the workaround solution.

@Carolyn_Schroeder 

 

I am happy to report that the problem I report in the Reproduction project has been fixed in EdgeDev 78.0.249.1 

Related Conversations
Tabs and Dark Mode
cjc2112 in Discussions on
46 Replies
flashing a white screen while open new tab
Deleted in Discussions on
14 Replies
Stable version of Edge insider browser
HotCakeX in Discussions on
35 Replies
Security Community Webinars
Valon_Kolica in Security, Privacy & Compliance on
13 Replies
How to Prevent Teams from Auto-Launch
chenrylee in Microsoft Teams on
29 Replies