[Solved] jQuery script only works on first page load when using Update Panel in ASP.Net

Last Reply 8 days ago By dharmendr

Posted 12 days ago

i want to change background color in datalist mouse hover. when mouse up and down background color highlighted

code not working properly. 1 time page opens code working few second after that not working.

<asp:Content ID="Content1" ContentPlaceHolderID="head11" Runat="Server">
    <script language="javascript" type="text/javascript">
        function pageLoad() {
            window.setInterval(GetLatestTimeAgo, 5000);
        }

        function GetLatestTimeAgo() {
            var labels = document.getElementsByTagName("span");
            for (i = 0; i < labels.length; i++) {
                if (labels[i].title != "") {
                    var localTime = new Date();
                    var localDt=(localTime.getUTCMonth() + 1) + "/" + localTime.getUTCDate() + "/" + localTime.getUTCFullYear() + " " + localTime.getUTCHours() + ":" + localTime.getUTCMinutes() + ":" + localTime.getUTCSeconds();
                    PageMethods.GetTimeAgo(localDt,labels[i].title, OnSuccess, OnError, labels[i].id);
                }
            }
        }
        function OnSuccess(result, userContext, methodName) {
            $get(userContext).innerHTML = result;
        }

        function OnError(err) {
            alert(err.get_message());
        }
    </script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.simpletip/1.3.1/jquery.simpletip-1.3.1.min.js"></script>
<script type="text/javascript">
    $(function () { 
        $("[id*=DataList1] .style21")
            .mouseover(function () {
                $(this).css("background-color", "#C1C1C1");
            })
            .mouseout(function () {
                $(this).css("background-color", "transparent");
            });
    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <br />
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:Panel ID="pnlntfc" runat="server" Width="100%">
        <asp:DataList ID="DataList1" runat="server" Width="500px" 
            onitemdatabound="DataList1_ItemDataBound1">
        <ItemTemplate>
        <table class="style21">
            <tr>
                <td>
                     <asp:Image ID="imagephoto" runat="server" ImageUrl='<%#Eval("imagedata") %>' CssClass="imag" />
                </td>
                <td class="">
                     <asp:Label ID="pblmutname" runat="server" Text='<%#Eval("msg") %>'></asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Label ID="PostedOnLabel" runat="server" 
                        Text='<%# Eval("Date_time") %>'
                        ToolTip='<%# Eval("Date_time") %>' />
                </td>
            </tr>
        </table>
                </ItemTemplate>
            </asp:DataList>
        </asp:Panel>
        <asp:Timer ID="Timer1" runat="server" Interval="6000" ontick="Timer1_Tick">
        </asp:Timer>
    </ContentTemplate>
    </asp:UpdatePanel>
<asp:Label ID="LBLMSG" runat="server" Visible="false"></asp:Label>
</asp:Content>

 

Posted 8 days ago

You are using UpdatePanel. So you need to re-apply the jQuery code every time the UpdatePanel's Partial PostBack is completed.

Refer the modified code.

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.simpletip/1.3.1/jquery.simpletip-1.3.1.min.js"></script>
    <script type="text/javascript">
        function pageLoad() {
            window.setInterval(GetLatestTimeAgo, 5000);
            ApplyBackColor();
        }
        function ApplyBackColor() {
            $("[id*=DataList1] .style21")
                .mouseover(function () {
                    $(this).css("background-color", "#C1C1C1");
                })
                .mouseout(function () {
                    $(this).css("background-color", "transparent");
                });
        }

        function GetLatestTimeAgo() {
            var labels = document.getElementsByTagName("span");
            for (i = 0; i < labels.length; i++) {
                if (labels[i].title != "") {
                    var localTime = new Date();
                    var localDt = (localTime.getUTCMonth() + 1) + "/" + localTime.getUTCDate() + "/" + localTime.getUTCFullYear() + " " + localTime.getUTCHours() + ":" + localTime.getUTCMinutes() + ":" + localTime.getUTCSeconds();
                    PageMethods.GetTimeAgo(localDt, labels[i].title, OnSuccess, OnError, labels[i].id);
                }
            }
        }
        function OnSuccess(result, userContext, methodName) {
            $get(userContext).innerHTML = result;
        }

        function OnError(err) {
            alert(err.get_message());
        }
    </script>
    <style type="text/css">
        .imag {
            width: 60px;
            height: 50px;
            -webkit-border-radius: 60%;
        }

        .button {
            width: 70px;
            height: 40px;
            border: 0px;
            -webkit-border-radius: 50%;
        }

        .style21 {
            width: 100%;
        }
    </style>
</asp:Content>