FormDecorator Script Error

6 posts, 0 answers
  1. Richard
    Richard avatar
    28 posts
    Member since:
    Jun 2010

    Posted 02 May 2014 Link to this post

    Hi,

    I'm using Telerik and JQuery UI together in an application.  I have found that a javascript error occurs when RadFormDecorator is on the page and you try to display JQuery UI Dialog with a button.  This only seems to occur in IE 11.  IE 10 and IE 9 seem fine.  If I remove the radformdecorator this works, or if I change the dialog prompt to not include a button it also works.  Below is the code to reproduce this.  Thanks!

    Code:
    <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" />
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />
            <input type="button" value="Test" onclick="Run()" />
            <div id="TestDiv" style="display:none"></div>
            <script type="text/javascript">
                function Run() {
                    $('#TestDiv').dialog({
                        modal: true,
                        buttons: { "OK": function () { alert('bye'); } }
                    });
                }
            </script>
        </form>


  2. Richard
    Richard avatar
    28 posts
    Member since:
    Jun 2010

    Posted 02 May 2014 in reply to Richard Link to this post

    Sorry I forgot the script error:

    Error: Unable to get property 'disabled' of undefined or null reference
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 07 May 2014 Link to this post

    Hi Richard,

    I have tried to reproduce the mentioned issue but to no avail. You can watch the short video test in the attached archive and then tell me what I am missing.

    Could you please try to reproduce the issue with the attached archive and then tell us what changes you have made, so that I can proceed further with the investigation?


    Regards,
    Danail Vasilev
    Telerik
     
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  5. Richard
    Richard avatar
    28 posts
    Member since:
    Jun 2010

    Posted 07 May 2014 in reply to Danail Vasilev Link to this post

    Hi Danail,

    Thank you for your help and reply.  I tried it on your sample and did not receive the error.  But once I changed the code to use JQuery UI 1.10.4, the error started occurring.  I also tried 1.10.1 and received the error.  So I think it is something specific to IE 11 using the JQuery UI 1.10 version.  Below is the full ASPX I used. 

    Thanks again!

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Examples1_Default" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />
            <input type="button" value="Test" onclick="Run()" />
            <div id="TestDiv" style="display: none"></div>
            <script type="text/javascript">
                function Run() {
                    $('#TestDiv').dialog({
                        modal: true,
                        buttons: { "OK": function () { alert('bye'); } }
                    });
                }
            </script>
        </form>
    </body>
    </html>
  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1493 posts

    Posted 10 May 2014 Link to this post

    Hello Richard,

    Thank you for the additional information.

    This seems to be an issue with the control when integrated with the mentioned version of jQuery UI. I have logged it in our feedback portal here, so that you can monitor its progress, put you comments below and vote on it. For the time being you can use the following JavaScript workaround:
    ASPX:
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />
    <script>
        //Workaround:
        var removeCssClass = Sys.UI.DomElement.removeCssClass;
        Telerik.Web.UI.RadFormDecorator.prototype.set_elementDisabled = function (element, val) {
            var actor = element;
            var nextSibling = element.nextSibling;
            var type = element.type;
     
            if ((type == "checkbox" || type == "radio") && nextSibling && nextSibling.tagName == "LABEL") {
                actor = nextSibling;
            }
            else if (type == "button" || type == "reset" || type == "submit" || element.tagName == "BUTTON") {
                var parent = element.parentNode;
                if (parent && parent.tagName == "A") {
                    actor = parent;
                    parent.disabled = val;
                }
            }
            if (val) addCssClass(actor, "rfdInputDisabled");
            else removeCssClass(actor, "rfdInputDisabled");
            try {
                if (!val && $telerik.isIE && actor.parentNode.disabled) {
                    actor.parentNode.disabled = val;
                }
            } catch (e) {
            }
        }
    </script>

    I have also updated your Telerik points for reporting this issue to us.

    Regards,
    Danail Vasilev
    Telerik
     
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  7. Richard
    Richard avatar
    28 posts
    Member since:
    Jun 2010

    Posted 12 May 2014 in reply to Danail Vasilev Link to this post

    Thank you for your help!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017