Closing a Javascript-created popup using server-side code

I'm encountering an issue with closing a modal that I've created in JavaScript. The goal is to display a loading spinner while data is being fetched, and then hide it once the background process is complete. Everything functions correctly until the point where I attempt to hide it. No matter what I do, it just remains on screen...

https://i.sstatic.net/BLAmu.png

JavaScript for displaying/hiding the loading spinner:

<style type="text/css">

.modal
{
    position: fixed;
    top: 0;
    left: 0;
    background-color: black;
    z-index: 99;
    opacity: 0.8;
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}
.loading
{
    font-family: Arial;
    font-size: 10pt;
    border: 5px solid blue;
    width: 200px;
    height: 100px;
    display: none;
    position: fixed;
    background-color: white;
    z-index: 999;
}
</style>


<script type="text/javascript">
    function ShowLoadingSpinner()
    {
        var modal = $('<div />');
        modal.ID = "loadingCircle2";
        modal.addClass("modal");           
        $('body').append(modal);
        var loading = $(".loading");
        var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
        loading.css({ top: top, left: left });
        loading.show();
    }

    function HideLoadingSpinner()
    {
        var loadingCirlce = $find("loadingCircle2");
        loadingCirlce.hide();
    }
</script>

Backend code to handle showing/hiding:

ScriptManager.RegisterStartupScript(this, this.GetType(), "Show Me", "setTimeout('ShowLoadingSpinner()', 10);", true);

ScriptManager.RegisterStartupScript(this, this.GetType(), "Hide Me", "setTimeout('HideLoadingSpinner()', 0);", true);

Answer №1

After creating the dynamic element, make sure to use the ID Selector (“#id”)

This selector targets a single element with the specified id attribute

Implement this code snippet:

$("#loadingCircle2")

Instead of:

$find("loadingCircle2")

Ensure that you have properly set the ID property as 'id' and 'modal' are jQuery objects. Additionally, remember to append the 'loading' element to the modal.

Complete Script:

function ShowLoadingCircle()
{
    //Create DIV
    var modal = $('<div />', {
        "id" : "loadingCircle2",
        "class" : "modal",
    });        

    //Set loading 
    var loading = $(".loading");
    var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
    var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
    loading.css({ top: top, left: left });

    //Append the loading
    modal.append(loading);

    //Append the modal
    $('body').append(modal);
}

function HideLoadingCircle()
{
    $("#loadingCircle2").hide();
}

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

The initial click may not gather all the information, but the subsequent click will capture all necessary data

Issue with button logging on second click instead of first, skipping object iteration function. I attempted using promises and async await on functions to solve this issue, but without success. // Button Code const btn = document.querySelector("button") ...

Searching across multiple attributes in Jquery UI Autocomplete: A comprehensive guide

My data is stored in an array of objects with a structure similar to this: $scope.usersList = [{ "name": "John", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f09a9f989eb088898ade939f9d">[email protected ...

Determining if a component is nested within itself in Angular 6 is a crucial task

My goal is to develop a custom Angular component for a nested navigation menu with multiple levels. Below is an example of how the menu structure looks: app.component.html <nav-menu> <nav-menu-item>Section 1</nav-menu-item> <nav- ...

Textfield with predictive text suggestions

I am currently working on implementing an autocomplete textfield for my Rails application, following the example from the Agile Web Development with Rails, 3rd Edition. However, when I try to insert their demo code: <%= stylesheet_link_tag &apo ...

Displaying errors above the table. Executing ng-repeat in AngularJS

I've been struggling with a seemingly simple issue for hours now. I have a table displaying equipment rows using ng-repeat and input controls, and I want to display validation errors above the table. Here's what I tried: <div class="col-xs- ...

I am experiencing difficulty with the Click() operation in Selenium web driver as it is not successfully redirecting me to another page

Hello everyone, I could really use your assistance with a problem I'm facing. WebElement wb=driver.findElement(By.name("NavHeader1$tabs$ctl00$btnNavHeaderTab")); Actions act=new Actions(driver); act.moveToElement(wb).perform(); ...

Building a remote shell using Node.js with the ability to interpret control sequences

Currently, I am working on developing a remote shell using Node.js. Here's the code that I have implemented so far : Client var net = require('net'); var client = net.connect({port: 1234}, function(){ process.stdin.pipe(client); clien ...

The resource-intensive nature of ExpressJs HTTP Streaming is causing my disk space to deplete rapidly

My express server app.get('/data', (_, res) => { const interval = setInterval( () => res.write(`${Math.random().toString()}\n`), 1000 ); res.on('close', () => { clearInterval(interval); ...

Merge functions that execute identical operations

I find myself in a situation where I have two functions that do very similar tasks, but on different elements. Initially, I only anticipated having these two functions, but now I realize I'll need to add more. This will result in a lot of repetition. ...

Are we on the correct path for breaking down code using react JS?

As I work on creating reusable table components, each column comes with its own set of functionalities, which results in dealing with numerous components. To streamline the process, I have been separating every component piece into individual files and ex ...

Is it possible to categorize a JSON object based on its properties and then count the occurrences of each property within

I have an array of objects containing booking information and I need to calculate the count of each booking item in every object. const arr = [ { "ID" : 1, "Name":"ABC", "Bookings":[ { & ...

Having trouble populating and submitting a selected option from a dropdown menu in Angular?

Upon loading the page, the Category dropdown automatically populates with data from the database. However, when I attempt to select a value from the dropdown and click a button to post the data to a specified URL, an error occurs: ERROR Error: Error tryin ...

Preserve input data in textboxes when navigating through Gridview pages

While working on the index page, I encountered an issue with the TextBox not holding the given value. Despite trying different approaches, none of them seem to provide the correct result. Below is the code snippet: protected void gvViolationCodes_Pag ...

Troubleshooting: Unable to modify value with function in AngularJS

Why can't I change a value using a function in AngularJS? html: <div ng-controler='TestCtrl' id='TestCtrl'> <h1>Test: {{test.name}}</h1> <div ng-hide='showTest'> <div class=&a ...

Improving a lengthy TypeScript function through refactoring

Currently, I have this function that I am refactoring with the goal of making it more concise. For instance, by using a generic function. setSelectedSearchOptions(optionLabel: string) { //this.filterSection.reset(); this.selectedOption = optionLa ...

Identifying a specific item within an array

Can someone guide me on how to manipulate a specific object within an array of objects? For example: var myArray = [ {id: 1}, {id: 2}, {id: 3}, {id: 4} ] // Initial state with the 'number' set as an array state = { number: [] } // A functio ...

Receiving a "Maximum call exceeded" error when using Vue.js router guards for the beforeEach hook

As I work on my Firebase-VueJS app, I am implementing basic security rules with router guards. In my main.js file, I have added the following code to handle permissions based on the user's authentication status. However, I encounter an error 'vue ...

Error 504: The timeout issue occurred during an ajax call

When I make an ajax call to process a large amount of data and then reload the page upon success, I encounter a 504 Gateway Timeout error. The ajax call is initiated with the following parameters: $.ajax({ type:'POST', cache:false, a ...

Can CSS be used for creating unique color combinations?

I am facing a challenge where I have two div elements with different transparent, colored backgrounds that overlap each other. My goal is to find a way to customize the color in the area where these elements overlap. For instance, if I blend red and blue ...

Transform a Django/Python dictionary into a JavaScript dictionary using JSON

I need to convert a Python dictionary into a JavaScript dictionary. From what I understand, I have to first convert the Python dict into JSON format and then transform it into a JavaScript Object. view.py jsonheaderdict = json.dumps(headerdict) {{jsonhe ...