This is a migrated thread and some comments may be shown as answers.

Can jQuery Execute BEFORE Decoration?

3 Answers 73 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Joel Kraft
Top achievements
Rank 2
Joel Kraft asked on 14 Sep 2009, 04:00 PM
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

3 Answers, 1 is accepted

Sort by
0
Lini
Telerik team
answered on 17 Sep 2009, 11:43 AM
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.
0
Joel Kraft
Top achievements
Rank 2
answered on 17 Sep 2009, 06:58 PM
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.
0
Accepted
Lini
Telerik team
answered on 22 Sep 2009, 03:21 PM
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.
Tags
FormDecorator
Asked by
Joel Kraft
Top achievements
Rank 2
Answers by
Lini
Telerik team
Joel Kraft
Top achievements
Rank 2
Share this question
or