Display and conceal panel with the press of the asp:button

Initially, the panel is hidden. I am looking to display the panel when the <asp:button is clicked. Here is my code:

 <asp:Button ID="btnSubmit" runat="server" Text="Submit"  Width="167px" 
             data-icon="check" OnClick="btnSubmit_Click" 
             OnClientClick="showProgress();"     />

The code for my panel is as follows:

 <asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress" Visible="false">
        <div id="imageDiv">
            <div style="float: left; margin: 9px">
                <img src="Images/loader.gif" id="img1" width="32px"
                     height="32px" style="display:none"/>
            </div>
            <div style="padding-top: 17.5px; font-family: Arial,Helvetica,sans-serif; font-size: 12px;">
                Loading. Please wait...
            </div>
        </div>
    </asp:Panel>

Upon button click, there is a javascript function named showProgress() defined as follows:

function showProgress() {
      

            if (Page_IsValid) {
                // Code to make the panel visible goes here
            }

        }

Answer №1

Try using a CSS class instead of setting Visible = "false" on your panel. Using visible = "false" will not display the div in the final HTML output.

<asp:Panel ID="pnlPopup" runat="server" CssClass="updateProgress hidden">
...
</asp:Panel>

function showProgress() {          
    if (Page_IsValid) {
      $("div[name$='pnlPopup']").removeClass("hidden");              
    }
    return false; //Prevents postback triggers
}

Answer №2

Make sure to include the following jQuery code and verify that it functions correctly:

Additionally, ensure that you specify the appropriate button ID and panel ID for everything to work smoothly:

<script type="text/javascript">
            $(function() {
                $("#btnSubmit").click(function(evt) {
                    evt.preventDefault();
                    $('#pnlPopup').toggle('fast');
                });
            });
    </script>

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 execution of JavaScript fetch is experiencing a delay

My website is equipped with an Express server that is ready to execute a shell script when triggered. However, there is a delay in running the shell script as it waits for the user to accept or deny a "confirm window." I am looking for a way to prompt the ...

The functionality of tinymce setContent can only be activated by directly clicking on it

Everything is running smoothly with the code below: $('.atitle').on('click', function(){ console.log('323'); tinymce.get("ed").setContent("<p>lorem ipsum</p>"); // it's working ...

A guide to extracting information from a Web Service using ASP.net

I have a situation where I need to retrieve a String from a SOAP service to asp.net. However, I am struggling to determine how to properly parse this string and store it in a variable. Should it be an Array, a collection, or an Object? The string that I ...

Reacting with Node.js: Capturing a selected option from a dropdown menu and storing it in the database

On my React frontend, I have a select dropdown like this: <select name="level" value={level} onChange={this.handleChange} className="form-control"> <option>Begineer</option> <option>Intermediate</option> <option> ...

Having the Firebase functionality up and running smoothly, but encountering issues with the firebase.auth() method

After running npm i firebase and importing firebase from 'firebase/compat/app', I encountered an error when trying to use firebase.auth(). The error message states that no Firebase App '[DEFAULT]' has been created, even though I have fo ...

Swapping out pages with JSON outcomes is a common practice when utilizing ASP.Net MVC in conjunction with JQuery Ajax

When making an ajax call to update an entity and returning the success state in the MVC controller, I encountered a problem that resulted in the page changing with the URL becoming that of the MVC controller action and displaying the JSON result as content ...

Obtain a report using a variety of different conditions

My database has a table with the following fields: TPI CLICKS IMPRESSION CLASSIFY I am looking to retrieve 3 specific results: 1) Calculate SUM(CLICKS)/SUM(IMPRESSION) * 100 GROUPED BY TPI 2) Calculate SUM(IMPRESSION) WHERE CLASSIFY = "XYZ" GROUPED BY ...

What are some ways to enhance the worth of this.value?

What's the best way to restrict input to only numeric values in this scenario? function validateUserInput() { $('datagroup').on('keyup', 'input[id^="datagroup_1"]', function () { if (!this.value){ ...

CORS error: 405 Method Not Allowed despite having the correct headers (I believe)

I could use another set of eyes on this. My preflight request is returning a 405 Method Not Allowed error. After reviewing, everything seems to be in order. Here's the request: OPTIONS http://diffDomain/spf/v1/user/<a href="/cdn-cgi/l/email-prote ...

The tubular.js Youtube video background is overlapping my other components on the site, instead of displaying behind them as intended

I recently implemented the tubular.js script on my webpage to display a YouTube video as the background. On the tubular page, there is a statement that reads: First, it assumes you have a single wrapper element under the body tag that envelops all of ...

Modifying the color of a specific div using jQuery

I am attempting to develop a function that changes the background color of a div when a user clicks on it and then clicks on a button. The value needs to be saved as a variable, but I'm having trouble getting it to work because it keeps saying that th ...

Determining the final value of the last handle in a jQuery UI slider with multiple sliders present

I need help retrieving the first and last handle values from a jQuery UI range slider when there are multiple sliders on the page. Currently, my code is set up to grab the last value from the last slider's last handle. I attempted to address this by u ...

Error in the syntax of PHP code within an external .js file

Despite my best efforts, I have been unable to find a solution to my current problem. I am attempting to insert a PHP variable into my external .js file. The goal is to store the PHP variable in a JavaScript variable and then use ajax for database communi ...

Submitting valid CA (Certificate Authority) names for ASP.NET TLS client authentication

Is there a way to set up ASP.NET (Kestrel) to provide a specific list of acceptable distinguished CA names in the SERVER HELLO part of the mTLS handshake? This would prevent users from being overwhelmed with a long list of client certificates in their brow ...

Access values in object array without iterating over it

I'm wondering if there is a way to extract the values of the name property from an object array without having to iterate through it. var objArray = [ { name: 'APPLE', type: 'FRUIT' }, { name: 'ONION', t ...

Issue with Redux saga not responding to action initiated by clicking on an icon

Declaration of Saga function* DoStuffInSaga({myRef}){ try { console.info("saga running"); return yield delay(1000, 1); } catch(error){ console.warn(error); } } export function* mySaga(){ yield all([ yi ...

Customized Bootstrap Dropdown with the ability to add text dynamically

I am working on a Bootstrap dropdown menu that allows users to generate expressions by clicking on the menu items. For example, when the "Action" item is clicked, it should insert {{Action}} into the textbox. The user can then type something like "Hello" a ...

Sharing information from a parent component to a child component in React.js

My parent component has a single child that I update by passing data through props. Initially, everything works fine, but when I click on a button and update the state using setState, the child gets rendered with old values until setState is finished. I ha ...

Node.js and MongoDB Login Form Integration with Mongoose

I am relatively new to web development and currently working on a simple web page for user login authentication. My goal is to verify user credentials (username & password) on the LoginPage from a mongoose database, and if they are correct, redirect them t ...

Efficiently Implementing Date Filtering in VueJS Tables

I have a query for all of you. I'm working with a table that contains student time information and dates for the quarter. I'm looking to implement a time picker so that instructors can filter and display data between specific dates. Essentially, ...