views:

1887

answers:

10

I just posted one question and got it answered very quickly, thank you.

I have a new problem, being I have a asp label which gets text dynamically set on it during instanation and then I have a onmousedown function tied to it call a javascript function to enable a table area that sitting below that is display - none by default. It all works fine until I put two of these user controls on a page. They both have the specificed label text correct but the javascript enable seems to set the display style attribute of the first usercontrol's table to block instead of the one that is sitting below the label that was clicked. I am sure this is because the script is running on the client side (which I really would like to keep) and all the user controls have the same id name (since they are all instaniations of the same user control) so the javascript to set the style display attribute just gets the first table. I can't seem to think of a good way to either dynamically name the table on instationation so i can specify this "uniquie" id name to the javascript or any other way to do this work.

the user control asp code is below:

function enableDivArea(objName) {
    document.getElementById(objName).style.display = "block";
}
function disableDivArea(objName) {
    document.getElementById(objName).style.display = "none";
    document.forms[0].submit();
}<asp:Label style="cursor:pointer;color:#EA9156;font-family:Arial,Helvetica,sans-serif;font-weight:bold;" ID="m_emailAddressLabel" onmousedown="enableDivArea('EmailFormDivArea');" runat="server" Text="[email protected]"></asp:Label>
<table id="EmailFormDivArea" style="display:none; border-style: outset; border-width: thin">
    <tr>
        <td>To: <asp:Label ID="m_sendEmailToLabel" runat="server" Text=""></asp:Label></td>
        <td align="right"><asp:Label onmousedown="disableDivArea('EmailFormDivArea');" id="m_closeLabel" runat="server" Text="close"></asp:Label></td>
    </tr>
    <tr>
        <td><asp:Label ID="m_fromLabel" runat="server" Text="First Name:" Visible="True"></asp:Label></td>
        <td><asp:TextBox ID="m_firstNameBox" runat="server" Visible="True"></asp:TextBox></td>
    </tr>
    <tr>
        <td><asp:Label ID="Label1" runat="server" Text="Last Name:" Visible="True"></asp:Label></td>
        <td><asp:TextBox ID="m_lastNameBox" runat="server" Visible="True"></asp:TextBox></td>
    </tr>
    <tr>
        <td><asp:Label ID="Label2" runat="server" Text="E-mail:" Visible="True"></asp:Label></td>
        <td><asp:TextBox ID="m_emailBox" runat="server" Visible="True"></asp:TextBox></td>
    </tr>
    <tr>
        <td><asp:Label ID="Label3" runat="server" Text="Phone number:" Visible="True"></asp:Label></td>
        <td><asp:TextBox ID="m_phoneNumberBox" runat="server" Visible="True"></asp:TextBox></td>
    </tr>
    <tr>
        <td><asp:Label ID="Label4" runat="server" Text="Message:" Visible="True"></asp:Label></td>
        <td><asp:TextBox ID="m_messageBox" runat="server" Visible="True" Rows="6" TextMode="MultiLine"></asp:TextBox></td>
    </tr>
    <tr>
        <td colspan="2" align="center"><asp:Button ID="m_sendMessageButton" runat="server" Text="Send Message" 
                        onclick="m_sendMessageButton_Click" /></td>
    </tr>
    <tr>
        <td colspan="2" align="center"><asp:Label runat="server" ID="m_statusLabel" Text="" Visible="true"></asp:Label></td>
    </tr>
</table>

and the code behind looks like this:

protected void Page_Load(object sender, EventArgs e)
{
    m_emailAddressLabel.Text = this.Parameter;
    m_sendEmailToLabel.Text = this.Parameter;

}
A: 

Just a quick idea, do the tables both have the same ID? so the script only picks the first it finds?

make the ID unique!

use a asp:table and then

onmousedown="enableDivArea('<%=tableName.ClientID%>');"
Henk
A: 

How do I make the ID unique when it is one usercontrol? I can't seem to access this table from the code-behind because it is not marked as runat server. If I make the table a runat server then the java script gets upset because it can't see the control anymore.

A: 

oh, your code example did't show up at first for some reason. sorry, let me play with that idea.

thank you

Thats because I edited it after my first remark :)
Henk
+1  A: 

Have the table runat server, and let the user control implement INamingContainer. Construct the ID for the table, and set it programmatically (HtmlTable) in an overridden CreateChildControls, to for instance string.Concat(ID, "table").

EDIT: You also need dynamic ID references in the javascript. You could use some <asp:PlaceHolder>'s for this, and then set this from code-behind in CreateChildControls, but maybe it is just easier to move these small scripts inline, and emit scripts from code-behind, setting client attributes on the asp:Label

baretta
Ehy use a placeholder?If you want to emit parse the script from the server why not use Page.Clientscript.RegsiterClientScript(...)
Henk
I meant to use PlaceHolder for the client ID, only. But as far as generating the entire script from code-behind, and keeping functions rather than implement inline script, yes you are right.
baretta
A: 

I can't specify a style to an asp table and I can't access the objects visible or enable property from the client side java script. Am I doing something wrong?

A: 

First of all you can set the CssClass property for the style.

for hidding: document.getElementById(theIdOfYourTable).style.display = 'none';

enabled goes the same

Henk
A: 

After making the table runat server, the rendered html has a unique id set to the table (cool) but I can't get the

onmousedown="enableDivArea('<%=tableName.ClientID%>');"

to fill in the unique id, it just renders that as it is typed and not replacing the tableName.ClientID with the unique table id.

Any thoughts or full examples? Don't I have to send that variable to the asp page via the viewdata or something?

A: 

oops, I'm sorry, forgot that you can't use <%%> in a server tag (and doing this out of my head). Better for you would be to call the script like this:

onmousedown="enableDivArea(this);"

In your script you don't have to do document.getElementById anymore, since you get the element as a param already now.

Henk
A: 

I am totally confused. this doesn't work and renders it just as the code line but how would this make sense, I want to enable disable an object (table) in the user control not the whole page or instance.

i also can't put the

<%= EmailFormDivArea.ClientID %>

in the script area because that makes it upset. This seems so easy and I just can't get it.

document.getElementById('<%= EmailFormDivArea.ClientID %>'); should just work.
Henk
A: 

I will keep that mind on the last reponse by Henk.

I acutally "cheated" in a new way with the help of your guys information. I dynamically added an attribute to the label that I wanted the javascript to run from the onmousedown from the Page_Load event and formatted the string how I wanted. Here is the line, it works fantastically (at least what I was looking for).

m_emailAddressLabel.Attributes.Add("onmousedown", "enableDivArea('" + EmailFormDivArea.ClientID + "');");

Thanks for all your help.