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
Carolyn_Schroeder
New 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.

1 Reply

@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.