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

Last Reply one month ago By pandeyism

Posted one month 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 one month 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