Radtooltipmanager, usercontrol & javascript

[arnaud]

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" />
 <a 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

[Svetlina Anati]

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.

[arnaud]

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

[Svetlina Anati]

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.

[arnaud]

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 = 0, length = 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

[Svetlina Anati]

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.

[arnaud]

Hi Svetlina

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

Thank You
Arnaud

[Nicolaï]

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

[arnaud]

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

[Nicolaï]

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..)

[arnaud]

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 = 0, length = 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