ToolTip inside AJAX UpdatePanel

15 posts, 0 answers
  1. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 29 Apr 2009 Link to this post

    In my application, I have to use ajax updatepanels because i'm using them with webparts.

    In my outermost updatepanel, I have two buttons at the top.  Only one button is displayed at a time, they are displayed in the same position.  When one is clicked, I basically have:
    button1.Visible = false;
    button2.Visible = true;

    and vice versa when the other is clicked.  Each button control has its own RadToolTip control that pops up automatically on hover.

    On my page, I'm using a RadScriptManager, and i've noticed strange javascript errors when I click on the button before waiting for the tooltip to appear.  I've noticed if I hover, wait a second for the tooltip, and click, I don't get errors, but if I click quickly, I get errors, and different ones sometimes (the most popular being this._parentNode() is null or not an object, and sometimes 'unspecified error'). 

    I thought this might be because I change button1.Visible = false in an ajax update, but the RadToolTip is still there, it doesn't get removed like the button does.

    So, I put each button/tooltip pair into a panel, and i did:
    panel1.Visible = false;
    panel2.Visible = true;

    so that the tooltips are removed from the page along with the buttons that they target.  I still get errors when I click quickly, most commonly:
    'this._calloutElement.style' is null or not an object

    This same error popped up sometimes before I started using the panels.  I also tried adding a ToolTipManager to automatically generate the tooltips for the entire page, and it has the same errors as well.

    I couldn't find any similar issues in the forums, any ideas?

    Kevin
  2. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 01 May 2009 Link to this post

    I'm guessing this is related to the ShowDelay property.  If I put ShowDelay="0" then I have no problem.  So I'm assuming that there's something in the tooltip that fails if I hover, it triggers the tooltip delay timer, and then before the tooltip is actually displayed, I cause an async postback and the element disappears from the page.

    Ideally, I don't like using ShowDelay="0" to work around this problem, I think it's ugly.  Has anyone had this problem on their end, or know of another workaround?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 May 2009 Link to this post

    Hello Kevin,

    I built a test demo based on the provided information and I was able to reproduce the problem. What actually happens is that when you hover the button in order to click on it, the RadToolTip starts initializing (it uses lazy initialization and its UI is created just before it is shown). However, when you click the button before the tooltip is shown, the content of the panel should be send to the server and the objects should be destroyed which interrupts the initializing process of the tooltip. The default show delay is 400ms and when you set it to 0, the tooltip is initialized and shown immediately and that is why the error does not occur. I believe that this setting is a very good solution of the issue and I would like to ask you why do you think it is ugly? Note, that this situation is pretty complex and solving it by setting a single property is a pretty good solution and I recommend to use it. 


    Best wishes,
    Svetlina
    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.
  5. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 04 May 2009 Link to this post

    I'm glad that you were able to reproduce the problem, and I appreciate the time invested.

    I think when I said 'ugly' as a workaround, I should have been more specific, as I feel that all 'workarounds' are 'ugly'.  The solution of 0 ShowDelay isn't unacceptable, and it is what I will go with, I was just hoping for an alternative that would still allow me to have a ShowDelay without the javascript errors.

    I will go ahead and use ShowDelay of "0" for now, but I am a little surprised that this issue hasn't been raised before, as I've actually had very limited experience with the tooltips, and I've had this happen in several situations in the past few weeks. 

    On a side note, I wasn't sure from your email if this was an issue that will hopefully be resolved in a future telerik release?  Or is this one of those unfortunate side effects that we have to live with?

    Thanks again for your time,

    Kevin
  6. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 05 May 2009 Link to this post

    Hello Kevin,

    I apologize if I was not clear enough but this is the expected behavior when you have such settings and when you interrupt the initializing of the client object of the tooltip. Setting the ShowDelay to 0 is actually not a hack or ugly workaround but it configures the control to work correctly in this specific scenario. Since this is the way the framework works when the initializing of an object has been interrupted, the only fix we could do is to change the default value of the ShowDelay property to 0. However, this will fit this particular scenario and will not fit many other scenarios, e.g when the tooltip is shown on focus of textbox, if the showdelay is 0, it will not show. There are many different scenarios and the control should be configured for them because there is not one universal value which suites all the cases - that is why we had exposed the property to be easily for the clients to modify its value according to his particular needs. In case we receive more scenarios in which it is better to have show delay equal to 0, we might consider to change the default value but for the time being we believe that it will be better to leave the setting the way it is.


    Sincerely yours,
    Svetlina
    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.
  7. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 15 May 2009 Link to this post

    I encountered this situation myself recently and added a low, but not zero ShowDelay.  I think the ugly nature of this is that the tooltip will always show up immediately when you mouseover to click.  Personally I find controls that do that to be irritating, and the only way I can think of to control it is to reset the ShowDelay to a higher value after the user has seen the tip once or twice. That's a bit too much fine-tuning.  We never really know when the user does a mouseover how long they will be there before activating the control, and it seems to me there is always a chance of getting an error from interrupting the initialization, no matter what we set for ShowDelay.

    Might the best way to approach this be to add exception handling, so that if we see a contention occur we can trap and hide it?  As I think about this it seems to me the tooltip manager should mask exceptions that are thrown in this sort of contention.  It's obvious that the user wants to click on a control and that they are not interested in the tooltip, so we shouldn't take a chance on throwing an exception for something they didn't want anyway.

    Just thinking aloud... HTH
  8. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 May 2009 Link to this post

    Hi guys,

    It turned out that the problem is related to the dynamic repositioning of the callout, would you please test whether putting the following script in the <form> element solves the issue?

      <script type="text/javascript">     
                
           Telerik.Web.UI.RadToolTip.prototype._adjustCallout = function()     
        {     
           
        };     
            </script>    
     

    If so, I recommend to use it as a temporary workaround until we research and solve the issue.

    Greetings,
    Svetlina
    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.
  9. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 18 May 2009 Link to this post

    I'm not too sure if it's just in my mind, but it definitely appears to help, but not get rid of the problem entirely.  I've included the script you asked, and I set the delay to 2000ms for the tooltips, and it seems to be harder to get the tooltips to break, but still happens if you click a couple times too quickly.  I seem to only get one javascript error (before I would get a few various errors), but now I only get:

    'this._popupBehavior' is null or not an object

    Once this js error comes up, the tooltips no longer display anymore.  I'm going to use this for now, I agree with TonyG, I'm really not a fan of a 0 showdelay.
  10. James
    James avatar
    10 posts
    Member since:
    Jan 2009

    Posted 27 Jul 2009 Link to this post

    I too am experiencing this problem. After reading this thread I understand what is causing the problem and have made various design changes in an attempt to limit the javascript errors. Although limited I still on occasion get the following two errors:

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SV1; GTB6; SLCC1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.5.21022; InfoPath.2; .NET CLR 3.5.30729; .NET CLR 3.0.30618)
    Timestamp: Mon, 27 Jul 2009 09:15:06 UTC

    Message: 'this._popupBehavior' is null or not an object
    Line: 7403
    Char: 1
    Code: 0
    URI: http://localhost:60581/Associates/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ScriptManager1_HiddenField&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a0d787d5c-3903-4814-ad72-296cea810318%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2009.2.712.35%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3abe14eb66-d115-4ba5-8746-9081180fdc2e%3a16e4e7cd%3af7645509%3a24ee1bba%3ae330518b%3a1e771326%3ac8618e41%3aed16cbdc%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a0d787d5c-3903-4814-ad72-296cea810318%3a76254418%3bTelerik.Web.UI%2c+Version%3d2009.2.712.35%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3abe14eb66-d115-4ba5-8746-9081180fdc2e%3ab7778d6c%3aaa288e2d%3a19620875%3a874f8ea2%3a39040b5c%3a33108d14%3abd8f85e4

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SV1; GTB6; SLCC1; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.5.21022; InfoPath.2; .NET CLR 3.5.30729; .NET CLR 3.0.30618)
    Timestamp: Mon, 27 Jul 2009 09:17:10 UTC

    Message: 'parentNode' is null or not an object
    Line: 7658
    Char: 1
    Code: 0
    URI: http://localhost:60581/Associates/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ScriptManager1_HiddenField&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a0d787d5c-3903-4814-ad72-296cea810318%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2009.2.712.35%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3abe14eb66-d115-4ba5-8746-9081180fdc2e%3a16e4e7cd%3af7645509%3a24ee1bba%3ae330518b%3a1e771326%3ac8618e41%3aed16cbdc%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a0d787d5c-3903-4814-ad72-296cea810318%3a76254418%3bTelerik.Web.UI%2c+Version%3d2009.2.712.35%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3abe14eb66-d115-4ba5-8746-9081180fdc2e%3ab7778d6c%3aaa288e2d%3a19620875%3a874f8ea2%3a39040b5c%3a33108d14%3abd8f85e4

    It would be good if I could somehow trap these in an exceptions somewhere so they can remain invisible. Is this an option?

    .
  11. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 30 Jul 2009 Link to this post

    I use a simple workaround which overrides the _adjustCallout  method and everything is fine.
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head id="Head1" runat="server">  
     
    </head> 
    <body > 
        <form id="Form1" method="post" runat="server">  
            <asp:ScriptManager ID="ScriptManager" runat="server"/>  
            <telerik:RadToolTipManager ID="Tooltip1" runat="server" ShowDelay="350" ShowCallout="true" 
            RelativeTo="Element" 
            Position="BottomRight" 
             Text="TOOOLTIPPPP" 
            > 
            <TargetControls> 
                <telerik:ToolTipTargetControl TargetControlID="btn1" /> 
                <telerik:ToolTipTargetControl TargetControlID="btn2" /> 
            </TargetControls> 
            </telerik:RadToolTipManager> 
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
                <ContentTemplate> 
                    <asp:Button runat="server"  ID="btn1" Text="btn1" ToolTip="btn1" OnClick="btnClick" Visible="false"/>  
                    <asp:Button runat="server" ID="btn2" Text="btn2" ToolTip="btn2" OnClick="btnClick"/>      
          
         </ContentTemplate> 
            </asp:UpdatePanel> 
        </form> 
        <script type="text/javascript">  
            Telerik.Web.UI.RadToolTip.prototype._adjustCalloutOld = Telerik.Web.UI.RadToolTip.prototype._adjustCallout;  
            Telerik.Web.UI.RadToolTip.prototype._adjustCallout = function() {  
                try {  
                    this._adjustCalloutOld();  
                }  
                catch (exc) {  
                }  
            }  
        </script> 
    </body> 
    </html> 
     

    P.S. I'm not able to reproduce the problem with the latest version - 2009.2 701
  12. James
    James avatar
    10 posts
    Member since:
    Jan 2009

    Posted 30 Jul 2009 Link to this post

    I've tried your javascript method Obi however still encounter the Message: 'this._popupBehavior' is null or not an object.

    I'm not using a ToolTip Manager, but have a reference to ShowCallout="true" on my tooltip.

    This is using the latest internal build 2009_2_729.


  13. IQworks
    IQworks avatar
    372 posts
    Member since:
    Dec 2008

    Posted 31 Jul 2009 Link to this post

    Hi, 
         I have a grid. Within the grid, I am using a usercontrol for an edit/insert form. In this form, there is a drop down that comes from yet another usercontrol. Inside this second usercontrol I have a radtooltip that I am using for the user to input a name.
       The problem is that when the radtooltip is called I get this javascript error message ... 
       this._popupelement is null or not an object. 
      The interesting thing is that this happens in IE7, but in FF, the radtooltip displays for a second or two, then disappears and the grid
    suddenly gets scroll bars. 
      The other interesting thing is that calling the 1st ascx that actually holds the radtooltip by itself brings the radtooltip right up. 
       Calling the 2nd ascx that uses calls the 1st ascx that holds the radtooltip brings the radtooltip right up. 
       But using the RadGrid program that calls the 2nd ascx which calls the 1st ascx gives the error situations. 
       Also, just FYI, the RadGrid program cannot see any javascript within this 1st ascx. If you put some in the 1st program, and run the RadGrid, you get "?whatever the Function name is? is undefined".

      I changed my scriptmanager to a radscriptmanager, I put in the javascript code found here in this post ....

     <script type="text/javascript">   
            TelerikTelerik.Web.UI.RadToolTip.prototype._adjustCalloutOld = Telerik.Web.UI.RadToolTip.prototype._adjustCallout;           Telerik.Web.UI.RadToolTip.prototype._adjustCallout = function() {     
                try {     
                    this._adjustCalloutOld();     
                }     
                catch (exc) {     
                }     
            }     
        </script>    
     
     

     It stopped the errors on the first few clicks (although the tooltip never appears), then, after a few clicks, the popupbehavior and parent /null error messages appear.  And I do have showdelay=0, but even without showdelay=0 it is still happening.  

       has anyone found an answer to these error messages or this situation by chance ?

     
      

  14. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Aug 2009 Link to this post

    Hello guys,

    We are aware of only one case when similar js error as the described here occurs but it comes from the dynamic adjustment of the callout and when we override the _adjustCallout method the issue disappears exactly as Obi says. That is why I assume that in your particular configurations most probably the reason for the problems is another one and not the same. However, in order to be able to help we will need to debug a reproduction setup to see wwhat exactly causes the problem. That is why the best way to proceed is that you open separate support tickets and provide a sample, fully runnable demo (if the issue occurs without a grid - remove it at all, otherwise - bind it correctly either to a DB which is also in the demo - e.g Northwind or use a fake programmatic datasource) along with detailed reproduction steps and explanations and we will examine each separate setup and we will do our best to help.

    Sincerely yours,
    Svetlina
    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.
  15. Vera Jesus
    Vera Jesus avatar
    4 posts
    Member since:
    Nov 2009

    Posted 21 Dec 2009 Link to this post

    Hello,

    In my application I am using RadTreeView Control. In the begginning I just used the 'OnNodeClick' event and everything was fine, but then I had to use the 'OnClientMouseOver' and 'OnClientMouseOutEvent' and Now I have a JavaScript error when I click a node : "this._contentAreaElement.parentNode is null or not an object".

    I think the problem maybe something like you describe in one of your posts:   

    "... What actually happens is that when you hover the button in order to click on it, the RadToolTip starts initializing (it uses lazy initialization and its UI is created just before it is shown). However, when you click the button before the tooltip is shown, the content of the panel should be send to the server and the objects should be destroyed which interrupts the initializing process of the tooltip. The default show delay is 400ms and when you set it to 0, the tooltip is initialized and shown immediately and that is why the error does not occur..."

    When I hover a node, I have a function that shows a RadEditor with a specific content. I think that what could be happening it's that when I hover the node in order to click it the RadEditor Starts to initializing , but when I click the node before the radEditor is shown, the erro occur for the same reason you specified.

    My problem is in RadTreeView I don't have the ShowDelay property.. So I don't now what to do to solve this problem..

    I couldn't find any similar issues in the forums, any ideas?

    Vera Jesus
  16. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 22 Dec 2009 Link to this post

    Hi Vera,

    Would you please provide more detailed explanations about your exact setup? You say that "When I hover a node, I have a function that shows a RadEditor with a specific content" - do you mean that you have a tooltip with editor inside it or the editor is already on the page and you just show it? I think that the best way to proceed is to prepare some sample reproduction code which is fully runnable and paste it here along with detailed reproduction steps and explanations. Once you do so, I will create a demo based on it and I will debug it locally and help you resolve the problem.

    Sincerely yours,
    Svetlina
    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
UI for ASP.NET Ajax is Ready for VS 2017