I'm looking to enhance my UI by implementing a blocking feature with a spinner display.
My attempt involved the following code:
blockUI.start("<div class='dots-loader'>Minions are Working!</div>");
// code for fetching data from server
blockUI.stop();The 'dots-loader' class is sourced from the CSS provided at:
While this successfully blocks the UI and displays the message, it shows my HTML as plain text. Is there a way to have the spinner embedded within the custom blockUI message?
While it may not be the ideal solution, I had to customize a library file in order to display a loading image instead of just text. The angular-block-ui.ng.html file only shows "Loading.." as seen in the link below:
https://github.com/McNull/angular-block-ui/blob/master/src/angular-block-ui/angular-block-ui.ng.html
Here is the HTML code:
<div class="block-ui-overlay"></div>
<div class="block-ui-message-container" aria-live="assertive" aria-atomic="true">
<div class="block-ui-message" ng-class="$_blockUiMessageClass">
{{ state.message }}</div>
</div>
In your project's angular-block-ui.js or min file, locate and add the following code snippet:
// Automatically generated.
// This file is already embedded in your main javascript output, there's no need to include this file
// manually in the index.html. This file is only here for your debugging pleasures.
angular.module('blockUI').run(['$templateCache', function($templateCache){
$templateCache.put('angular-block-ui/angular-block-ui.ng.html', '<div class=\"block-ui-overlay\"></div><div class=\"block-ui-message-container\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"block-ui-message\" ng-class=\"$_blockUiMessageClass\">{{ state.message }}</div></div>');
}]);
Next, insert your own code
<div class='dots-loader'>Minions are Working!</div> $templateCache.put('angular-block-ui/angular-block-ui.ng.html', '<div class=\"block-ui-overlay\"></div><div class=\"block-ui-message-container\" aria-live=\"assertive\" aria-atomic=\"true\"><div class=\"block-ui-message\" ng-class=\"$_blockUiMessageClass\">{{ state.message }}
<div class='dots-loader'>Minions are Working!</div></div></div>');
}]);
Finally, simply add a blank space text:
blockUI.start(' ');
I hope you find a better solution. Thank you!
Within my application, there lies a form consisting of numerous input fields. These text input fields are displayed based on the selection made via radio buttons. I am currently validating these input fields by specifying the field name and its correspondi ...
Is it feasible to include the URL for the "checkout.js" JavaScript file in the package.json file, rather than directly adding it to the Index.html? Please note that this is a standalone JavaScript file and not an NPM package. The purpose behind this appr ...
How can I dynamically load my JSON data in a popup when a specific div is clicked? Here is my code: <div class="col-xs-12 col-sm-6 col-lg-4 checkContent" ng-repeat = "appreciate in CustAppre" ng-click = "openBigDiv()"> <div c ...
I have implemented a component loading and an interceptor to handle all requests in my application. The loading component is displayed on the screen until the request is completed. However, I am encountering an error whenever the component inside my router ...
I'm experimenting with AJAX calls to establish communication between my Javascript frontend in a chrome extension and the Flask API where I intend to utilize my Machine Learning algorithms. content.js console.log("Let's get this application ...
Looking for some help with Javascript on a simple task. When a specific option is chosen, I want to add an input field to a div element. <select name="amount" > <option value="50">50$</option> <option value="100">100$</o ...
I am encountering an issue while attempting to extract information from PDF files using a nodejs script. Upon running the program, I encounter the following error: Error: stream must have data at error (eval at <anonymous> (/Users/.../node_modules/ ...
I have set up my project with the following configurations: react is at version 15.2.1 material-ui is at version 0.15.2 I am using express and universal-router for server-side rendering Every time I include a material-ui component, I encounter this erro ...
Looking to utilize the response of a first API call in a second API call. The situation is such that I need to fetch data from the first API and use it in the second API call. I believe a synchronous API call would be necessary. While attempting to imple ...
Below is a JSON output I have received : [ { positionCode: "POS1", positionName: "POSITION 1", positionDescription: "", parentPosition: "POS2", }, { positionCode: "POS2", positionName: "POSITION ...
At the moment, the data being displayed on my page is an array, as shown in the snippet below: https://i.stack.imgur.com/zAvrc.png However, I only want to retrieve or display the project names. This is all I have at the moment: fetch(context,id){ ...
Currently, I am working on developing a web server using Node.js and am in the process of ensuring comprehensive test coverage with Jest. One specific function, logout, requires testing within the if statement where it checks for errors. // app.js functio ...
Hey there :) Currently, I am utilizing JQuery 1.9.1.js to search records using JSON. I am able to retrieve the search list locally, but when attempting to publish it on Windows Server 2008 and IIS 7, I face issues as it throws an error stating "event.ret ...
While utilizing a third-party embedded code that initiates HTTP requests with a request header origin different from my own, I encountered an issue. Despite attempting to intercept these HTTP requests using XMLHttpRequest, they do not get intercepted. This ...
I am having trouble implementing a modal window that will display validation errors to the user when they submit a form. Currently, the window is opening as a new view instead of overlapping the existing form's view. How can I adjust my code so that t ...
Recently, I attempted to switch between the 'Login Form' and 'Register Form' using code that I found on codepen Flat HTML5/CSS3 Login Form. While the code functioned properly on its own, when integrated into a Vue Template, the form fai ...
This is in relation to the assignment of multiple users using the Select2 plugin, Ajax, and API. The situation involves a function that contains 2 Ajax calls with different URLs. Currently, there are pre-selected users stored in the database. The selection ...
I am attempting to make a cURL request in PHP. The request I am trying to send is as follows: $ curl -H 'Content-Type: application/json' -d '{"username":"a", "password":"b","msisdn":"447000000001","webhook":"http://example.com/"}' http ...
I am currently working on a web application project for a clinic and laboratory, specifically focusing on sending tests. I have implemented the code below to select the test category first, followed by the test name related to that category. However, when ...
I have a cgi-bin program that runs for a long time (3-15 minutes) and I am looking to invoke it using AJAX. While the program is running, I want to receive Server Sent Event data from it and display it on my web page. It's like having a progress monit ...