Radtooltipmanager, usercontrol & javascript

11 posts, 0 answers
  1. arnaud
    arnaud avatar
    104 posts
    Member since:
    Jul 2008

    Posted 05 Mar 2009 Link to this post

    Hi,

    I'm loading tooltip using radtooltipmanager from the main page. The content of the tooltip is a usercontrol.
    I can't get reference to the control inside the usercontrol using javascript.

    Main Page :

    <%@ Register TagPrefix="pd1" TagName="popup_detail" Src="~/.../collection/WebUserControl.ascx" %> 
     
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
     
    <script type="text/javascript"
     
    function change_image(id_cl, id_modele, photo) 
    var img = $get('<%=popup_detail.FindControl("Image2").ClientID %>'); 
     
    img.src = "http://www.iii.com/photos/modeles/2009/" + id_cl + "/l/" + id_modele + "_" + photo + ".jpg"; 
     
    }</script> 
     
        </telerik:RadCodeBlock> 
     
    <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Position="MiddleRight" 
                Skin="Default" ManualClose="true" Animation="Fade" RelativeTo="BrowserWindow" 
                Width="810px" Height="650px" ShowCallout="False" OnAjaxUpdate="OnAjaxUpdate"  
                ShowEvent="OnClick" /> 

    Protected Sub OnAjaxUpdate(ByVal sender As Object, ByVal args As ToolTipUpdateEventArgs) 
            Me.UpdateToolTip(args, args.UpdatePanel) 
        End Sub 
        Private Sub UpdateToolTip(ByVal args As Object, ByVal panel As UpdatePanel) 
             
            Dim ctrl As Control = Page.LoadControl("WebUserControl.ascx") 
            panel.ContentTemplateContainer.Controls.Add(ctrl) 
        End Sub 

    The usercontrol :

    <asp:Image ID="Image2" runat="server" /> 
     <href="#" onclick="change_image(<%=request.querystring("id_cl")%><%# DataBinder.Eval(Container.DataItem, "id_modele") %><%# DataBinder.Eval(Container.DataItem, "nbrphotos") %>); return false;">blabla</a> 


    My problem is here :
    var img = $get('<%=popup_detail.FindControl("Image2").ClientID %>');

    I can't get reference to the image2.

    I tried
    var img = $get('<%=Image2.ClientID %>');
    var img = document.getElementById('<%=Image2.ClientID %>');
    var img = document.getElementById('<%=popup_detail.FindControl("Image2").ClientID %>');

    etc ... without sucess.

    Thank you







  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 09 Mar 2009 Link to this post

    Hi Arnaud,

    I suggest to declare the needed javascript directly in the user control in order to reference the image. However, since the AJAX Framework does not evaluate script correctly and the RadToolTipManager uses AJAX to load the content of the tooltip you should go through the following blogpost

    http://blogs.telerik.com/tervelpeykov/posts/08-10-20/AJAX_Using_AJAX_to_load_a_usercontrol_that_has_JavaScript_declared_in_it.aspx

    which we prepared for scenarios like yours.

    Regards,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. arnaud
    arnaud avatar
    104 posts
    Member since:
    Jul 2008

    Posted 09 Mar 2009 Link to this post

    Dear Svetlina,

    Thanks for your answer, it is what I'm looking for.
    However i'm using a RadScriptManager inside my MasterPage instead of a 'normal' ScriptManager and it doesn't work because of that.

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableHistory="true">
        </telerik:RadScriptManager>



    Is there something I can add/modify to make your blog example work with a RadScriptManager ?

    Thank You


  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 11 Mar 2009 Link to this post

    Hello Arnaud,

    Would you please explain what is the exact problem you experience when using the approach with a RadScriptManager instead with a standard asp ScriptManager? I modified the attached to the article demo in order to use RadScriptManager but everything worked as expected. Please, find it in the attachment and in case you can modify it in order to reproduce the problem, open anew support ticket and send me the very same demo along with explanations of the problem.


    All the best,
    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.
  6. arnaud
    arnaud avatar
    104 posts
    Member since:
    Jul 2008

    Posted 12 Mar 2009 Link to this post

    Svetlina,

    Your code works but doesn't take into consideration the RadToolTipManager.
    Please copy and paste the following code based on your example :

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
     
    <%@ 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>Page sans titre</title> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <div> 
            <asp:ScriptManager ID="ScriptManager1" runat="server"
            </asp:ScriptManager> 
     
            <script type="text/javascript"
     
            //Register a global handler that will take care of any script returned with AJAX 
            function pageLoad() 
            { 
                //endRequest is raised the first time when the page loads, so we need a small timeout to make sure  
                //the event handler is only called at subsequent AJAX requests 
                window.setTimeout(function() 
                { 
                    var manager = Sys.WebForms.PageRequestManager.getInstance(); 
                    manager.add_endRequest(InternalJavascriptParse);                     
                }, 0); 
            } 
     
                function InternalJavascriptParse(sender, args) 
                {                        
                    var returnedResponse = args.get_response()._xmlHttpRequest.responseText; 
                    var scripts = []; 
                    var tagContent; 
                    while(1) 
                    { 
                        var tagMatcher = new RegExp("<" + "script" + "[^>]*>((.|\n|\r)*?)</" + "script" + ">", "i"); 
                        var tagMatch = returnedResponse.match(tagMatcher);   
                        if (tagMatch != null && tagMatch.length >= 2) 
                            {     
                                tagContent = { outer: tagMatch[0], inner: tagMatch[1], index: tagMatch.index }; 
                                scripts[scripts.length] = tagContent; 
                                var lastIndex = tagContent.index + tagContent.outer.length; 
                                returnedResponsereturnedResponse = returnedResponse.substring(lastIndex, returnedResponse.length); 
                            } 
                            else 
                            { 
                                break;  
                            }     
                    } 
     
                    for(var i = 0length = scripts.length; i < length; i++) 
                    { 
                        var script = scripts[i]; 
                        
                        { 
                            var newScript = document.createElement("script"); 
                            newScript.setAttribute("type", "text/javascript"); 
                            newScript.setAttribute("id", "internalJavaScript");       
                            newScript.text = script.inner; 
                           AppendScriptBlock(newScript, "internalJavaScript"); 
                         } 
                    }              
              }   
               
              function AppendScriptBlock(scriptBlock, id) 
              { 
                     var scriptContainer = document.getElementsByTagName("head")[0]; 
                     var scripts =  scriptContainer.getElementsByTagName("script");  
                     for (var i=0; i <scripts.length; i++)   
                     {   
                            var scriptTag = scripts[i];   
                            if (scriptTag && scriptTag.id) 
                            if(scriptTag.id == id ) 
                            { 
                                return; 
                            } 
                     }                  
                     scriptContainer.appendChild(scriptBlock); 
               }       
            </script> 
     
            <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Position="MiddleRight" 
                Skin="Default" ManualClose="true" Animation="Fade" RelativeTo="BrowserWindow" 
                Width="810px" Height="650px" ShowCallout="False" OnAjaxUpdate="OnAjaxUpdate" 
                ShowEvent="OnClick" /> 
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="200px" Width="300px"
                <asp:Button runat="server" ID="Button1" Text="Load with an AJAX request and parse scripts" /> 
            </telerik:RadAjaxPanel> 
        </div> 
        </form> 
    </body> 
    </html> 
    Imports Telerik.Web.UI 
     
    Partial Class _Default 
        Inherits System.Web.UI.Page 
     
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
            Me.RadToolTipManager1.TargetControls.Add(Button1.ClientID, 45, True) 
        End Sub 
        Protected Sub OnAjaxUpdate(ByVal sender As Object, ByVal args As ToolTipUpdateEventArgs) 
            Me.UpdateToolTip(args, args.UpdatePanel) 
        End Sub 
        Private Sub UpdateToolTip(ByVal args As Object, ByVal panel As UpdatePanel) 
     
            Dim ctrl As Control = Me.Page.LoadControl("UserControlWithScript.ascx") 
            panel.ContentTemplateContainer.Controls.Add(ctrl) 
        End Sub 
    End Class 

    Now, replace :

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

    by

     <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>

    and it will not work.

    Thank You





  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Mar 2009 Link to this post

    Hello Arnaud,

    I built up a test demo based on the provided code but it works in the same manner both when using asp ScriptManager and RadScriptManager. I tested the demo with our latest release and with the 1314 version as you noted - in both cases no error was thrown and everything worked as expected as you can see from the attached video capture of the tests on my side.

    In case you need further assistance, please prepare a fully runnable reproduction demo, open a new support ticket and send it to me along with detailed explanations and video capture of the behavior on your side.

    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.
  8. arnaud
    arnaud avatar
    104 posts
    Member since:
    Jul 2008

    Posted 16 Mar 2009 Link to this post

    Hi Svetlina

    Support Ticket opened (ticket ID is : 197797) including files + video of the behavior.

    Thank You
    Arnaud



  9. Nicolaï
    Nicolaï avatar
    160 posts
    Member since:
    Apr 2008

    Posted 09 Sep 2009 Link to this post

    Hi,

    no matter how much I search I get a ref. to that blog post..
    No matter how much I try to implement it, it gets stuck with a js error on:
     args.get_response()._xmlHttpRequest.responseText; (is null or not an object)

    Any idea why?

    Best regards,
    Nicolai
  10. arnaud
    arnaud avatar
    104 posts
    Member since:
    Jul 2008

    Posted 09 Sep 2009 Link to this post

    Hi Nicolai,

    Your problem might be different from mine but anyway I solved my problem above by using a classic scriptmanager inside my masterpage instead of a radscriptmanager this way :

    <asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory="true" ScriptMode="Release">
    </asp:ScriptManager>

    If you have a radajaxpanel in your user control, it is important you use ScriptMode="Release" or you will need to replace it with a classic updatepanel.

    Hopes it helps.
    Arnaud
  11. Nicolaï
    Nicolaï avatar
    160 posts
    Member since:
    Apr 2008

    Posted 09 Sep 2009 Link to this post

    Hi, and thanks for reply,

    my scenario is very similar...
    Except I'm already using a standard scriptmanager.
    The usercontrol loaded by the tooltipmanager is very basic.. 2 linkbuttons, 2 radnumerictextboxes..
    No updatepanels or radpanels..
    same error after adding: ScriptMode="Release"..
    ( args.get_response()._xmlHttpRequest.responseText; (is null or not an object))

    Best regards,
    Nicolai

    (ps: telerik bug on these radeditors for forums or tickets: after pasting formatted text, it's hard to remove the bold..)
  12. arnaud
    arnaud avatar
    104 posts
    Member since:
    Jul 2008

    Posted 09 Sep 2009 Link to this post

    Nicolai,

    I get the 'args.get_response()._xmlHttpRequest.responseText; (is null or not an object)' error message when I use a radscriptmanager instead of a scriptmanager in the simple example bellow (coming from telerik staff).
    If i use a scriptmanager as bellow it works just fine (without any updatepanel or radpanel like in your case) :

    MainPage : Default.aspx

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="lesitedumariage_collection_Default" %> 
     
    <%@ 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>Page sans titre</title> 
    </head> 
    <body> 
         <form id="form1" runat="server"
            <div> 
                 
                <asp:ScriptManager ID="ScriptManager1" runat="server"
                </asp:ScriptManager> 

    <script type="text/javascript"
     
            //Register a global handler that will take care of any script returned with AJAX 
            function pageLoad() 
            { 
                //endRequest is raised the first time when the page loads, so we need a small timeout to make sure  
                //the event handler is only called at subsequent AJAX requests 
                window.setTimeout(function() 
                { 
                    var manager = Sys.WebForms.PageRequestManager.getInstance(); 
                    manager.add_endRequest(InternalJavascriptParse);                     
                }, 0); 
            } 
     
                function InternalJavascriptParse(sender, args) 
                {                        
                    var returnedResponse = args.get_response()._xmlHttpRequest.responseText; 
                    var scripts = []; 
                    var tagContent; 
                    while(1) 
                    { 
                        var tagMatcher = new RegExp("<" + "script" + "[^>]*>((.|\n|\r)*?)</" + "script" + ">", "i"); 
                        var tagMatch = returnedResponse.match(tagMatcher);   
                        if (tagMatch != null && tagMatch.length >= 2) 
                            {     
                                tagContent = { outer: tagMatch[0], inner: tagMatch[1], index: tagMatch.index }; 
                                scripts[scripts.length] = tagContent; 
                                var lastIndex = tagContent.index + tagContent.outer.length; 
                                returnedResponsereturnedResponse = returnedResponse.substring(lastIndex, returnedResponse.length); 
                            } 
                            else 
                            { 
                                break;  
                            }     
                    } 
     
                    for(var i = 0length = scripts.length; i < length; i++) 
                    { 
                        var script = scripts[i]; 
                        
                        { 
                            var newScript = document.createElement("script"); 
                            newScript.setAttribute("type", "text/javascript"); 
                            newScript.setAttribute("id", "internalJavaScript");       
                            newScript.text = script.inner; 
                           AppendScriptBlock(newScript, "internalJavaScript"); 
                         } 
                    }              
              }   
               
              function AppendScriptBlock(scriptBlock, id) 
              { 
                     var scriptContainer = document.getElementsByTagName("head")[0]; 
                     var scripts =  scriptContainer.getElementsByTagName("script");  
                     for (var i=0; i <scripts.length; i++)   
                     {   
                            var scriptTag = scripts[i];   
                            if (scriptTag && scriptTag.id) 
                            if(scriptTag.id == id ) 
                            { 
                                return; 
                            } 
                     }                  
                     scriptContainer.appendChild(scriptBlock); 
               }       
                </script> 
                <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Position="MiddleRight" 
                Skin="Default" ManualClose="true" Animation="Fade" RelativeTo="BrowserWindow" 
                Width="810px" Height="650px" ShowCallout="False" OnAjaxUpdate="OnAjaxUpdate"  
                ShowEvent="OnClick" /> 
                 
                        <asp:Button runat="server" ID="Button1" Text="Load with an AJAX request and parse scripts" /> 
                
            </div> 
        </form> 
    </body> 
    </html> 

    Imports Telerik.Web.UI 
     
    Partial Class lesitedumariage_collection_Default 
        Inherits System.Web.UI.Page 
     
     
     
     
     
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
            Me.RadToolTipManager1.TargetControls.Add(Button1.ClientID, 45, True) 
        End Sub 
        Protected Sub OnAjaxUpdate(ByVal sender As Object, ByVal args As ToolTipUpdateEventArgs) 
            Me.UpdateToolTip(args, args.UpdatePanel) 
        End Sub 
        Private Sub UpdateToolTip(ByVal args As Object, ByVal panel As UpdatePanel) 
     
            Dim ctrl As Control = Me.Page.LoadControl("UserControlWithScript.ascx") 
            panel.ContentTemplateContainer.Controls.Add(ctrl) 
        End Sub 
    End Class 

    The UserControl : UserControlWithScript.ascx

    <%@ Control Language="VB" AutoEventWireup="false" CodeFile="UserControlWithScript.ascx.vb" Inherits="lesitedumariage_collection_WebUserControl2" %> 
    <script type="text/javascript"
    function InternalCall() 
      alert("Javascript declared directly in the user control called form <%=Button1.ClientID %>"); 
    </script> 
     
    <table class="controlwrapper" cellspacing="1" cellpadding="0" border="1" align="center" 
        style="width: 300px; height: 300px;"
        <tr> 
            <td class="controlcontent" style="text-align:center"
                <asp:Button ID="Button1" runat="server" Text="Call javascript method" OnClientClick="InternalCall();return false;" /> 
            </td> 
        </tr> 
    </table> 
     
    Partial Class lesitedumariage_collection_WebUserControl2 
        Inherits System.Web.UI.UserControl 
     
         
    End Class 


    Hopes it helps, otherwise you might want to open a support ticket within telerik.

    Good luck :p
    Arnaud



Back to Top
UI for ASP.NET Ajax is Ready for VS 2017