jQuery script is not working after postback when using with ajax manager

6 posts, 0 answers
  1. Muhahammad
    Muhahammad avatar
    8 posts
    Member since:
    Jan 2012

    Posted 17 Jan 2012 Link to this post

    I have the following issues when using jquery scripts in the page with ajax manager although I used radscriptblock rounding my script as documented:

    1- when using radscriptblock inside updated ajax panel it will be executed in the load but if I make any ajax request manually using "ajaxRequest" function it will be executed again although I need it to be executed only one time [on page load]

    2- when using radscriptblock out of updated ajax panel, it will be also executed in the load but if I make any ajax request manually using "ajaxRequest" function it will be no longer executed any more [after going to server side]


    below is my code:

    PAGE:
    <head>
      <script src="http://localhost/xsurvey/scripts/custom/collapsible.panel.js" type="text/javascript"></script>
    </head>
    <%--below is body-->
    <asp:ScriptManager runat="server" ID="scrt" />
        <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="OnAjaxManager_Request">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="PnlPage">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="PnlPage" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="PnlPage" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <asp:Panel runat="server" ID="PnlPage">
            <telerik:RadScriptBlock runat="server" ID="s">
     
                <script type="text/javascript">
                    $(document).ready(function() {
                        function test() {
                            $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest('sss');
                        }
                        alert("d");
                        $("#faq").makeCollapsible({ 'collapse': '1' }, test);
     
     
                    });
       
       
                
                </script>
     
            </telerik:RadScriptBlock>
            <asp:Label runat="server" ID="LblEd" />
            <ul id="faq">
                <li>
                    <h3 style="text-align: center">
                        More Options?</h3>
                    <p>
                        test test test
                        <br />
                        test test test
                        <br />
                        test test test
                        <br />
                        test test test
                        <br />
                        test test test
                        <br />
                        test test test
                        <br />
                        test test test
                        <br />
                    </p>
                </li>
                <li>
                    <h3 style="text-align: center">
                        More Options?</h3>
                    <p>
                        test test test
                        <br />
                        test test test
                        <br />
                        test test test
                        <br />
                        test test test
                        <br />
                        test test test
                        <br />
                        test test test
                        <br />
                        test test test
                        <br />
                    </p>
                </li>
            </ul>
        </asp:Panel>
    using System;
    using System.Collections;
    using System.Configuration;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.HtmlControls;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Xml.Linq;
    using Telerik.Web.UI;
     
    public partial class Tests_jQuery_CollapsePanel : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        protected void OnAjaxManager_Request(object sender, AjaxRequestEventArgs e)
        {
            LblEd.Text = "test test CALL SERVER" + DateTime.Now;
     
        }

    }

    Collapsible.panel.js
    (function($) {
     
        $.fn.makeCollapsible = function(options, onCollapse) {
            var settings = $.extend({
                'collapse': '1',
                'idToCollapse': ''
            }, options);
     
            return this.each(function() {
                var $this = $(this);
     
                $this.find("li > h3").each(function() {
                    $(this).css("cursor", "pointer");
                    $(this).siblings().wrapAll('<div>');
                });
     
                //$("#faq li > *:not(h3)").hide();
     
     
                $this.find("li > h3").click(function() {
     
                    var $h3 = $(this);
                    //minus icon
                    var minus = {
                        'background-image': 'url(http://localhost/xsurvey/Images/minus.gif)'
                    };
                    //plus icon
                    var plus = {
                        'background-image': 'url(http://localhost/xsurvey/Images/plus.gif)'
                    };
     
                    //all siblings beside <li><h3></h3>(.....)</li>
                    var risposta = $h3.siblings();
     
                    var callf = 0;
     
                    if (risposta.is(':hidden')) {
                        $h3.css(minus);
                        callf = 1;
                        risposta.slideDown("slow");
                    }
                    else {
                        $h3.css(plus);
                        risposta.slideUp("slow");
                    }
     
                    //risposta.slideToggle("slow");
     
                    if (callf == 1 && settings.onCollapse != '') {
                        //setTimeout(alert('s'), 2000);
                        if (typeof onCollapse == "function") onCollapse();
                    }
     
                });
            });
     
        }
     
     
    })(jQuery);
  2. Muhahammad
    Muhahammad avatar
    8 posts
    Member since:
    Jan 2012

    Posted 19 Jan 2012 Link to this post

    anybody helps us plz...
  3. Muhahammad
    Muhahammad avatar
    8 posts
    Member since:
    Jan 2012

    Posted 30 Jan 2012 Link to this post

    It is a shame to use such controls as there is no support at all for  issues, how to trust in such thing!!!
  4. Vasil
    Admin
    Vasil avatar
    1635 posts

    Posted 01 Feb 2012 Link to this post

    Hi Muhahammad,

    If you want the function to be executed only once, then place it outside the update panel.

    Kind regards,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. Muhahammad
    Muhahammad avatar
    8 posts
    Member since:
    Jan 2012

    Posted 03 Feb 2012 Link to this post

    no this is not what I meant, try the following simple example to get what I mean.

    The client click event of button will be executed for the first time only "an alert will be displayed for you" then it will go to the server updating the label. now press the same button again, you will find client event will not be executed anymore with going to the server properly, it seems the client even of the button is vanished at all.

    <asp:ScriptManager ID="ScriptManager1" runat="server">
               <Scripts>
                   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                   <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
               </Scripts>
    </asp:ScriptManager>
     
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
           <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="PnlAllPage">
                   <UpdatedControls>
                       <telerik:AjaxUpdatedControl ControlID="PnlAllPage" />
                   </UpdatedControls>
               </telerik:AjaxSetting>
           </AjaxSettings>
       </telerik:RadAjaxManager>
       <telerik:RadScriptBlock runat="server" ID="tt">
     
           <script type="text/javascript">
     
     
               $(document).ready(function() {
                   $(".button").click(function() {
                       alert('ddd');
                   });
               });
     
           </script>
     
       </telerik:RadScriptBlock>
       <asp:Panel runat="server" ID="PnlAllPage">
           <asp:Label runat="server" ID="Lbl" CssClass="label" Text="test" />
           <asp:Button runat="server" ID="Btn" CssClass="button" Text="test" OnClick="OnBtnClick" />
       </asp:Panel>


    the cause of this is the ajax manager as if you make its setting to be like the following it will be executed correctly as needed/requested:

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Btn">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Lbl" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

    Wishes to reply me very soon as this is making a lot of troubles
    Thanks,
    Muhammad
  6. Vasil
    Admin
    Vasil avatar
    1635 posts

    Posted 03 Feb 2012 Link to this post

    Hello,

    When you update the PnlAllPage panel, you should reattach the client side click event. If you need to update the whole panel (with the button inside), you could use the ResponseEnd client event of the manager, to execute your jquery and to attach the event on the 'new' button. I am saying the 'new' button because it is new for the browser, as everything in the updated panel.

    The problem is not in the AjaxManager. In the second example you simply does not update the button, so it's "onclick" event remain.

    Kind regards,
    Vasil
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top