Multiple UserControl in one page with the same javascript file usage

Hello could anyone provide any example, which show functionality with multiple user controls and javascript? Because I try to find solution with google and in other forum but without success.

So my user control looks like this:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Bar.ascx.cs" Inherits="Portal.Web.Widgets.Bar" %>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="Widgets/Widget.js" type="text/javascript"></script>
        

<dx:ASPxDockPanel ID="BarPanel" ClientIDMode="Static"  runat="server" DragElement="Window" ShowHeader="false"
    ShowShadow="false" Border-BorderWidth="0" ClientInstanceName="dpBar" AllowedDockState="DockedOnly">
        <ContentCollection>
            <dx:PopupControlContentControl id="pcBar"  runat="server" SupportsDisabledAttribute="True">
                <div id="dockPanelContent" style="width: 100%; height: 100%">
                        <dx:WebChartControl ID="chartControl" ClientIDMode="Static"  runat="server" ClientInstanceName="chartControl"
                                                             önCustomCallback="chartControl_CustomCallback" ClientSideEvents-EndCallback="chartControl_EndCallback">
                        </dx:WebChartControl>
                        <dx:ASPxButton ID="checkButton"  runat="server" ClientIDMode="static" ClientInstanceName="checkButton">
                        
                        </dx:ASPxButton>
                 </div>
            </dx:PopupControlContentControl>
        </ContentCollection>
    <ClientSideEvents AfterResizing="dockPanel_AfterResizing"/>
</dx:ASPxDockPanel>

And Widget.js javascript code in external file like this:

var waiting = false;
var callback = false;
var newWidth;
var newHeight = 0;
function dockPanel_AfterResizing(s,e) {
 
    if (s.IsDocked()) {
        newWidth = dockPanelContent.clientWidth;
        newHeight = dockPanelContent.clientHeight;
    }
    else {
        newWidth = dockPanelContent.clientWidth - 10;
        var height = dockPanelContent.parentNode.parentNode.clientHeight;
        var divContent = dockPanelContent.parentNode;
        newHeight = height - parseInt($(divContent).css("padding-top")) - parseInt($(divContent).css("padding-bottom")) - 10;
    }
    chartControl.SetWidth(newWidth);
    chartControl.SetHeight(newHeight);

    if (!waiting) {
        waiting = true;
        dockPanel = s;
        setTimeout("TimeoutedCallback()", 1000);
    }
}

function TimeoutedCallback() {
    chartControl.PerformCallback(newWidth + "|" + newHeight);
}

function chartControl_EndCallback(s, e) {
    waiting = false;
}

On my page i put multiple user control instances
web.config

<controls>
                               <add src="~/Widgets/Bar.ascx" tagName="Bar" tagPrefix="widget" />
                               <add src="~/Widgets/Gantt.ascx" tagName="Gantt" tagPrefix="widget" />

default.aspx

<div id="UC1">
            <widget:Bar ID="BarWidget"  runat="server" OwnerZoneID="ASPxDockZone1" ClientInstanceName="bar" ClientIDMode="static" />
<div id="UC1"></div>
            <widget:Gantt ID="GanttWidget"  runat="server" OwnerZoneID="ASPxDockZone2" ClientInstanceName="gantt" ClientIDMode="static" />
       </div>

and try to run functions but no vain. Each user control's overridden by last usercontrol.
Please could you help me. Thanks in advance.

Tags: Javascript, ASP.NET, User Controls, DockPanel, DevExpress