How can I ensure that a Bootstrap modal is fully loaded before initiating an action?

Since updating my website to Bootstrap 4, the event loaded.bs.modal has ceased to function.

Is there a method in Bootstrap 4 to execute a certain action once my Bootstrap modal has completely loaded?

Answer №1

$(document).ready(function(){ 
     $('#TestModal').on('shown.bs.modal', function() {
         var counter = 0;
         setTimeout("validateDropdown('" + period + "', '" + staffLastName + "', '" + counter + "')",100);
     });
});

function validateDropdown(period, staffLastName, counter)
{
    if ($("#dropdownList option").length > 0 || counter >= 100) {
        //Dropdown loaded successfully
    } else {
        counter++;
        setTimeout("validateDropdown('" + period + "', '" + staffLastName + "', '" + counter + "')",100);
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to retrieve all IDs within an array of objects using a foreach loop and merge the data associated with each ID?

I am currently working on a TypeScript API where I have merged all the data from this API with some additional data obtained from another API function. I have provided a snippet of my code which adds data to the first index of an array. M ...

Utilize AngularJS to reattach a DOM node rather than simply updating it

Within my template, I have the following setup: <div> <a ng-href="tel:{{phone}}">{{ phone }}</a> </div> Angular updates the link's DOM node when $scope.phone changes, linking it to the new phone number with no issues. Ho ...

Fixing a CSS animation glitch when using JavaScript

I'm facing an unusual issue with my CSS/HTML Check out my code below: a:hover { color: deeppink; transition: all 0.2s ease-out } .logo { height: 300px; margin-top: -100px; transition: all 0.2s ease-in; transform: scale(1) } .logo:hover { transit ...

"angular-seed's web-script.js and cross-origin resource sharing (cors

I'm having trouble for the second day... I'm attempting to retrieve some json from an external domain, but I'm facing CORS issues. I believe that the problem lies with my node.js server not sending Origin: http://api.bob.com I've res ...

Whenever I click on something, my preloader animation pops up without fail

Is there a way to make my preloader animation only appear once when entering the website or just for the home page, instead of every time I click on something? <div class="loader"><div style="width=150%; height=150%; background-color:white;" id=" ...

Downloading Breeze Navigation Properties for Offline Use

I am currently utilizing the most recent versions of Angular, breeze, and EF. Within the client environment, I am working on creating a sophisticated object named Quote that is associated with a job. This Quote includes a QuoteMeasure, which in turn conta ...

Troubleshooting issues with transferring Coldfusion form data to Javascript and CFC, facing challenges with code execution

I am attempting to transfer my form data into a JavaScript function, which will then pass it into my CFC function for database insertion. Unfortunately, it is not functioning correctly. Below is the JS code: Updated: removed "." in front of alert() and ur ...

Develop a client-side API utilizing various libraries

After completing the server side of an API that delivers HTML via JSON using REST through CodeIgniter, I am now exploring how to create a client-side API with JavaScript. The goal is to retrieve data from the server through the API, display it in the DOM, ...

Struggling to figure out why BXSlider won't cooperate

I'm struggling to make BXSlider work on my website. Here is the code I have used. The JS/CSS files are properly linked and downloaded from the site with correct paths. $(document).ready(function(){ $(document).ready(function(){ $('.bx ...

"Position the label on the left and input on the right for

Having trouble with label and input alignment - I've attempted: <div class="form-group"> <label class="control-label" for="" style="float: left;font-size: 20px;padding-right: 10px;">ID : </label> <input style= ...

The rate limit feature in NextJS does not function properly when used with middleware

Currently, I have implemented a rate limit using the lru-cache based on the official example provided by Vercel, and it is functioning flawlessly. My intention was to consolidate the try-catch block in a Middleware to handle all routes, instead of duplica ...

Error! Attempting to assign a value to property 'getName' of an undeclared object

<script> var Employee = new function(name) { this.name=name; } Employee.prototype.getName = function() { return this.name; } var PermanenetEmployee = new function(annualsalary) { this.annualsalary=ann ...

Do CSS Stylesheets load asynchronously?

Is there a difference in how stylesheets are loaded via the link tag - asynchronously or synchronously? In my design, I have two stylesheets: mura.css and typography.css. They are loaded within the head section of the page, with typography.css being load ...

Using CSS/HTML to showcase rows in a vertical table format (or similar)

Can someone please help me with formatting my tabular data in a specific way? column A | column B | column C | column D | ------------------------------------------- 1-1 | 2-1 | 3-1 | 4-1 | ------------------------------------------- 1 ...

Enhancing Type Safety with TypeScript in 2020: A User-Friendly Approach

It is widely understood that TypeScript conducts type-checking solely at compile-time. While there are existing methods, like io-ts, to incorporate runtime checks, I can't help but wonder if a more straightforward approach exists. For instance, cons ...

Encountering an Unspecified Error in JavaScript while rapid-clicking on a RadGrid with a DetailTable

When testing, I am using Internet Explorer 11. Within a RadGrid control, I have a list of Groups (groupId, groupName) displayed. Each Group includes a DetailTable with the GroupMembers (memberId, groupId, memberName). The RadGrid is located in a Content ...

Table depicting the conversion of a JSON array into a string

Currently working on an HTML table with AngularJS integration. My goal is to output the array as a regular string instead of an array format and also ensure the date displays correctly. [{"userId":12,"username":"Smith, Al","date":"2018-03-07T01:00:07.89 ...

Setting a default value in react-select

Recently, I developed a react-select component that is compatible with redux-form. The SelectInput component looks like this: const MySelect = props => ( <Select {...props} value={props.input.value} onChange={value => props.input.on ...

How do I link data from a boostrap modal in vue.js?

To display a bootstrap modal, we can utilize the data-toggle attribute. For instance: <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#msg">Open Modal</button> I want to show the modal by using a boolean var ...

retrieve file through an ajax call

When I click on a button, I want to send an AJAX download request. I attempted it like this: Here is my JavaScript code: var xhr = new XMLHttpRequest(); xhr.open("GET", "download.php"); xhr.send(); In the download.php file: <? header("Cache-Control: ...