Need help executing a javascript event and server-side event

tperri · Dec 26, 2006

I need some help executing a javascript event and server-side event when a link button is pressed.....

Or better yet, let me describe my scenario and maybe you can help me with a better solution.

I have a DataGridView that lists out types of hotel rooms and descriptions. I have some javascript that hides and shows the descriptions when the name of the room is clicked. This is working fine. Simulataneously, I need to have an Image control's ImageURL and a descriptor label change when the room name is clicked to correspond with the type of room.

Here is my aspx code

Code:

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head runat="server">
    <title>Untitled Page</title>
	<style type=text/css >
		tr.displaynone { display:none; }
		tr.displayblock { display: block-inline; }
	</style>    
	<script language="javascript">
		// -->
		var iClickCount;
		iClickCount=1
		function changeElementStyleOn(elementName, styleName) 
		{			
			if (document.getElementById(elementName).className == "displayblock") {
				
				document.getElementById(elementName).className = "displaynone";
			} else {
				iClickCount=iClickCount + 1;
				document.getElementById(elementName).className = "displayblock";
			} 
			
		}
	
	</script>    
</head>
<body>
    <form id="form1" runat="server">

        <table width="559" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td>
                    <asp:GridView ID="grdHotelRoomTypes" runat="server" AutoGenerateColumns="False" Width="280px" ShowHeader="False" GridLines="none" OnRowDataBound="grdDataBound">
                        <Columns>
                            <asp:TemplateField>
                                <ItemTemplate>
                                    <table border="0">
                                        <tr>
                                            <td>
                                                <asp:LinkButton ID="link" runat="server"></asp:LinkButton>
                                                <a href="#" onClick="changeElementStyleOn('<%# DataBinder.Eval(Container.DataItem, "id")%>','displaynone')"><%# DataBinder.Eval(Container.DataItem, "Name")%></a>
                                                <br />
                                                <%# displayInitalPhotoAndFeatures(Convert.ToString(DataBinder.Eval(Container.DataItem, "id")), Convert.ToString(DataBinder.Eval(Container.DataItem, "smallPhoto")))%>
                                                <table border="0">
                                                    <tr class="displaynone" id='<%# DataBinder.Eval(Container.DataItem, "id")%>'>
                                                        <td>
                                                            <table border="0" width="280" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td><%# DataBinder.Eval(Container.DataItem, "Description")%></td>
                                                                </tr>
                                                                <tr>
                                                                    <td align="center" bgcolor="#e5e5e5">
                                                                        <br />
                                                                        Jan 21 - Jan 29  |  Average Rate $82
                                                                        <br />
                                                                        <a href="#">book now!</a>
                                                                        <br />
                                                                    </td>
                                                                </tr>                                                                 
                                                            </table>                                                        
                                                        </td>
                                                    </tr>                                                   
                                                </table>
                                            </td>
                                        </tr>
                                    </table>                                    
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>                    
                    </asp:GridView>
                </td>                
                <td valign="top" style="width: 279px">
                    <asp:Image ID="imgRoom" runat="server" />
                    <br />
                    <asp:Label ID="lblFeatures" runat="server"></asp:Label>
                </td>            
            </tr>        
        </table>
    </form>
</body>
</html>

So when the link created with the line <a href="#" onClick="changeElementStyleOn('<%# DataBinder.Eval(Container.DataItem, "id")%>','displaynone')"><%# DataBinder.Eval(Container.DataItem, "Name")%></a> is clicked, I need to perform two events as I described above. If I use JS, I'll have no post back, which would be preferable, but javascript isn't my forte as I haven't used it much in a long time. But I'm open to a solution using CS code, too. Just need to get it working

Your help is much appreciated

Tarwn · Dec 27, 2006

Please keep in mind I haven't finished my first cup of coffee yet:

You can have multiple functions fired from a single event fairly easily:
onClick="doMyFunc1(); doMyFunc2();"

So if you were to create a second function that accepts two inputs you could write the image path and feature string to that function and it would be fairly easy to output that to the two appropriate elements on your page.

So something like:

Code:

<a href="#" onClick="changeElementStyleOn('<%# DataBinder.Eval(Container.DataItem, "id")%>','displaynone'); changeDescription(this,'<%# DataBinder.Eval(Container.DataItem, "smallPhoto")) %>','<%# DataBinder.Eval(Container.DataItem, "Description")) %>')"><%# DataBinder.Eval(Container.DataItem, "Name")%></a>

[i]with JS that looks like[/i]
function changeDescription(origElem, strImage, strDesc){
   'if the clicked item is currently being displayed
   if(origElem.className == 'displayblock'){
      'show the image and description
      document.getElementById("imgRoom").src = "relativePathToImages/" + strImage;
      document.getElementById("lblFeatures").innerHTML = strDesc;
   }
}

Two important pieces I left out:
First, your going to want to do a replace on the description before outputting it into the javascript function to replace single quotes with backslash single quote to escape it.
Second, dangit, I forgot number two

I need more coffee...

Let us know if this helps,
-T

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Need help executing a javascript event and server-side event

tperri

Programmer

Tarwn

Programmer

Similar threads

Part and Inventory Search

Sponsor