CSS Formatting disappears after JavaScript Alertbox clicked

Hi All,

Firstly, I apologise if this question has appeared before but I can't find it anywhere.

I have created a gridview with two command buttons. When I click the buttons I want either an alertbox or confirm box to appear.

The problem I am receiving is when I click the command button the page disappears, a JavaScript alert box appears, you click OK on the alert box and the page reappears but all the CSS formatting has gone so my DIV tags and text all revert back to normal.

Can anyone tell me how to prevent this, or get an alertbox to appear with the page still showing in the background???

Many thanks,

Gwyn

Jan 5 '08 #1

Subscribe Post Reply

8729

gits

5,390

Expert Mod 4TB

hi ...

could you please post your code or give a link to a testpage? ... is the page refreshed (posted to the server) during the operation?

kind regards

Jan 5 '08 #2

Gwyn Thomas

Thanks for replying...

The CSS I'm using is...

Expand|Select|Wrap|Line Numbers

 body

{

    border-top: solid 5px #BF2028;

    border-left: solid 1px #BF2028;

    border-right: solid 1px #BF2028;

    border-bottom: solid 1px #BF2028;

    font-family: Arial, Helvetica, sans-serif;

    font-size: small;

    color: #333333;

    margin: 2px;

    padding: 0px;

}
 
#header

{

    background: #FFFFFF;

    border-bottom: solid 2px #BF2028;

    width: 100%;

    height: 64px;

}

#content

{

    background: #FFFFFF;

    float: left;

    width: 100%;

    height: 100%;

}

#footer

{

    background: #EEEEEE;

    border-top: solid 1px #BF2028;

    clear: both;

    width: 100%;

    height: 12px;

    text-align: center;

    font-family: Arial, Helvetica, sans-serif;

    font-size: xx-small;

    color: #BF2028;

    vertical-align: text-bottom;

}

#loginLine

{

    width: 100%;

    height: 18px;

    text-align: right;

    font-family: Arial, Helvetica, sans-serif;

    font-size: small;

    color: #333333;

    border-bottom: dotted 1px #BF2028;

    margin-right: 15px;

}

#searchTabPanel

{

    width: 100%;

    height: 110px;

    text-align: left;

    font-family: Arial, Helvetica, sans-serif;

    font-size: small;

    color: #333333;

    border-bottom: solid 1px Gray;

}

#searchDisplay

{

    padding: 10px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: small;

    color: #333333;

    width: 100%;

    height: 80%;

}
 
#searchButtonRow

{

    padding: 5px;

    text-align: right;

    height: 25px;

    width: 99%;

    font-family: Arial, Helvetica, sans-serif;

    font-size: small;

    color: #333333;

    border-bottom: dotted 1px #BF2028;

}
 
.tpTotalWidth

{

    font-family: Arial, Helvetica, sans-serif;

    font-size: small;

    color: #333333;

    width: 90%;

    height: 80%;

}
 
.tpLeftBlock

{

    float: left;

    padding: 15px;

    width: 40%;

    height: 50%;

}
 
.tpRightBlock

{

    float: left;

    padding: 15px;

    width: 40%;

    height: 50%;

}
 
.tpBigBlock

{

    float: left;

    padding: 10px;

    width: 75%;

    height: 50%;

}

This is used in the following HTML...

Expand|Select|Wrap|Line Numbers

 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Main" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>Main Page</title>

    <link href="CalendarStyle.css" rel="stylesheet" type="text/css" id="MyCalendar" />

    <link href="LayoutStyleSheet.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <form id="MainPage" runat="server">

    <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server" />

    <div id="header">

        <img alt="SRA" 

            src="Images/SRA_Header_New.jpg" style="width: 998px;height: 64px" /></div>

    <div id="content">

        <div id="loginLine">

            <asp:Label ID="lblLoggedInAs" runat="server" Text="You are currently logged in as "></asp:Label>

            <asp:LoginName ID="LoginName1" runat="server" />**

        </div>

        <div id="searchTabPanel">

            <ajaxToolkit:TabContainer ID="tcSearch" runat="server" BorderStyle="None" 

                BorderWidth="1px" Height="72px" ScrollBars="Auto" Width="100%" 

                ActiveTabIndex="1">

                <ajaxToolkit:TabPanel ID="tpUserSearch" runat="server" HeaderText="Filter by Username and Group">

                <ContentTemplate>

<asp:UpdatePanel ID="UserDetailsUpdate" runat="server" RenderMode="Inline"><ContentTemplate>

        <div id="tpUserTotalWidth" class="tpTotalWidth">

            <div id="tpUserLeftBlock" class="tpLeftBlock">

                <asp:Label ID="lblSearchGroup" runat="server" Text="Search this group : " />

                <asp:DropDownList ID="ddlDTSearchGroup" runat="server" AutoPostBack="True" Height="22px" Width="150px" />
 
            </div>

            <div id="tpUserRightBlock" class="tpRightBlock">

                <asp:Label ID="lblSearchUser" runat="server" Text="Search for calls for this user :" />

                <asp:DropDownList ID="ddlDTSearchUsers" runat="server" Height="22px" Width="150px" />
 
            </div>

        </div>
 
                    </ContentTemplate>

<triggers>

<asp:postbacktrigger ControlID="ddlDTSearchGroup" />

</triggers>

</asp:UpdatePanel>

                </ContentTemplate>

                </ajaxToolkit:TabPanel>

                <ajaxToolkit:TabPanel ID="tpDateSearch" runat="server" HeaderText="Filter by Date and Time">

                <ContentTemplate>

<div id="tpDateTotalWidth" class="tpTotalWidth">

    <div id="tpDateLeftBlock" class="tpLeftBlock">

        Start Date and Time:

        <asp:TextBox ID="txtDTSearchDateStart" runat="server" Width="75px" 

            ToolTip="Please enter the Start Date or click the calendar button to the right"></asp:TextBox>

        <asp:ImageButton ID="btnDTSearchDateStart" runat="server" Height="18px" ImageAlign="Bottom" ImageUrl="~/Images/iCal-32x32.png" Width="18px" />

        *<asp:DropDownList ID="ddlTSearchTimeStart" runat="server">

            <asp:ListItem Value="0">00:00</asp:ListItem>

            <.......>

            <asp:ListItem Value="23">23:00</asp:ListItem>

        </asp:DropDownList>

        <ajaxToolkit:MaskedEditExtender ID="meeStartDate" runat="server" 

            TargetControlID="txtDTSearchDateStart" MaskType="Date" Century="2000" UserDateFormat="DayMonthYear" 

                            Mask="99/99/9999" CultureAMPMPlaceholder="" 

            CultureCurrencySymbolPlaceholder="" CultureDateFormat="" 

            CultureDatePlaceholder="" CultureDecimalPlaceholder="" 

                            CultureThousandsPlaceholder="" CultureTimePlaceholder="" 

            Enabled="True" >

        </ajaxToolkit:MaskedEditExtender>

        <ajaxToolkit:CalendarExtender ID="ceDTSearchDateStart" runat="server" 

            CssClass="MyCalendar" Enabled="True" Format="dd/MM/yyyy"

                            PopupButtonID="btnDTSearchDateStart" 

            TargetControlID="txtDTSearchDateStart" >

        </ajaxToolkit:CalendarExtender>

    </div>

    <div id="tpDateRightBlock" class="tpRightBlock">

        End Date and Time:

        <asp:TextBox ID="txtDTSearchDateEnd" runat="server" Width="75px" />

        <asp:ImageButton ID="btnDTSearchDateEnd" runat="server" Height="18px" 

            ImageUrl="~/Images/iCal-32x32.png" Width="18px" >

        </asp:ImageButton>

        *<asp:DropDownList ID="ddlTSearchTimeEnd" runat="server">

            <asp:ListItem Value="0">00:00</asp:ListItem>

            <........>

            <asp:ListItem Value="23">23:00</asp:ListItem>

        </asp:DropDownList>

        <ajaxToolkit:MaskedEditExtender ID="meeEndDate" runat="server" 

            TargetControlID="txtDTSearchDateEnd" MaskType="Date" Century="2000" UserDateFormat="DayMonthYear" 

                            Mask="99/99/9999" CultureAMPMPlaceholder="" 

            CultureCurrencySymbolPlaceholder="" CultureDateFormat="" 

            CultureDatePlaceholder="" CultureDecimalPlaceholder="" 

                            CultureThousandsPlaceholder="" CultureTimePlaceholder="" 

            Enabled="True" >

        </ajaxToolkit:MaskedEditExtender>

        <ajaxToolkit:CalendarExtender ID="ceDTSearchDateEnd" runat="server" 

            CssClass="MyCalendar" Enabled="True" Format="dd/MM/yyyy"

                            PopupButtonID="btnDTSearchDateEnd" 

            TargetControlID="txtDTSearchDateEnd" >

        </ajaxToolkit:CalendarExtender>

    </div>

</div>

                </ContentTemplate>

                </ajaxToolkit:TabPanel>

                <ajaxToolkit:TabPanel ID="tpNumberSearch" runat="server" HeaderText="Filter by Number">

                <ContentTemplate>

                <div id="tpNumberTotalWidth" class="tpTotalWidth">

                    <div id="tpNumberLeftBlock" class="tpBigBlock">

                        Please enter the number to search for :

                        <asp:TextBox ID="txtNSearchNumber" runat="server" MaxLength="20" Width="125px" />

                    </div>

                </div>

                </ContentTemplate>

                </ajaxToolkit:TabPanel>

                <ajaxToolkit:TabPanel ID="tpDurationSearch" runat="server" HeaderText="Filter by Duration">

                <ContentTemplate>

<div id="tpDurationTotalWidth" class="tpTotalWidth">

    <div id="tpDurationLeftBlock" class="tpLeftBlock">

        Duration greater than

        <asp:TextBox ID="txtDSearchGreaterThan" runat="server" Width="60px" />

        <asp:ImageButton ID="btnDSearchGTUp" runat="server" Height="16px" 

            ImageUrl="~/Images/Duration_Plus.jpg" Width="16px" ImageAlign="Middle" />

        <asp:ImageButton ID="btnDSearchGTDown" runat="server" Height="16px" 

            ImageUrl="~/Images/Duration_Minus.jpg" Width="16px" ImageAlign="Middle" />

        minute(s)<ajaxToolkit:NumericUpDownExtender ID="nudeDSearchGreaterThan" 

                            runat="server" Enabled="True" 

            TargetControlID="txtDSearchGreaterThan" Maximum="500" Minimum="0" RefValues="" ServiceDownMethod="" 

                            ServiceDownPath="" ServiceUpMethod="" Tag="" 

            TargetButtonDownID="btnDSearchGTDown" TargetButtonUpID="btnDSearchGTUp" 

            Width="60" >

        </ajaxToolkit:NumericUpDownExtender>

    </div>

    <div id="tpDurationRightBlock" class="tpRightBlock">

        Duration less than

        <asp:TextBox ID="txtDSearchLessThan" runat="server" Width="59px" />

        <asp:ImageButton ID="btnDSearchLTUp" runat="server" Height="16px" 

            ImageUrl="~/Images/Duration_Plus.jpg" Width="16px" ImageAlign="Middle" />

        <asp:ImageButton ID="btnDSearchLTDown" runat="server" Height="16px" 

            ImageUrl="~/Images/Duration_Minus.jpg" Width="16px" ImageAlign="Middle" />

        minute(s)<ajaxToolkit:NumericUpDownExtender ID="nudeDSearchLessThan" 

            TargetControlID="txtDSearchLessThan" TargetButtonDownID="btnDsearchLTDown" TargetButtonUpID="btnDSearchLTUp" 

                            Minimum="0" Maximum="500" runat="server" Enabled="True" 

            RefValues="" ServiceDownMethod="" ServiceDownPath="" ServiceUpMethod="" Tag="" 

            Width="60" >

        </ajaxToolkit:NumericUpDownExtender>

    </div>

</div>

                </ContentTemplate>

                </ajaxToolkit:TabPanel>

            </ajaxToolkit:TabContainer>

        </div>

        <div id="searchButtonRow">

            <asp:Button ID="cmdClearFilters" runat="server" Text="Clear Search Filters" Width="150px" height="25" />

            &nbsp;

            <asp:Button ID="cmdStartSearch" runat="server" Text="Start Search" Width="150" Height="25" />

        </div>

        <div id="searchDisplay">

            <asp:GridView ID="CDRViewer" runat="server" AutoGenerateColumns="False" EmptyDataText="Sorry but there are no records matching your search.  Please search again." 

                CellPadding="1" ForeColor="#333333" GridLines="Horizontal" 

                Font-Names="Arial" Font-Size="Small" Width="98%" AllowPaging="True" 

                PageSize="12">

                <pagersettings mode="NumericFirstLast" />

                <footerstyle backcolor="#507CD1" font-bold="True" forecolor="White" />

                <rowstyle backcolor="#EFF3FB" VerticalAlign="Top" />

                <Columns>

                    <asp:boundfield DataField="CallId" HeaderText="Call ID" SortExpression="CallId">

                    <itemstyle horizontalalign="Center" />

                    </asp:boundfield>

                    <asp:boundfield DataField="OriginationNumber" HeaderText="Origination Number" SortExpression="OriginationNumber">

                    <itemstyle horizontalalign="Center" />

                    </asp:boundfield>

                    <asp:boundfield DataField="OriginationName" HeaderText="Origination Name" SortExpression="OriginationName">

                    <itemstyle horizontalalign="Center" />

                    </asp:boundfield>

                    <asp:boundfield DataField="CalledNumber" HeaderText="Called Number" SortExpression="CalledNumber">

                    <itemstyle horizontalalign="Center" />

                    </asp:boundfield>

                    <asp:boundfield DataField="CalledName" HeaderText="Called Name" SortExpression="CalledName">

                    <itemstyle horizontalalign="Center" />

                    </asp:boundfield>

                    <asp:boundfield DataField="DestinationNumber" HeaderText="Destination Number" SortExpression="DestinationNumber">

                    <itemstyle horizontalalign="Center" />

                    </asp:boundfield>

                    <asp:boundfield DataField="DestinationName" HeaderText="Destination Name" SortExpression="DestinationName">

                    <itemstyle horizontalalign="Center" />

                    </asp:boundfield>

                    <asp:boundfield DataField="StartTime" HeaderText="Start Time" SortExpression="StartTime">

                    <itemstyle horizontalalign="Center" />

                    </asp:boundfield>

                    <asp:boundfield DataField="EndTime" HeaderText="End Time" SortExpression="EndTime">

                    <itemstyle horizontalalign="Center" />

                    </asp:boundfield>

                    <asp:templatefield HeaderText="Transferred Call ID" ConvertEmptyStringToNull="False">

                    <ItemTemplate>

                    <asp:HyperLink ID="TransferredCallId" runat="server" Text='<%# Container.DataItem("TransferredCallId2") %>' NavigateUrl='<%# "~/TransferDetail.aspx?CallId="&Container.DataItem("TransferredCallId2")%>'/>

                    </ItemTemplate>

                    <itemstyle horizontalalign="Center" />

                    </asp:templatefield>

                    <asp:buttonfield ButtonType="Image" CommandName="cmdPlayFile" HeaderText="Play" ImageUrl="~/Images/play_button.gif">

                    <itemstyle horizontalalign="Center" />

                    </asp:buttonfield>

                    <asp:buttonfield ButtonType="Image" CommandName="cmdDeleteFile" HeaderText="Delete" ImageUrl="~/Images/delete_button.gif">

                    <itemstyle horizontalalign="Center" />

                    </asp:buttonfield>

                </Columns>

                <pagerstyle backcolor="#2461BF" forecolor="White" horizontalalign="Center" />

                <selectedrowstyle backcolor="#D1DDF1" font-bold="True" forecolor="#333333" />

                <headerstyle backcolor="#507CD1" font-bold="True" forecolor="White" />

                <editrowstyle backcolor="#2461BF" />

                <alternatingrowstyle backcolor="White" />

            </asp:GridView>

            <br />

            <asp:SqlDataSource ID="CDRDataSource" runat="server" 

                ConnectionString="<%$ ConnectionStrings:IpPbxConnectionString %>" 

                ProviderName="<%$ ConnectionStrings:IpPbxConnectionString.ProviderName %>" 

                SelectCommand="SELECT IpPbxCDR.*, IpPbxCDR_DurationTable.* FROM IpPbxCDR INNER JOIN IpPbxCDR_DurationTable ON IpPbxCDR.CallId = IpPbxCDR_DurationTable.CallId">

            </asp:SqlDataSource>

        </div>

    </div>

    <div id="footer">

    Copyright © 2007-8 by Me

    </div>

    </form>

</body>

</html>

I'm sorry this is a bit long but I don't think I can cut it down anymore and still show the relevant parts. All the processing is done in code behind.

The page does postback when the play or delete button in the gridview is pressed. If the code behind can't find the associated file then the alert box appears and after clicking ok the screen comes back wierd!

Any helpful suggestions you have would be most appreciated.

Many thanks,

Gwyn

Jan 5 '08 #3

gits

5,390

Expert Mod 4TB

i don't find the alert() .... how do you generate the alertbox?

Jan 5 '08 #4

Gwyn Thomas

I'm sorry...I do that in the code behind...

Public Sub DisplayAlert(ByVal msg As String)
Response.Write("<script language=JavaScript> alert('" & msg & "'); </script>")
End Sub

Ideally, I would like you of the boxes to be a confirm type but can't find any code to do this in code behind and be able to retrieve the return value, ok or cancel, and continue processing based on that value.

Jan 5 '08 #5

gits

5,390

Expert Mod 4TB

so that is an entirely serverside problem ... as far as i understand you have an asp-page ... the user makes a decision and the page is posted back to the server where you validate the action and write an alert mesage to the page when there was a wrong action taken by the user before. may be when you use:

Expand|Select|Wrap|Line Numbers

 Response.Write("<script type=\"text/javascript\"> window.onload = function() { alert('" & msg & "'); };</script>");
 

it works as you expect? with that the message should be displayed when the page is fully loaded to the client ...

kind regards

Jan 5 '08 #6

Gwyn Thomas

I'll give that a try and see what happens.

Many thanks again and I'll let you know if it sorts it out.

Gwyn.

Jan 5 '08 #7

Gwyn Thomas

It doesn't quite do it...

The page posts back and then reloads with the alert box on top but the text size and font have changed. As you can see from the CSS above I am using Small Arial font but when it comes back it is medium or large and looks like Times.

When the page is reposted when I click on another button that causes a postback the text returns to normal???

Is there a simple way to trigger a postback?

Thanks

Gwyn

Jan 5 '08 #8

gits

5,390

Expert Mod 4TB

i wonder about this problem ... in case you remove the alert everything works fine?

Jan 5 '08 #9

Gwyn Thomas

Yes, you just don't get informed when there is a problem retreiving or deleting a file.

I have also now noticed that when the page is in this state (after the alert box with the larger text) that if I click another button, or the same one again that I don't get the alert box at all until the page has been reset back to the initial state.

Any ideas?

Jan 5 '08 #10

gits

5,390

Expert Mod 4TB

Yes, you just don't get informed when there is a problem retreiving or deleting a file.

I have also now noticed that when the page is in this state (after the alert box with the larger text) that if I click another button, or the same one again that I don't get the alert box at all until the page has been reset back to the initial state.

Any ideas?

sure ... since we have added it to the documents onload-handler that is only called when the page is (re)loaded ... but to me that seems a very strange problem ... what happens when you put the following in the body?

Expand|Select|Wrap|Line Numbers

<body onload="alert('test');">

and remove the other alert for testing purposes.

kind regards

Jan 5 '08 #11

Gwyn Thomas

I'll have to give this a try tomorrow as it's time to go home!!! Yay!

I will try it out and let you know.

Many thanks for all your efforts this afternoon, I really appreciate it.

Gwyn.

Jan 5 '08 #12

Gwyn Thomas

Hi,

Thanks again for the help the other day.

I implemented that onload alert in the body as you suggested and that has no affect on the font style at all???

I'm beginning to think that perhaps it is the use of javascript attached to a command button within a Gridview.

I might try changing it to a template column and doing it that way and see what happens unless you have a better suggestion?

Thanks again,

Gwyn

Jan 7 '08 #13

Gwyn Thomas

Template fields are not the solution as I need to back end processing on the information and therefore use the RowCommand and more specifically the rowindex value provided by it and Template fields don't seem to be able to pass this value, only button fields.

Damn!

Jan 7 '08 #14

gits

5,390

Expert Mod 4TB

hmmm ... sadly i'm not very familiar with asp so i cannot really say that there could be a problem with javascript-code ... but it would be very strange in case it would :) ... as far as i understood the problem now we have the following:

1. page is completely rendered through asp and delivered correctly
2. client renders it correctly and user takes an action
3. asp recieves the action and identifies an error with the user's action
3.1. asp writes an alert to the page

now: is the page precessed completly and then send back to the client? or immediatly after adding the alert? it should be send completely ... in case you have a look at the source-code when it is sent back to the client ... is that complete?

kind regards

Jan 8 '08 #15

Gwyn Thomas

Yes, once the button in the gridview is clicked the code behind processes the request and if a matching file exists it is played, if not, the alert box is shown on the page being re-loaded. At this point the text comes back a different size behind the alert box.

On clicking one of the other buttons on the form which causes a postback the text is returned to normal.

Jan 8 '08 #16

yogesh8585

Please remove where you write Response.Write(message)
instead of this use

message= "r u ok";
ScriptManager.RegisterClientScriptBlock(this,
this.GetType(), Guid.NewGuid().ToString(), message,true);

respoce.write causing the problem

Jul 28 '10 #17

CSS Formatting disappears after JavaScript Alertbox clicked

Similar topics