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
flashing a white screen while open new tab
cntvertex in Discussions on
13 Replies
Stable version of Edge insider browser
HotCakeX in Discussions on
35 Replies
Tabs and Dark Mode
cjc2112 in Discussions on
22 Replies
How to Prevent Teams from Auto-Launch
chenrylee in Microsoft Teams on
28 Replies
description for autoplay blocking in settings page
HotCakeX in Discussions on
8 Replies