Twitter Widget clash with RadMenu?

13 posts, 0 answers
  1. Dino
    Dino avatar
    11 posts
    Member since:
    Nov 2008

    Posted 28 Sep 2009 Link to this post

    Hi all,

    It appears that I'm getting a clash between the Twitter Widget (which allows you to show your tweets directly on your website) and the Telerik RadMenu. The reason I reckon there's a clash is because I've tested a static page with the twitter code on it that fails when the same page has a RadMenu on it, but works when the RadMenu is completely removed.

    Basically, I get a Javascript error saying "object doesn't support this property or method (user_timeline.json)".

    Anyone have any suggestions?
  2. Dino
    Dino avatar
    11 posts
    Member since:
    Nov 2008

    Posted 28 Sep 2009 Link to this post

    Here's a bit more info...

    The code for Widget is something like this:
    <div id="twtr-profile-widget"></div>
    <script src="http://widgets.twimg.com/j/1/widget.js"></script>
    <link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet">
    <script>
    new TWTR.Widget({
      profile: true,
      id: 'twtr-profile-widget',
      loop: true,
      width: 250,
      height: 300,
      theme: {
        shell: {
          background: '#3082af',
          color: '#ffffff'
        },
        tweets: {
          background: '#ffffff',
          color: '#444444',
          links: '#1985b5'
        }
      }
    }).render().setProfile('twitter').start();
    </script>

    I'm also using the following version of Telerik.Web.UI:
    2009.2.701.35

    Debugging the issue shows that the error occurs at the following syntax:
    this.results.forEach(function(a){if(!a.views){a.views=0}})

    This would appear to be Telerik code, as it doesn't seem to be in the included js file shown in the above Twitter code.

    I'd put in a couple of "alert" calls either side of the Widget object creation code, to try and see when the error occurs, and the error seems to occur some time after the object is created (I'm guessing now, but maybe on callback after a json call?)

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 28 Sep 2009 Link to this post

    Hello Dino,

    We isolated the problem to be caused by the script manager. If you try the following code, you will be able to replicate the problem, even though there is no reference to Telerik:
     <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
        <div id="twtr-profile-widget"></div> 
        <script src="http://widgets.twimg.com/j/1/widget.js"></script> 
        <link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet" /> 
        <script> 
        new TWTR.Widget({  
          profile: true,  
          id: 'twtr-profile-widget',  
          loop: true,  
          width: 250,  
          height: 300,  
          theme: {  
            shell: {  
              background: '#3082af',  
              color: '#ffffff'  
            },  
            tweets: {  
              background: '#ffffff',  
              color: '#444444',  
              links: '#1985b5'  
            }  
          }  
        }).render().setProfile('twitter').start();  
        </script> 



    Best wishes,
    Peter
    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.
  5. Dino
    Dino avatar
    11 posts
    Member since:
    Nov 2008

    Posted 28 Sep 2009 Link to this post

    Hi Peter,

    If the ScriptManager is at fault, that then means that I can't use a RadMenu alongside the Twitter Widget? I removed the ScriptManager from my code, but I then get the following error:

    "The control with ID 'RadMenu1' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it"

    This will be a big problem for me, as we need that Twitter Widget, yet I've invested quite a bit of time to get the RadMenu working the way we want on the site! :(

  6. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 28 Sep 2009 Link to this post

    Hi Dino,

    You can workaround the problem using iframe:

    <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        <iframe src="Default2.aspx" height="420px" frameborder="0"></iframe> 
    </form> 

    Default2.aspx contains the code of the twitter widget and no script manager.


    Peter
    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.
  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 28 Sep 2009 Link to this post

    Hello,

    We've investigated the issue in detail and identified the underlying problem. This is the responsible line of code in the widget source (unpacked):

    if(!Array.forEach){Array.prototype.forEach=function(a,b){...}

    Here they check for a "static" forEach function and then define an instance forEach function by modifying the Array prototype. Such "static" function is already defined by MS.AJAX, so the condition evaluates to false and the instance method is not created. They try to use it and this leads to the error that you see in IE. Firefox already has a defined forEach function and the error doesn't affect it.

    The correct code will look like:
    if(!Array.prototype.forEach){Array.prototype.forEach=function(a,b){...}

    This is still considered a bad practice, as it's polluting the global Array function, but it's what the author intended to do.

    The iframe workaround will work, but we can now use the following "patch" to keep the widget on the same page:

        <asp:ScriptManager runat="server" ID="ScriptManager1" />

        <script type="text/javascript">
            var oldForEachFunction = Array.forEach,
                undefined;
            Array.forEach = undefined;
        </script>

        <script type="text/javascript" src="http://widgets.twimg.com/j/1/widget.js"></script>

        <script type="text/javascript">
            Array.forEach = oldForEachFunction;
        </script>


    We're now storing the Array.forEach function aside until the script initializes.

    I hope this helps.

    Regards,
    Tsvetomir Tsonev
    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.
  8. Dino
    Dino avatar
    11 posts
    Member since:
    Nov 2008

    Posted 01 Oct 2009 Link to this post

    Hi Peter,

    Interesting way to tackle the problem (ie with an iframe), but I didn't really want to solve it in this way as the site is run via a CMS, and so wanted to avoid referencing another file where the content would be. Besides, the iframe way doesn't work! It solves the Javascript error issue that I initially experienced, but for some reason the RadMenu won't drop down when there's an iframe on the page! I've tried various things to see what could be causing this, but whatever iframe syntax/options I put it, it stops the RadMenu from performing dropdowns (ie you can only see the static top level part of the menu, and the sub levels do not drop down),
  9. Dino
    Dino avatar
    11 posts
    Member since:
    Nov 2008

    Posted 01 Oct 2009 Link to this post

    Hi Tsvetomir,

    This certainly helped solve my problem, and this was a much more acceptable solution. Thanks very much! :)

     

    As is most often the case, you can never guarantee that 3rd party widgets/code/etc work well or reliably, so apologies for that (although I still believe there are some bugs relating to how the RadMenu works - see previous post about the iframe!).

     

    Incidentally, how did you unpack the JS in the include? I tried a couple of ways, but didn't have much luck (didn't spend too much time on it, to be honest!).

     

    Thanks again!

  10. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 02 Oct 2009 Link to this post

    Hi Dino,

    Having an iframe on the page shouldn't affect the RadMenu. In fact, it creates iframe elements during its normal operation to workaround some IE issues. Maybe there was a JavaScript error on the page?

    You can use the IE Developer Tools to debug packed scripts (see screenshot).

    Kind regards,
    Tsvetomir Tsonev
    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.
  11. Dino
    Dino avatar
    11 posts
    Member since:
    Nov 2008

    Posted 02 Oct 2009 Link to this post

    Hi Tsvetomir,

    "Having an iframe on the page shouldn't affect the RadMenu. In fact, it creates iframe elements during its normal operation to workaround some IE issues. Maybe there was a JavaScript error on the page?Having an iframe on the page shouldn't affect the RadMenu. In fact, it creates iframe elements during its normal operation to workaround some IE issues. Maybe there was a JavaScript error on the page?"

    No, there are no javascript errors involved. I've investigated further for you, and can now confirm in a bit more detail. I was correct in saying that adding an iframe to the same page as the RadMenu can cause it to stop dropping down. The subtle thing is what syntax you use for the iframe. Basically, when editing the page contents through our CMS (which uses the Xstandard control), if no content goes inside the iframe tag (ie the content that would be used as alternate content for non-supporting browsers of iframes), the Xstandard control removes the closing iframe tag (ie "</iframe>") and adds " />" to the main tag. Therefore the following code:

    <div><iframe frameborder="1" height="200"   
    width="200"></iframe></div

    Would be changed to this:
    <div><iframe frameborder="1" height="200" width="200" /></div

    It's when this happens that the RadMenu stops working properly. The Xstandard control is not doing anything wrong here, it's creating proper XHTML code. It seems, though, that the RadMenu is not able to cope with this somehow.

    I've tested the above both with the src tag being involved, and without it - with content inside the iframe tag, and without.


    "You can use the IE Developer Tools to debug packed scripts (see screenshot)."

    That's excellent! Thanks for that! I should start using the IE Dev Tools more!! :)




  12. Dino
    Dino avatar
    11 posts
    Member since:
    Nov 2008

    Posted 02 Oct 2009 Link to this post

    Hi Tsvetomir,

    Just thought I should let you know that I found an email address for a developer at Twitter, and have passed on details of your great fix, in the hope that they could sort the code at their end so that others don't have to go through this?

    If I get any correspondence back, do you want me to pass them your direct email or anything (in which case, can you email me that?)?
  13. T. Tsonev
    Admin
    T. Tsonev avatar
    2770 posts

    Posted 03 Oct 2009 Link to this post

    Hi,

    A self-closing iframe tag is not valid. Check the XHTML 1.0 DTD for example:
    <!ELEMENT iframe %Flow;>

    Here is how the DTD looks for a self-closing tag:

    <!ELEMENT br EMPTY>   <!-- forced line break -->

    All browser process self-closing iframe tags fairly consistently - they stop parsing everything after the offending element. You can check this by moving the iframe to the top of the body.

    Thank you for reporting the bug to Twitter. I hope they'll fix this issue, as it'll spare a lot of time to people using their widget on a page with ASP.NET AJAX. Looks like a straight-forward fix, so I don't think we need to communicate with them directly.

    Regards,
    Tsvetomir Tsonev
    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.
  14. msigman
    msigman avatar
    141 posts
    Member since:
    Apr 2008

    Posted 28 Jan 2010 Link to this post

    I was having the same issue with just the MS ScriptManager -- not even the Telerik controls -- but a google search brought me here and the javascript fix presented worked perfectly.  Thank you!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017