Showing posts with label write. Show all posts
Showing posts with label write. Show all posts

Monday, March 26, 2012

How do I consume a JavaScript object on the main page in an ASCX control?

Hello,

I am using the ASP.Net AJAX client side libraries, and I want to be able to write Web User Controls (ASCX) that I dynamically load into my site. I want to be able to have a global object in my main page that is used by each ASCX control that is loaded into the page. As soon as the ASCX control is loaded, I want it run its script to call a method in the global object.

I am having a "timing problem" with my code. In order to use the ASP.Net AJAX libraries (like the "Type" object to register namespaces, etc.), I have placed the JavaScript on the main page in the "pageLoad" function.

Right now I am using the "setTimeout" function in my ASCX script to delay it a few seconds so I can be sure that the script in the main page has completely loaded before I make a call to the global object.

Is there any way that I can ensure that the script on the main page has loaded and stop using the "setTimeout" method in my ASCX script?

Here is the markup for my main page…

1<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="StartupScriptTest._Default" %>23<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>45<%@dotnet.itags.org. Register src="WebUserControl1.ascx" tagname="WebUserControl1" tagprefix="uc1" %>67<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">89<html xmlns="http://www.w3.org/1999/xhtml" >10<head runat="server">11 <title>Untitled Page</title>12 <script type="text/javascript">1314 var x = null; // <- I want to access this in the ascx control after pageLoad is finished1516 function pageLoad()17 {18 Type.registerNamespace('MyNamespace');1920 MyNamespace.MyClass = function()21 {22 MyNamespace.MyClass.initializeBase(this);23 }2425 MyNamespace.MyClass.prototype =26 {27 sayHello : function(message)28 {29 alert(message);30 }31 }3233 MyNamespace.MyClass.registerClass("MyNamespace.MyClass");3435 x = new MyNamespace.MyClass();36 }3738</head>39<body>40 <form id="form1" runat="server">41 <div42"ToolkitScriptManager1" runat="server">43 </cc1:ToolkitScriptManager>44 </div>45 <uc1:WebUserControl1 ID="WebUserControl11" runat="server" />46 </form>47</body>48</html>49

…and here is the markup for my ASCX control…

1<%@dotnet.itags.org. Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="StartupScriptTest.WebUserControl1" %>2<script type="text/javascript">34 setTimeout('x.sayHello("hello")', 1000); // <- Any way to not use 'setTimeout'?56<> 

Thank you for your help,

Dave

hello.

i'll just enumerate the things i think that are important:

1. do you need to define the class in the load event? I think that you can put it outside, in an external file and load it so that it's available at the begining of the page

2. are you wrapping any html control or behavior that exists on the page? if not, then i think that you can also insert your x = new class() at the begining of the class declaration.


Hi restating what Luis has said, you gotto implement something like this.,

Create a .js file consider sample.js.

Put this code inside

Type.registerNamespace('MyNamespace');

MyNamespace.MyClass = function() { MyNamespace.MyClass.initializeBase(this); } MyNamespace.MyClass.prototype = { sayHello : function(message) { alert(message); } } if ( typeof (Sys) !== 'undefined' ) Sys.Application.notifyScriptLoaded();

register this sample.js in the scriptmanager.


<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Scripts>
<asp:ScriptReference Path="../../client_scripts/sample.js" />
</Scripts>
</asp:ScriptManager>

Then create the global variable inside your function. var x = new MyNamespace.MyClass();

How do I collapse Collapsible Panel

I'm trying to write SlideMenu very similar to the way that the SlideMenu onwww.obout.com works using the Atlas Collapsible panel extender.

Is there a way that I can programatically collapse the panel. basically if i have 5 panels controls collapsible if one if opened i want the other four to close. Can anyone tell me how i can do this in code behind or client side.

The newest release of the toolkit contains an Accordian control (sorry we don't have a sample page posted yet) that does exactly what you're looking for. Check it out by downloading from:

http://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=AtlasControlToolkit


Cheers, I realised I was being a bit of a muppet about 30 seconds after I posted this question.When I found the property sheet in intellisense. Unfortunately I didnt read your post until id finished writing my server control. But the Accordian was Exactly what I was looking for thanks. :-)

Now for my next task write and AVL Tree For the AutoCompleteExtender.