Steps to Display a Popup When an Asp.Net Button is Clicked

One feature I am working on involves a popup that will display a message to the user confirming that their information has been successfully submitted. The ID of this popup is NewCustomerStatusPopUp, and I want it to be triggered once the information has been properly inserted into the database. Can someone guide me on how to call the JavaScript function to show the popup when all the necessary information has been submitted?

<div id="NewCustomerStatusPopUp">
<asp:Label ID="lblStatus" Text="" runat="server"/>
</div>

For styling, here is the CSS:

#NewCustomerStatusPopUp
    {
    position: fixed;
    width: 300px;
    height: 250px;
    top: 50%;
    left: 50%;
    margin-left:-255px;
    margin-top:-150px;
    border: 10px solid #9cc3f7;
    background-color:White; 
    padding: 10px;
    z-index: 102;
    font-family:Verdana;
    font-size: 10pt;
    border-radius:10px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;

    }

Any assistance or advice on achieving this functionality would be greatly appreciated.

Thank you.

javascriptasp.netpopup

Answer №1

If you want to trigger a javascript function from the server side, you can achieve this by utilizing the RegisterStartupScript method:
Simply add the following code snippet after your insertion query:

ClientScript.RegisterStartupScript(GetType(), "id", "callMyJSFunction()", true);

<script type="text/javascript">
function callMyJSFunction()
{
    alert("Data has been successfully added.");
}

Answer №2

When implementing an insert operation with a click event handler in the code behind, JavaScript is not necessary. Simply enclose the div within a panel:

<asp:Panel ID="pnlNotification" Visible="false" >
    <div id="NewCustomerNotification">
      <asp:Label ID="lblNotification" Text="" runat="server"/>
    </div>
</asp:Panel>

In the code behind file, after confirming successful addition of the new customer,

set pnlNotification to be visible.

pnlNotification.Visible = true;

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

What is the best way to manage variables that are not present in a Vue.js template?

When working with vue.js templates, I often come across instances like this: {{ jobs[0].stages[0].node.name }} If a job has no stages, the entire template fails to load and vue.js admin throws this warning: Error in render: "TypeError: Cannot read prope ...

javascriptvue.js

Troubleshooting: Why isn't my ASP.NET Razor Pages WebMatrix AJAX post functioning properly?

Seeking assistance with posting data to a page using ajax, but encountering issues. Any suggestions? $.ajax({ url: '/REST/GetResponse.cshtml', type: "POST", dataType: "json", contentType: "application/json; charset=utf-8", d ...

jqueryasp.netajaxrazorwebmatrix

Can we determine if a user has accessed a link by opening it in a new tab?

Is there a way to distinguish if a user on your website opens another link (also to your website) in a new tab from them just clicking on the link normally? Whether it's through javascript, server-side processing, or any other method. I assume that d ...

javascripttabs

What potential issues arise from utilizing useRef alongside useSelector?

Although I have the capability to access the store by using thunks and/or global stores, I avoid binding my component to the Redux store. This is because the component will be utilized with various stores both inside and outside of the project. The compone ...

javascriptreactjsreduxuseselector

The $http service encounters an error while attempting to retrieve a JSON file from the server

When attempting to fetch a file from the server, I utilize the $http service in the following manner: $http({url: url, method: "GET", withCredentials: true}); For some mysterious reason, an exception is only thrown when trying to retrieve JSON files from ...

javascriptangularjsjson

Obtain the URL from a Span Class located within a table

As I embark on my journey to learn javascript and jQuery, it's clear that my knowledge is quite rudimentary at this point. An attempt to make edits to a script written in Tampermonkey by a friend has led me down a path of extensive Googling with littl ...

javascriptjquery

Issue: AngularJS not refreshing view after receiving server response

Currently, as I work on developing a mobile application, I've come across an issue related to relaying messages in the view after executing an ajax call and receiving data from the server. My goal is to display these messages to users only after they ...

javascriptjqueryajaxangularjsangularjs-scope

Is this an appropriate method for implementing a 301 redirect?

When I use online host header analyzers to check my page, it shows a status of 200 OK. However, when I view the page in my browser, it redirects to another website (which is the intended behavior). The code I am using is: context.Response.Status = "301 ...

asp.nethttp-redirecthttp-status-code-301

Determine all the names of imported files in a source file using regular expressions in JavaScript

Hello, I'm new to working with regex and JavaScript. I'm attempting to use regex to create an array of all imported files in a source file. In the source file, there is an '@' sign before an import statement. For example, if the file lo ...

javascriptregexnode.js

When refreshing a page in Next.js, the loading indicator does not properly turn off

I'm currently working on my portfolio using next.js and I have implemented a 'loading' state to prevent displaying partially loaded gallery images. The 'loading' state should turn off (set to 0) once all the photos are fully loaded ...

javascriptreactjsnext.js

Angular 5 router - transitioning away from a route while keeping components hidden instead of destroying them

Currently implementing the Angular router: import {RouterModule, Routes, RouterLink} from '@angular/router'; For example, if I have this set up in a header: <mat-menu #appMenu="matMenu"> <button routerLink="home" mat-menu-item> ...

javascriptangularangular5

Attempting to modify the environmental variable within node.js via the terminal proves to be a fruitless endeavor as the value consistently remains undefined

Recently, I entered the world of backend development and came across this JS code utilizing express: const express = require('express'); const app = express(); const port = process.env.PORT || '3000'; app.listen(port, ()=> console.lo ...

javascriptnode.jsexpressvisual-studio-codebackend

restrict the amount of chat history stored

I am currently following a tutorial on how to create a PHP/jQuery based chat application, which you can find here. In summary, this code snippet records messages to a log file: <? session_start(); if(isset($_SESSION['name'])){ $tex ...

phpjavascriptjqueryhtmlchat

Tips on submitting JSON data to a server

I need the data to be structured like this {"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f0c3f18121e1613511c1012">[email protected]</a>","password":"1"} but it is currently appearing like this { & ...

javascriptangularjsnode.jsexpressangular

An API built with Mongoose, Express, and Node.js is currently only able to send a single image

I have a buffer array that needs to be converted into images and sent to the user. The issue is that the current code only sends one image: const express = require("express"); const asyncHandler = require("express-async-handler"); const ...

javascriptexpresssharp

Having trouble sending the code through post message

I was trying to send some code to a node application using Postman with a POST message. In the body, I included the following code: module.exports = function() { var express = require('express'), app = express(); app.set('po ...

javascriptnode.jsexpresspostman

Show the URL hash as url.com/something#/ rather than url.com/something/#/

I'm encountering a peculiar issue with my Angular v1.6.5 setup. My routes seem to be acting strangely, for example: $routeProvider .when('/', { templateUrl: 'myTemplate', controller: 'myController', method: &apo ...

javascriptangularjsroutesangular-routing

Importing modules in Node can be done after the code has been executed, or through ESM Dynamic

I am currently working on a project in nodejs and express, and I am facing an issue where I need to execute certain code before importing modules. The app is already set up to use import for modules instead of require, and changing this setting is not an o ...

javascriptnode.jsnode-modules

Ways to navigate private property using the App Component in Angular 4

I have successfully implemented code in my app component to retrieve the current URL and display it in app.component.html. app.component.ts import { Component } from '@angular/core'; import { Router } from '@angular/router'; @Compone ...

javascriptjqueryhtmlcssangularjs

How to retrieve the value of an input field in Angular 2/Typescript without using ngModel

Currently, I'm utilizing Typescript in conjunction with Angular2, mirroring the structure of the Angular2 Tour of Heroes guide. There is a specific input field that I aim to associate a change event with, triggering custom logic whenever the value wi ...

javascriptangulartypescript