Access UserControl Control from a JavaScript Function : The Official Microsoft ASP.NET Forums

Reply

Access UserControl Control from a JavaScript Function

Aug 16, 2005 12:22 PM|LINK

I have a requirement to launch a Modal Javascript dialog box from within my usercontrol,
I have done this by
<code>

function browseControlAction(ProjID,ControlID)

{

strPrompt = 'Select a Previous control action..';

strOptions = 'dialogWidth:25;dialogHeight:30;status:no;resizable:yes';

selectedAction = window.showModalDialog('browseControlActions.aspx?ProjID=' + ProjID + '&Control=' + ControlID, strPrompt, strOptions);

var sControl = ' + ControlID + ';

if (selectedAction != null)

{

alert(ControlID.toString());

alert(selectedAction);

var sTest = ControlID + '_txtControlAction';

alert(sTest);

var sTest2 = 'txtSummary';

alert(sTest2);

document.getElementById('txtCurrentControls').innerText=selectedAction; //this works as this a control on the page itself

document.getElementById(sTest2).innerText=selectedAction; //Ditto

document.getElementById(sTest).innerText=selectedAction; //This Fails as this is the control in the USercontrol I am trying to Access

//__doPostBack('','');

}</code>
can anybody tell me why I can't access the Textbox control on the USercontrol?

Kind Regards,
Gary Woodfine

My Website || Blog

Reply

Re: Access UserControl Control from a JavaScript Function

Aug 16, 2005 02:08 PM|LINK

I seem to have semi uncovered what my problem is , the reason Javascript cannot find my control is that the UserControl is Dynamically added to the Page This is done in the Page_Init event , I added the control in a Panel , but when I view the Page Source , the Control is not in the Panel,but when I view the Page in the Browser the Control is there and I can interact with it.

What I now need to find out is where is the USercontrol, becuase if it is not sent out to the Browser in HTML, I will not be able to interact with in Javascript!!

Kind Regards,
Gary Woodfine

My Website || Blog

Reply

sairas

Member

45 Points

9 Posts

Re: Access UserControl Control from a JavaScript Function

Aug 16, 2005 03:36 PM|LINK

I am facing the same problem.
Please let us know when you solve it

Reply

billrob458

Contributor

3329 Points

671 Posts

Re: Access UserControl Control from a JavaScript Function

Aug 16, 2005 10:06 PM|LINK

The problem is you can not access the client side name of the control. I am not really sure that the name of your control is inside the UserControl so I am pretending that txtControlAction is the name of your TextBox inside your dynamically added user control.

To get around this you must find some way to provide the client side ID of your text box. Since UserControl implements the INamingContainer interface, the ID will be prepended with the containing control's ID. This ensures uniqueness. Imagine if you have two user controls written by two different developers on a page called "txtFirstName". How would you differentiate between them?

There are several ways to accomplish this. The route I go is to register some known global javascript string variable with the client side ID of the control.

I have a helper method that will register the variable for me. This helper method can be on the UserControl or on the Page object itself. I have removed some of the checking I do to make it easier to read.

protected void RegisterClientID( string variableName, string clientID )
{
   string s = "<script language='javascript'>\n";
   s += String.Format( "var {0} = '{1}';", variableName, clientID );
   s += "\n</script>";
   Page.RegisterClientScript( variableName, s );
}

Usage:

RegisterClientID( "myCustomVariable", "uc1_txtBob" );

This will be written to the browser:

<script language='javascript'>
var myCustomVariable = 'uc1_txtBob';
</script>

Now this will mean you will have the client side ID on the client and you can access it in your function.

document.getElementById( myCustomVariable ).value = selectedAction;

You should be setting the value property since it is an input type="text" control.

You would typically register this script in the PreRender event of the UserControl.

protected override void OnPreRender( EventArgs e )
{
   RegisterClientID( "myCustomVariable", txtControlAction.ClientID );
   base.OnPreRender( e );
}

Registering the ClientID will get the client side name with all the INamingContainer stuff preprended to it.

HTH,

bill

Reply

cykophysh

Participant

783 Points

172 Posts

Re: Access UserControl Control from a JavaScript Function

Aug 17, 2005 08:49 AM|LINK

I managed to solve this , it was for me anyway it was a wierd problem, it had it all to do that when you pass a string variable to javascript i.e txtSomeControl.ClientID
it somehow appends an empty space to the begining of this string?
So all I did was write a Javascript Client Function to Trim the string, and it worked ok!!
I lost a total of 2 days dev time to this specific peculiarity,
I suppose you could trim the string before you pass it, but at the time of writing I haven't tested this

<Code>

function browseControlAction(ProjID,ControlID)

{

//alert('Hello Gary!');

strPrompt = 'Select a Previous control action..';

strOptions = 'dialogWidth:25;dialogHeight:30;status:no;resizable:yes';

selectedAction = window.showModalDialog('browseControlActions.aspx?ProjID=' + ProjID + '&Control=' + ControlID, strPrompt, strOptions);

var sControl = ' =+ ControlID + ';

if (selectedAction != null)

{

//Trim the string as an empty space my be appended to the begining which will the function not to work

var s = trimString(ControlID.toString());

document.getElementById('txtSummary').innerText=trimString(ControlID);