Can jQuery Execute BEFORE Decoration?

4 posts, 1 answers
  1. Joel Kraft
    Joel Kraft avatar
    87 posts
    Member since:
    Jan 2004

    Posted 14 Sep 2009 Link to this post

    I am working with a third party application.  We have been using radFormDecorator to make it prettier on our site since it was introduced.  While testing a recent update, we found that they now include a class attribute on their buttons, which means that RFD ignores it.

    I would like to make a suggestion for the future that the ability to override this behavior be introduced to make it skin everything.  In conjunction with DecorationZoneId, we could get an extra level of control!

    In the meantime, I am trying to use jQuery to remove the class attribute on those buttons so they will be decorated, which is done with a bit of jQuery.  We can see using Firebug that the class attribute gets removed... BUT it doesn't seem to get removed until after the decoration has occurred, because the buttons do not get decorated.

    It is attached to ready() on the document by this script:

    window.$ = $telerik.$;
    $(document).ready(function() {
         $("input.buttonstyle").removeAttr("class");
    });

    That script is included in the page:

    <asp:ScriptManager 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 Path="/Site/Master/Js/Controls.js" />
        </Scripts>
    </asp:ScriptManager>

    I can see that the scripts seem to be loading in the order I need.  The FormDecorator stuff
    1. Webform Postback
    2. MicrosoftAjax.js
    3. MicrosoftAjaxWebForms.js
    4. Core.js
    5. jQuery.js
    6. Controls.js (my script)
    7. FormDecorator

    Again, upon inspection, the class does get removed, but just apparently not in time.  Is there a way to ensure that some script runs before decoration occurs??
    Joel

  2. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 17 Sep 2009 Link to this post

    Hello Joel,

    The .ready function should be executed before the ASP.NET AJAX framework initializes, so it is possible to manipulate the input elements before the form decorator.  Here is the code I tried - it successfully removed the class attribute of the input control so it was decorated by the RadFormDecorator:

    <telerik:RadScriptManager ID="RadScriptManager1" 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" /> 
            </Scripts> 
        </telerik:RadScriptManager> 
        <script type="text/javascript"
            window.$ = $telerik.$; 
            $(document).ready(function() 
            { 
                $("input").removeAttr("class"); 
            }); 
        </script> 
        <telerik:RadFormDecorator ID="rfd1" runat="server" Skin="Vista" /> 
        <div> 
            <input type="button" class="bclass" id="button1" name="button1" value="test" /> 
        </div> 

    Greetings,
    Lini
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joel Kraft
    Joel Kraft avatar
    87 posts
    Member since:
    Jan 2004

    Posted 17 Sep 2009 Link to this post

    Yes, that is essentially what I am doing.
    I am finding that this solution is very reliable in Internet Explorer.
    In Firefox, though, it only seems to work about 10% of the time.
    Very odd.
  5. Answer
    Lini
    Admin
    Lini avatar
    2144 posts

    Posted 22 Sep 2009 Link to this post

    Hi Joel,

    Perhaps the order of events is not guaranteed on Firefox. You can simply switch to using the ASP.NET AJAX init client event instead of jQuery's document ready event:

    Sys.Application.add_init(function() 
        $("input").removeAttr("class"); 
    }); 

    instead of:

    $(document).ready(function() 
        $("input").removeAttr("class"); 
    }); 

    Best wishes,
    Lini
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top