How a JavaScript Alert is disrupting the design of my ASP.NET Web Application

Despite finding a similar question, the provided answer did not resolve my issue.

This is how my application typically appears:

However, after triggering a JavaScript alert, the width of menu items becomes distorted and an additional part is added to the purple bar on the left:

Below is the code snippet I am using to display an alert:

    private void Alert(string msg)
    {
        Response.Write("<script language = 'javascript'>window.alert('" + msg + "')</script>");
    }

Has anyone encountered this problem before? I experienced a similar issue even with the default asp.NET design. How can I resolve this? Just to note, I am currently using IE 7 and everything functions correctly on Firefox.

Update:

Managed to fix the issue with the purple bar by removing a margin. Still working on resolving the menu width problem.

Here is a snippet of my CSS:

#menu
{
   position: absolute;
   left: 78%;
   top: 108px;
   width: 170px !important;  
}

div.menu
{
   padding: 4px 0px 4px 8px;
}

div.menu ul
{
   list-style: none;
   margin: 0px;
   padding: 0px;
   width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
   background-color: #FFF; /*680840*/
   border: 1px #4e667d solid;
   height: 20px;
   width: 140px;
   color: #000; /*FFF*/
   display: block;
   line-height: 1.35em;
   padding: 4px 20px;
   text-decoration: none;
   white-space: nowrap;
}

div.menu ul li a:hover
{
   background-color: #680840;
   color: #FFF;
   text-decoration: none;
}

.selectedMenu
{
   background-color: #680840;
   color: #FFF;
   text-decoration: none;
}

div.menu ul li a:active
{
   background-color: #680840;
   color: #cfdbe6;
   text-decoration: none;
}

Update For @Sassyboy :

Front-End:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:HiddenField Value="" ID="errorMessageHidden" runat="server"/>
    <script type="text/javascript">
        var alertMsg = document.getElementById('errorMessageHidden'); 
        if (alertMsg != null) alert(alertMsg); 
    </script>

In addition, in C# I have included the following:

errorMessageHidden.Value = "Failed to Select - Test";

Answer №1

The reason for this is because Response.Write is usually processed before the HTML content of the page - check the page source for verification.

There are more effective methods for including JavaScript in your web page, explore using ClientScriptManager.

Answer №2

Using Response.Write in your code can cause issues by adding content to the response before the HTML of the page. There are alternative methods to achieve the same functionality, such as setting a hidden field value in ASP.NET and then alerting that value on the client side.

For example, on the server side:

hdnAlertMessage.Value = message;

And on the client side:

var alertMsg = document.getElementById('hdnAlertMessage');

if (alertMsg != null)
    alert(alertMsg.value);

Consider using this approach or something similar to avoid issues with Response.Write.

Updated: changed alert(alertMsg) to alert(alertMsg.value)

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

"Implementing a drop-down feature for various div elements based on their unique ids

What is the best way to implement dropdown menus in multiple divs with different IDs? I have a user stream where adding a dropdown menu for actions like delete and edit on each post only opens the dropdown in the first post. I know this needs to be handle ...

What is the best way to ensure the current tab remains unchanged when updating a page?

I have a unique horizontal tab system displayed as follows: <a id="default" class="link" href="#">Tab 1</a> <a class="link" href="#">Tab 2</a> <a class="link" href="#">Tab 3</a> This tab system is created using basic H ...

Is it possible for me to position an element beside the element before it?

Imagine a traditional layout consisting of paragraphs grouped with a sidebar. However, there are two issues with this setup: first, the browser displays the sidebar (typically used for navigation) before the main content, causing problems for screen reader ...

Encountering path import errors when developing a sample webpack site within a TypeScript library

Struggling to integrate my custom library with TypeScript and Webpack. Import errors are causing headaches, despite smooth sailing in CLion. Running tsc within the project directory is error-free, unlike when running npm run dev in the examples/webpack di ...

Addressing the issue with this.setState and this.state on the Registration page

I am facing an issue with my Registration Page code. I am trying to send data to a database using this.setState and this.state, but every time I run the code, it shows an error in the onSubmit function related to this.state. Can someone please help me unde ...

Using CSS with absolute positioning and dynamic height

There are 4 consecutive <div> tags in absolute position, aligned using top and left. The third div tag has dynamic content, causing its height to adjust based on the text within it. However, since the top and left properties are set for all divs, th ...

Container filled with a table element

My challenge involves a container grid with 3 div flex subelements. The first is the fixed header, the second is the body, and the third is the fixed footer. Within the body, there is a table. What I want to achieve is that when I resize the window, the ta ...

What criteria do web browsers use to determine the order in which to apply @media queries when there are multiple relevant queries for the device

My website requires adjusting element positioning based on specific resolutions. One example is this media query: @media all and (max-width: 385px) And another one: @media all and (max-width: 500px) The device I am using has a width below 385px, but i ...

The foundation gem is encountering an issue with incompatible units: 'rem' and 'px'

After installing the foundation gem version 5.5.2.1, I encountered an error when starting the application: Showing /home/user/Scrivania/sites/store/app/views/layouts/application.html.erb where line #9 raised: Incompatible units: 'rem' and &apos ...

Conditional Fetch

My goal is to establish a connection to an API using C# that provides a JSON response, but I only want to download the most recently modified JSON from the URL. I aim to avoid unnecessary GET requests by checking the headers for Last-Modified, eTag, or Con ...

Customizing Bootstrap 4 Checkbox Styles

Looking for a way to customize a checkbox in Bootstrap 4? I've been struggling to change the background color with no success. Here is the code I'm working with: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-a ...

The CSS on my website is causing issues with the recaptcha functionality

Recently, I've been working on a website that requires spam protection for the contact form. To combat this issue, I decided to integrate reCAPTCHA into the form. However, after completing the form and applying the necessary CSS styles, I noticed tha ...

Achieving a sidebar that remains full height with CSS

Currently working on this page () where my aim is to create a sidebar that fills the entire height of the screen. The goal is for the sidebar, along with the black line on its right, to always reach the bottom of the viewport. JSFiddle Link Here's t ...

Issue with Three.js Object3D.applyMatrix() causing inaccurate scaling

Exploring the wonders of Three.js version r.71! I have recently delved into Three.js and have come across an interesting challenge. I am working on streaming geometry and handling position/scale/rotation changes between clients using Socket.io and NodeJS. ...

Checkbox not appearing in datagrid when using Material-UI

There are some key code snippets related to the datagrid below const apiRef = React.useRef(null); const [gotApiRef, setGotApiRef] = useState(false); const [gotApiRef2, setGotApiRef2] = useState(false); console.log("apiRef.current: ", apiR ...

What steps should I follow to align these unordered lists side by side?

Is there a way to align these lists (unordered lists inside list items 1 through 4) side by side using CSS3? I've tried different methods, but I can't seem to figure it out. Here is the code I've been using: <footer> <ul> ...

OrbitControls in THREE.JS fail to function properly when a DOM Element is layered on top of the scene

I am attempting to position labels as elements with position:absolute; over a THREEJS scene. The issue arises when the mouse hovers over one of the labels (the red box in the example below), causing the events that trigger OrbitControls to be "halted" by t ...

What is the best way to redirect a URL to the correct webpage?

Is there a way to redirect the url "http://www.mysite.com/Join" to the page "http://www.mysite.com/JoinOptions/MemberRegistration.aspx"? I am currently using a DNN CMS, but any solution for redirection would be appreciated, even if you are not familiar wi ...

Utilize Jquery to calculate the total sum of values associated with a particular key in a JSON object based on input

I am facing an issue with my script where I am trying to sum up the clientPrice keys in a JSON object assigned to a form text element. Here is what I have: <input id="clientList" type="hidden" value="[{"clientID":"1","clientType":"0","clientPrice":"450 ...

Decomposing an array of objects into individual variables for database storage using React, Express, and SQL Server

Within my ReactJS application, I have a stored array of objects that, when console logged, appear as follows: 0: {answer: "yes↵", question: "Is the keyboard separate from the screen?", state: "Declined with solution defined" ...