开发者

Javascript Alert ruining the layout of my asp.NET Web Application

I know there is a similar question, but that answer did not solve my problem.

This is how my application looks normally:

Javascript Alert ruining the layout of my asp.NET Web Application

And this is how it looks after a Javascript alert (width of menu items gets screwed, the purple bar on the left has an extra part added to it on top):

Javascript Alert ruining the layout of my asp.NET Web Application

This is the code I am using to call an alert:

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

Did anyone ever had this problem, I had something similar even with the default asp.NET design. How can I fix this? I am using IE 7 by the way, i开发者_高级运维t's ok on Firefox.

Update:

Fixed the issue with the purple bar, removed a margin. Still figuring out the menu width issue.

This is 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>

and c# I add this:

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


This is becuase Response.Write often is rendered before the HTML of the page - look at the source of your page.

There are better ways of adding Javascript to the page, look up ClientScriptManager.


Response.Write will add to response before the HTML of the page and this leads to issues similar to what you mentioned.

There are multiple other ways in which the functionality you are trying to achieve can be achieved. e.g. you could have a hidden field hdnAlertMessage and set its value with the message you want to alert. And then check on the client side if the hidden field has a value then alert that value.

So on your server side

hdnAlertMessage.Value = message;

And on your client side

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

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

Or something along those lines.

Edited: alert(alertMsg) to alert(alertMsg.value)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜