JavaScript stops working after PostBack

[Jure]

Hey!

I have a page with a tabstrip, the whole page is inside RadAjaxPanel.

Inside this page (and also ajaxpanel). I have a jquery that hides/shows a div.

The function works fine, but then I click a tab on tabstrip, the postback happens and script stops working.

What is my solution?

Here is some code:

    <script type="text/javascript">
////FILTER
$('.filter').click(function() {
  $('.filterOpen').toggle('slow', function() {
  });
});
});($telerik.$);
    </script>

<div class="filter">Filter</div>
<div class="clear"></div>
<div class="filterOpen" style="display: none">
    <div class="sort">
        <%--Sort control--%>
    </div>
    <div class="time">
        <%--Time filter control--%>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
</div>

[Iana Tsolova]

Hi Jure,

Try wrapping the script tag into a RadScriptBlock and see if it makes any difference.

Kind regards,
Iana
the Telerik team

[Richard Revelar]

In my case i am using RadListView with RadDataPager, script tags wrapped in RadScriptBlock added to UpdatedControls of ajaxmanager but behavior is still the same, works on first load and jquery no longer functioning after paging. I tried putting RadScriptBlock as UpdatedControls in  RadListView and RadDataPager ajaxsettings but no luck.

Any workarounds?

[Iana Tsolova]

Hello Richard,

You do not need to add the RadScriptBlock as updated controls. This can even have the opposite effect.
Can you share the whole page code so I can investigate it further and test it?

Kind regards,
Iana
the Telerik team

[Richard Revelar]

Here is the code: 
    RadListView "lvPhotos" with "pagerPhotos" to check....


<%@ Control Language="C#" AutoEventWireup="true" CodeFile="NewsPhotoView.ascx.cs" Inherits="Common_containers_ContentPages_public_NewsPhotoView" %>

 

<%@ Register src="../../WebParts/layouts/SiteHeader.ascx" tagname="SiteHeader" tagprefix="uc1" %>

<%@ Register src="../../WebParts/controls/Comments.ascx" tagname="Comment" tagprefix="uc2" %>

 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

         function photoClick(id) {

             var ajaxManager = $find("<%=RadAjaxManager1.ClientID %>");

             ajaxManager.ajaxRequest(id);

         }

 

         function EditForm(url) {

             var manager = $find("<%=windowEditor.ClientID %>");

             var oWnd = manager.open(url, "windowContent");

             oWnd.Center();

         }

 

         function refreshDisplay(id) {

             var ajaxManager = $find("<%=RadAjaxManager1.ClientID %>");

             ajaxManager.ajaxRequest(id);

         }

 

 

         var PhotoID;

         function confirmCallBackFn(arg) {

             if (arg) {

                 window.top.setTimeout(function () {

                     $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Delete:" + PhotoID);

                 }, 0);

             }

             else { return; }

         }

 

         window.confirmDelete = function (phID, evt) {

             PhotoID = phID;

 

             var ev = evt ? evt : window.event; //Moz support requires passing the event argument manually

             //Cancel the event

             ev.cancelBubble = true;

             ev.returnValue = false;

             if (ev.stopPropagation) ev.stopPropagation();

             if (ev.preventDefault) ev.preventDefault();

             window.radconfirm('Deleting a photo will also remove all related discussions.<br/><br/> Delete this Photo?<br/>', confirmCallBackFn, 400, 120);

             return false;

         }

 

 

 

         $(document).ready(function () {

             $("ul.photoThumb li").hover(function () {

                 $(this).css({ 'z-index': '100' }); /*Add a higher z-index value so this image stays on top*/

                 $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/

                      .animate({

                          marginTop: '-43px', /* The next 4 lines will vertically align this image */

                          marginLeft: '-43px',

                          top: '50%',

                          left: '50%',

                          width: '74px', /* Set new width */

                          height: '74px', /* Set new height */

                          padding: '3px'

                      }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

 

             }, function () {

                 $(this).css({ 'z-index': '0' }); /* Set z-index back to 0 */

                 $(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/

                      .animate({

                          marginTop: '0', /* Set alignment back to default */

                          marginLeft: '0',

                          top: '0',

                          left: '0',

                          width: '60px', /* Set width back to default */

                          height: '60px', /* Set height back to default */

                          padding: '2px'

                      }, 400);

             });

 

         });

 

    </script>

</telerik:RadCodeBlock>

 

 

<style type="text/css">

    .loading

    {

        background-color: #fff;

        height:100%;

        width:100%;

    }

     

    body

    {

        background: transparent url(http://www.ugnayan.com/App_Themes/Default/images/_page/page_background3.jpg) repeat-x;

        min-width:900px !important;*/ /*for mozilla*/

        width:expression(document.body.clientWidth < 900 ? "920px" : "100%") !important;*/

    }

     

    .rfdZone.RadForm_Black

    {

        background-color: transparent;

    }

</style>

 

 

<uc1:SiteHeader ID="SiteHeader1" runat="server" />

<div class="divContainer" style="width:100%; background-color:black;padding: 3px 3px 4px 3px; margin-bottom:1px;">

    <div class="divContainer" style="padding:0px; margin:0px; width:100%;">

 

        <div class="divContainer" style="padding:0px; color:White;">

            <div class="fieldLabel" style="padding: 9px 0px 5px 0px; width:80px; color:Wheat;">

                Photo Album

            </div>

            <div class="divContainer">

                <telerik:RadComboBox ID="cboAlbumType" runat="server" Width="200" DataTextField="Name" DataValueField="AlbumTypeID"

                    OnSelectedIndexChanged="cboAlbumType_SelectedIndexChanged" AutoPostBack="true" CausesValidation="false" SkinID="Black">

                </telerik:RadComboBox>

            </div>

        </div>

        <div class="divContainer" style="padding-bottom:0px; float:right;">

            <telerik:RadDataPager ID="pagerPhotos" runat="server" PagedControlID="lvPhotos" PageSize="45" Skin="Black" >

                <Fields>

                    <telerik:RadDataPagerButtonField FieldType="Numeric" />

                </Fields>

            </telerik:RadDataPager>

        </div>

    </div>

    <div class="divContainer" style="padding:0px; margin:0px; padding-left:5px;">

        <telerik:RadListView ID="lvPhotos" runat="server"

            ItemPlaceholderID="ListViewContainer"

            OnItemDataBound="lvPhotos_ItemDataBound"

            OnNeedDataSource="lvPhotos_NeedDataSource" AllowPaging="True" PageSize="45">

            <LayoutTemplate>

                <ul class="photoThumb">

                    <asp:PlaceHolder runat="server" id="ListViewContainer"/>

                </ul>

            </LayoutTemplate>

            <ItemTemplate>

                <li>

                    <asp:HyperLink ID="hlImage" CssClass="LinkNone" runat="server">

                        <telerik:RadBinaryImage runat="server" ID="rbiThumbPhoto" Width="60" Height="60" ResizeMode="Crop" ImageAlign="Middle"/>

                    </asp:HyperLink>

                </li>

 

            </ItemTemplate>

        </telerik:RadListView>

    </div>

    <telerik:RadAjaxLoadingPanel ID="loadingList" runat="server" Transparency="20" IsSticky="true">

            <asp:Label ID="Label1" runat="server">       

                <img alt="Loading..." src='<%= ImageFile("loading/loadingtext.gif") %>' style="border: 0px;" />

            </asp:Label>

    </telerik:RadAjaxLoadingPanel>

 

</div>

 

<div id="divPhotoShow" runat="server" class="divContainer" style="width:100%; padding:0px; background-color:White !important;">

    <div id="divPhotoImage" runat="server" class="divContainer" style="text-align:center; color:white; background-color:black; width:100%; padding:15px 5px 10px 5px; margin-bottom:10px;">

        <telerik:RadBinaryImage runat="server" ID="rbiFullPhoto" ResizeMode="fit" ImageAlign="Middle" Height="700" />

        <div id="divActions" runat="server" class="divContainer" style="width: 100%; padding: 15px 15px 0px 5px;">

            <div class="divContainer" style="padding: 0px;">

                <telerik:RadButton ID="btnLike" runat="server" Text="like" ButtonType="LinkButton" OnClick="btnLike_Click" >

                </telerik:RadButton>

                <telerik:RadButton ID="btnTag" runat="server" Text="tag this photo" ButtonType="LinkButton" Visible="false" >

                </telerik:RadButton>

                <telerik:RadButton ID="btnShare" runat="server" Text="share" ButtonType="LinkButton" Visible="false">

                </telerik:RadButton>

            </div>

            <div class="divContainer" style="padding: 0px; float:right; margin-right:30px;">

                <telerik:RadButton ID="btnReport" runat="server" Text="report this photo" ButtonType="LinkButton" Visible="false" >

                </telerik:RadButton>

                <telerik:RadButton ID="btnEdit" runat="server" Text="edit" ButtonType="LinkButton" AutoPostBack="false" Visible="false">

                </telerik:RadButton>

                <telerik:RadButton ID="btnDelete" runat="server" Text="delete" ButtonType="LinkButton" AutoPostBack="false" Visible="false">

                </telerik:RadButton>

            </div>

        </div>

    </div>

 

 

    <table class="tableLayout" style="margin: 10px 20px 10px 20px; width: 900px;">

        <tr>

            <td style="vertical-align:top; padding-bottom:5px;">

                <asp:HyperLink ID="hlAvatar" runat="server" visible="false">

                    <telerik:RadBinaryImage runat="server" ID="rbiUserAvatar" Width="50" Height="50" ResizeMode="fit" ImageAlign="Middle"/>

                </asp:HyperLink>

            </td>

            <td style="width:100%; padding-left:5px; padding-bottom:5px;">

                <div class="divContainer" style="width:100%; padding:0px;">

                    <asp:HyperLink ID="hlSource" runat="server" Font-Size="Small" CssClass="linkTitleSub" visible="false" ></asp:HyperLink>

                </div>

                <div class="divContainer" style="width:100%; padding:0px; margin-bottom:5px;">

                    <div id="divLocation" runat="server" class="divContainer" visible="false" style="padding:0px;">

                        <asp:HyperLink ID="cityFullName" runat="server" CssClass="linkTitleSub" Text="cityname"></asp:HyperLink>  ·  

                    </div>

                    <div id="divAuthorSomeone" runat="server" class="labelTitleSub" visible="false" style="padding:0px;">

                         <asp:Label id="hlAuthorSomeone" runat="server"/>  ·  

                    </div>

                    <div id="divAuthorUser" runat="server" class="labelTitleSub" visible="false" style="padding:0px;">

                        Photo By <asp:hyperlink id="hlAuthorUser" runat="server" CssClass="linkTitleSub"/>  ·  

                    </div>

                    <div class="labelTitleSub" style="padding:0px;">

                        <asp:Label ID="lblViews" runat="server" text="views"></asp:Label>  ·  

                    </div>

                    <div class="labelTitleSub" style="padding:0px;">

                        <asp:Label ID="lblDate" runat="server" ></asp:Label>  ·  

                        <a href="#myComment" class="linkTitleSub">

                            <asp:Label ID="lblComments" runat="server" text="comments"></asp:Label>

                        </a>

                    </div>

                </div>

                <div class="divContainer" style="width:100%; padding:0px; margin-bottom:5px; margin-top:10px;">

                    <div id="divNewsTitle" runat="server" visible="false" style="padding:0px; width:100%; margin-bottom:10px;">

                        From article:  <asp:hyperlink id="hlNewsTitle" runat="server" CssClass="newsListTitle" Font-Bold="true"/>

                    </div>

 

                    <asp:Label ID="lblPhotoTitle" CssClass="labelPhotoTitle" runat="server"></asp:Label>

                    <asp:Label ID="lblCaption" CssClass="labelPhotoCaption" runat="server"></asp:Label>

                </div>

            </td>

        </tr>

    </table>

 

    <div class="divContainer" style="padding:0px 15px 15px 15px !important;">

        <div class="fieldFloat" style="width:670px;">

            <uc2:Comment ID="Comment1" runat="server"/>

        </div>

    </div>

 

</div>

 

<telerik:RadAjaxLoadingPanel ID="loadingPhoto" runat="server" Transparency="60">

    <div class="loading">

        <asp:Label ID="lblLoading" runat="server">       

            <img alt="Loading..." src='<%= ImageFile("loading/ajax_loading.gif") %>' style="border: 0px; margin-top:50px;" />

        </asp:Label>

    </div>

</telerik:RadAjaxLoadingPanel>

 

<telerik:RadWindowManager runat="server" id="windowEditor" VisibleTitlebar="false" Modal="True">

    <windows>

        <telerik:RadWindow Runat="server" Id="windowContent" AutoSize="true" Width="200" height="200"/>

    </windows>

</telerik:RadWindowManager>

 

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxForm_AjaxRequest">

    <AjaxSettings>

        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="divPhotoShow" LoadingPanelID="loadingPhoto"/>

                <telerik:AjaxUpdatedControl ControlID="lvPhotos" />

                <telerik:AjaxUpdatedControl ControlID="RadCodeBlock1" />

            </UpdatedControls>

        </telerik:AjaxSetting>

        <telerik:AjaxSetting AjaxControlID="pagerPhotos">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="lvPhotos" LoadingPanelID="loadingList"/>

                <telerik:AjaxUpdatedControl ControlID="pagerPhotos"/>

                <telerik:AjaxUpdatedControl ControlID="RadCodeBlock1" />

            </UpdatedControls>

        </telerik:AjaxSetting>

        <telerik:AjaxSetting AjaxControlID="rdoAlbumType">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="lvPhotos" LoadingPanelID="loadingList"/>

                <telerik:AjaxUpdatedControl ControlID="rdoAlbumType"/>

                <telerik:AjaxUpdatedControl ControlID="RadCodeBlock1" />

            </UpdatedControls>

        </telerik:AjaxSetting>

        <telerik:AjaxSetting AjaxControlID="btnCaption">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="lblCaption"/>

                <telerik:AjaxUpdatedControl ControlID="btnCaption"/>

            </UpdatedControls>

        </telerik:AjaxSetting>

        <telerik:AjaxSetting AjaxControlID="btnSaveCaption">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="lblCaption"/>

                <telerik:AjaxUpdatedControl ControlID="btnCaption"/>

            </UpdatedControls>

        </telerik:AjaxSetting>

        <telerik:AjaxSetting AjaxControlID="btnCancel">

            <UpdatedControls>

                <telerik:AjaxUpdatedControl ControlID="lblCaption"/>

                <telerik:AjaxUpdatedControl ControlID="btnCaption"/>

            </UpdatedControls>

        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManager>

[Iana Tsolova]

Hi Richard,

From the provided code I see that the problematic controls are in a user control. How is this control added on the page, declaratively or dynamically? Is it working if it is added declaratively? And what javascript is not executed properly, this for the $(document).ready definition or all the functions? Instead of $(document).ready, you can try using the predefined pageLoad client-side event.

Best wishes,
Iana
the Telerik team

[JeffSM]

I'm posting this just to help my future me that eventually could happen again.

 

In my case the tag </form> was before the telerik components in the master page.

#jefferson2020

[Vessy]

Hi,

Thanks a lot for sharing the found solution with the community, Jeff :)

Regards,
Vessy
Progress Telerik

[Allen]

We're only human!  Wouldn't it be nice if this sort of syntax goof was caught automatically?

[Vessy]

Hi Allen,

We can control such syntax issues when they are inside the configuration of our controls but, unfortunately, we do not have control over the setup of the page itself.

Regards,
Vessy
Progress Telerik