Javascript in a dynamically created Raddock

[Bill DeLisi]

I am sorry if this has been asked before, but I couldn't seem to find anything on it and don't have enough development background to figure it out. I have docks being dynamically created based on some of the Telerik sample code. When the user adds the dock the contents are populated with a user control that is pulled from a database. The user control contains some javascript that needs to run immediately after the dock is loaded, but only seems to intiate after a postback. Anytime that dock is loaded afterwards the contents are displayed fine. Is there something I can do to make that load during the initial creation. Thank you!

[Dimcho]

Hi Bill DeLisi,

The Dynamically Created Docks demo shows how using AJAX you can add newly created docks without a postback. The new docks are firstly created in a hidden UpdatePanel,  and then transferred to a dock zone with client-side script. If your code fires only when a postback occurs, the problem is maybe related with the AJAX.

We need more details about your scenario and the problem you experience.
Please open a new support ticket and send us a small sample project which reproduces the problem and we will do our best to help you.


Kind regards,

Dimcho
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Imran]

Just bringing this question back to life.. 

for example, if I was dynamically adding a dock (UserControl) which only had the content:

<script type='text/javascript'>
alert("sdfdfgdfgdfg");
</script>

The alert is not fired when the dock is added. But when the page is re-loaded or refreshed the alert is triggered.

This is a basic example, and we have controls that have things like twitter feeds using javascript and none of our javascript content is loaded. Is there a workaround for this?

All help would be appreciated.

Thanks

[Pero]

Hi Imran,

This is not directly related to the RadDock control, because if you try to add any user control dynamically during ajax request, its scripts will not be executed.
This problem can be solved, by manually evaluating the scripts in the user control, by registering a script from the code behind. What you need to do is place the JS code of every user control into asp:Panel control with ID="Panel1". Then in the code behind of the main page, where the docks are added for the first time - on button.click for example we add the following code (highlighted in yellow):

protected void ButtonAddDock_Click(object sender, EventArgs e)
{
    RadDock dock = CreateRadDock();
    //find the target zone and add the new dock there
    RadDockZone dz = (RadDockZone)FindControl(DropDownZone.SelectedItem.Text);
    dz.Controls.Add(dock);
    CreateSaveStateTrigger(dock);

    //Load the selected widget in the RadDock control
    dock.Tag = DroptDownWidget.SelectedValue;
    LoadWidget(dock);

    Control widget = dock.ContentContainer.Controls[0];
    Control panelScript = widget.FindControl("Panel1");
    if (panelScript != null)
    {
        var script = string.Format("eval(document.getElementById('{0}').getElementsByTagName(\"script\")[0].innerHTML);", panelScript.ClientID);
        ScriptManager.RegisterStartupScript(this, this.Page.GetType(), "key1", script, true);
    }
}

What it does is, it gets the ClientID of the panel, and registers a script that searches the panel's HTML element on the client (using the ClientID), and evaluates the script tag.

The script in the user control should look like the following:

<asp:Panel ID="Panel1" runat="server">
    <script type="text/javascript">
        alert("alert message");
    </script>
</asp:Panel>

Greetings,
Pero
the Telerik team

[Imran]

Pero

Thanks for that. That worked great.