Display (Show) Ajax Rating control after some seconds using JavaScript in ASP.Net

Last Reply 6 months ago By pandeyism

Posted 6 months ago

Automatically show rating control after some seconds

aspx page

    <asp:Button ID="btnShow" runat="server" Text=" " />
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnShow" CancelControlID="btnClose" BackgroundCssClass="modalBackground">
    </cc1:ModalPopupExtender>    
    <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Height="600px" ScrollBars="Vertical" Style="display: none">
        <div class="row" align="right">
            <div style="margin-right:25px;padding-bottom:10px;display:none">
                <asp:Button ID="btnClose" runat="server" CssClass="btn btn-danger" Text="Close" />
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Please Wait...</h3>
            </div>
            <div class="panel-body">
                <div style="padding-left: 2%;" id="divReview" runat="server">
                    <div class="row">
                        <div class="col-sm-4">
                            Review Task<span style="color: red;">*</span>
                        </div>
                        <div class="col-sm-4">
                            <cc1:Rating ID="Rating1" AutoPostBack="true" OnChanged="OnRatingChanged" runat="server"
                                StarCssClass="Star" WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star"
                                FilledStarCssClass="FilledStar">
                            </cc1:Rating>
                        </div>
                        <div class="col-sm-4">
                            <img id="imagesid" src="../images/progress.gif" />
                        </div>
                    </div>
                </div>
                <div style="text-align: center;">
                    <br />
                    <asp:Label ID="Label1" ForeColor="Red" runat="server" Font-Bold="true" EnableViewState="false"></asp:Label>
                    <asp:HiddenField ID="hftaskid" runat="server" Value="0" />
                    <asp:HiddenField ID="hftaskdate" runat="server" Value="" />
                    <br />
                </div>
            </div>
        </div>
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">Please Wait...</h3>
            </div>
            <div class="panel-body">
                <div class="form-horizontal form-bordered">
                    <iframe id="iframe1" runat="server" style="width: 100%; height: 1000px;" frameborder="0"
                        scrolling="auto" marginheight="0" marginwidth="0"></iframe>
                </div>
            </div>
        </div>
        <asp:Label ID="Label2" runat="server" Text="0"></asp:Label>
    </asp:Panel>
    <asp:Label ID="lblflag" runat="server" Text=""></asp:Label>

aspx.cs page

    protected void Edit(object sender, EventArgs e)
    {
        using (GridViewRow row = (GridViewRow)((LinkButton)sender).Parent.Parent)
        {
            // some code

            Rating1.Visible = false;
            ClientScript.RegisterStartupScript(this.GetType(), "alert", "HideLabel();", false);

            mp1.Show();
        }
    }

 

<script type="text/javascript">
    function HideLabel() {
        var seconds = 5;
        setTimeout(function () {
            document.getElementById("<%=Rating1.ClientID %>").style.display = "block";
        }, seconds * 1000);
    };
</script>

plz suggest

Posted 6 months ago

Hi Shud,

Refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .Star
        {
            background-image: url(images/Star.gif);
            height: 17px;
            width: 17px;
        }
        .WaitingStar
        {
            background-image: url(images/WaitingStar.gif);
            height: 17px;
            width: 17px;
        }
        .FilledStar
        {
            background-image: url(images/FilledStar.gif);
            height: 17px;
            width: 17px;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        function Show() {
            setTimeout('showData()', 1000);
        };
        function showData() {
            document.getElementById("<%=Rating1.ClientID %>").style.display = "block";
            document.getElementById("<%=lblRatingStatus.ClientID %>").style.display = "block";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </cc1:ToolkitScriptManager>
    <cc1:Rating ID="Rating1" AutoPostBack="true" runat="server" Style="display: none"
        CssClass="rating" StarCssClass="Star" WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star"
        FilledStarCssClass="FilledStar">
    </cc1:Rating>
    <br />
    <asp:Label ID="lblRatingStatus" runat="server" Text="" Style="display: none"> </asp:Label>
    <br />
    <asp:Button Text="Show Rating" runat="server" OnClick="Show" />
    </form>
</body>
</html>

Code

C#

protected void Show(object sender, EventArgs e)
{
    Rating1.CurrentRating = 2;
    lblRatingStatus.Text = string.Format("{0} Users have rated. Average Rating {1}", 5, 1);
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "Show();", true);
}

VB.Net

Protected Sub Show(ByVal sender As Object, ByVal e As EventArgs)
    Rating1.CurrentRating = 2
    lblRatingStatus.Text = String.Format("{0} Users have rated. Average Rating {1}", 5, 1)
    ClientScript.RegisterStartupScript(Me.GetType(), "alert", "Show();", True)
End Sub

Screenshot