RadInputManager and Prototype Incompatibility?

8 posts, 0 answers
  1. Philippe GRACA
    Philippe GRACA avatar
    35 posts
    Member since:
    Nov 2003

    Posted 17 Mar 2009 Link to this post

    Hi
    i'm getting tired trying to debug the following simple page that contains a Radajaxmanager, a RadInputMananger AND a reference to prototype.js (the latest version 1.6.0.3). the RadInputManager transforms a textbox in an Email Required Field.

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
      <title>test</title> 
    </head> 
    <body> 
      <form id="form1" runat="server"
      <telerik:RadScriptManager ID="rsm" runat="server"
        <Scripts> 
          <asp:ScriptReference Path="http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js" /> 
        </Scripts> 
      </telerik:RadScriptManager> 
      <telerik:RadAjaxManager ID="ram" runat="server"
        <AjaxSettings> 
          <telerik:AjaxSetting AjaxControlID="btUpd"
            <UpdatedControls> 
              <telerik:AjaxUpdatedControl ControlID="lb"></telerik:AjaxUpdatedControl> 
            </UpdatedControls> 
          </telerik:AjaxSetting> 
        </AjaxSettings> 
      </telerik:RadAjaxManager> 
      <asp:TextBox ID="txtFrom" runat="server" Width="322px" MaxLength="500"></asp:TextBox> 
      <telerik:RadInputManager ID="rim" runat="server"
        <telerik:RegExpTextBoxSetting BehaviorID="ebh4" ValidationExpression="^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"
          <Validation IsRequired="true" /> 
          <TargetControls> 
            <telerik:TargetInput ControlID="txtFrom" /> 
          </TargetControls> 
        </telerik:RegExpTextBoxSetting> 
      </telerik:RadInputManager> 
      <asp:Button ID="btUpd" runat="server" Text="Update" OnClick="btUpd_Click" /> 
        <br /> 
        <asp:Label ID="lb" runat="server" /> 
      </form> 
    </body> 
    </html> 
     

    The code behind is trivial

    public partial class WebForm2 : System.Web.UI.Page 
      { 
        protected void Page_Load(object sender, EventArgs e) 
        { 
     
        } 
     
        protected void btUpd_Click(object sender, EventArgs e) 
        { 
          lb.Text = "ajax query!"
        } 
      } 

    When I do provide a valid email in the textbox and press the update button i get a javascript error

    com.get_targetControlIDs is not a function
    --> var ids=com.get_targetControlIDs();

    A few remarks

    It appears that when prototype is loaded, the onsubmit function od radinputmanager.js (line 726) is retrieving two values instead of one only in the this._getSettings() method.

    _onSubmit:function(){ 
    var i; 
    for(i in this._getSettings()){ 
    if(this._getSettings()[i]){ 
    this._beforeSubmit(this._getSettings()[i]); 

    The first and correct retrieved value is "rim_e4" which corresponds to the behaviour.
    The second one which is weird and I cannot understand why it is bugging is "each" which is a function and not a behaviour at all.

    I think that the Object.extend(Array.prototype, Enumerable); line in protoype.js is causing the issue but i can't understand why

    Please help me, this is really getting urgent.
    Best Regards
    Philippe



  2. Philippe GRACA
    Philippe GRACA avatar
    35 posts
    Member since:
    Nov 2003

    Posted 17 Mar 2009 Link to this post

    Using firebug, I'm able to debug the content of the _getSettings method and I can see that all the prototype array methods are also in there.

    setting : rim_e4
    setting : each
    setting : eachSlice
    setting : all
    setting : any
    setting : collect
    setting : detect
    setting : findAll
    setting : grep
    setting : include
    setting : inGroupsOf
    setting : inject
    setting : invoke
    setting : max
    setting : min
    setting : partition
    setting : pluck
    setting : reject
    setting : sortBy
    setting : toArray
    setting : zip
    setting : size
    setting : inspect
    setting : find
    setting : select
    setting : member
    setting : entries
    setting : _reverse
    setting : _each
    setting : clear
    setting : first
    setting : last
    setting : compact
    setting : flatten
    setting : without
    setting : uniq
    setting : intersect
    setting : clone
    setting : toJSON

    Is there a way to avoid that? I need prototype by the way :)
    Philippe
  3. Philippe GRACA
    Philippe GRACA avatar
    35 posts
    Member since:
    Nov 2003

    Posted 17 Mar 2009 Link to this post

    As of now, I am overring the _beforeSubmit event

      <script type="text/javascript" language="javascript"
        Telerik.Web.UI.RadInputManager.prototype._beforeSubmit = function(com) { 
          if (typeof (com) != 'object'return
          var ids = com.get_targetControlIDs(); 
          for (var i = 0; i < ids.length; i++) { 
            com.get_targetInput(ids[i])._beforeSubmit(); 
          } 
        } 
    </script> 
     

    It is working but not really acceptable
  4. Philippe GRACA
    Philippe GRACA avatar
    35 posts
    Member since:
    Nov 2003

    Posted 18 Mar 2009 Link to this post

    To whom may be interested, the support confirmed that Telerik RadControls are not compatible with prototype.js.

  5. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 20 Mar 2009 Link to this post

    Hello Philippe,

    I am afraid that actually Prototype.js is not compatible to use together with some JavaScript libraries.
    The problem is the way Prototype.js extends Array object which breaks all kind of for-each array iteration.

    Why I Don't Use The prototype.js JavaScript Library
    Javascript "Associative Arrays"

    Best wishes,
    Nikolay
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Philippe GRACA
    Philippe GRACA avatar
    35 posts
    Member since:
    Nov 2003

    Posted 20 Mar 2009 Link to this post

    Hi and thx for the answer and links
    In the second one, i read that interesting comment

    So I will say it again: Array is not meant to be used for key/value pairs. Luckily, there is a dead-simple way to fix this. In the above example, you need only change Array to Object. (Or, if you’re using literal syntax, change [] to {}.) There. Your wrong code is no longer wrong, and it took only a little more work than a simple find-and-replace

    What are your thoughts on this? Do you think telerik arrays key/values pairs can be replaced by simple objects?

    Best regards
    Philippe




  7. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2289 posts

    Posted 20 Mar 2009 Link to this post

    Hello Philippe,

    Extending Array object as Prototype.js does is not actually a  good practice. This might cause unexpected behaviors.

    You can check for example how ASP.NET AJAX client API extends some of the root objects as Array,String .. or even some other JavaScript library as jQuery.

    Regards,
    Nikolay
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  8. Philippe GRACA
    Philippe GRACA avatar
    35 posts
    Member since:
    Nov 2003

    Posted 20 Mar 2009 Link to this post

    Thx Nikolay
    I'll abandon prototype on my next projects.
    Regards
    Philippe

Back to Top