How to control usercontrol from javascript

Question

I have an usercontrol with an attribute targetUrl. I add this user control to a page and write targetUrl attribute from this page like below:

<PBG:Modal ID="Modal1"
           runat="server"
           Height="180"
           Width="500"
           src="pop_adres_giris.aspx"/>

This worked properly, but I want to change the targetUrl attribute from javascript. And I can't do it. I write code like below, but it didn't work.

var frm = document.getElementById('Modal1');            
frm.targetUrl = 'pop_adres_giris.aspx';

How can I do it?

Answer 1

The UserControl object, which generates HTML on the client side, are not accessible as the rich objects which are available when handling server side calls.

Depending what the UserControl is, you will need to use a different method to get it and set the "targetUrl".

In addition, to ease your accessing of elements within the DOM you may want to consider using a library such as jQuery or prototype

Once you have declared your control, for instance, if you were using an asp:Hyperlink control:

<div id="hyperlink_holder">
  <asp:Hyperlink ... NavigateUrl="http://someurl" />
</div>

You know that asp:Hyperlink generates html like <a href="http://someurl" ... />

So we can access the element and change the link like:

$('#hyperlink_holder a').attr("href", "http://newurl");

In addition, note that the ID you give an item in ASP.NET is not necessarily the ID which will render in the id element in the HTML; it is instead a concatenation of a number of ids; therefore use selectors based on non runat="server" controls where possible, or pass the ClientID of the UserControl through to the client to use for selection if absolutely necessary.