With javascript, get label text in div wrapped in LinkButton in datalist?

Question

I have a Panel with a ModalPopupExtender that displays a data-bound DataList . The aspx markup looks like the following.

Essentially, the user clicks on ButtonOpenPopup and the Panel with the datalist is displayed. The user then clicks on a datalist item, which represents a RoomNUm .

As you can see, there's also a TextBox called TextBoxNewRoomNum . The purpose of this TextBox is to display the RoomNum that was clicked on in the DataList .

The issue is that this needs to be done without the webform doing any postback . I've tried different function calls with OnClientClick , but nothing's worked. Most often than not, the panel disappears with the click.

My question is: How can I transfer the value of RoomNum of the clicked datalist item into the TextBox TextBoxNewRoomNum? I prefer no jquery.

Any help is appreciated. Thanks.

<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server"></ajax:ToolkitScriptManager>
<ajax:ModalPopupExtender ID="ModalPopupExtenderRoom" runat="server" PopupControlID="PanelRoomDetail" 
TargetControlID="btnDummy">
</ajax:ModalPopupExtender>
<asp:Button ID="ButtonOpenPopup" runat="server" Text="PopUp" onclick="ButtonOpenPopup_Click"  />

<asp:Button ID="btnDummy" runat="server" Text="PopUp" style = "display:none" />

<asp:Panel ID="PanelRoomDetail" runat="server" style="width:600px; height: 600px;display:none">
    <div>
        <asp:DataList ID="DataListFloorThumb" runat="server" RepeatColumns="5" >
            <ItemTemplate>
                <div >
                <asp:LinkButton id="LinkButton1" runat="server" OnClientClick='return ShowRoom(<%# Eval("RoomNum")%>);'>
                    <div style='width:72px;height:72px; background-image:url(<%# Eval("image_path_thumbnail","Styles/Images/{0}") %>)'>
                        <div>
                            <div>
                                <asp:Label ID="Label1" CommandName="cmd_RoomNum" CommandArgument='<%# Eval("RoomNum")%>' 
                                runat="server" Text='<%# Eval("RoomNum")%>' ></asp:Label>
                            </div>
                        </div>
                    </div>
                </asp:LinkButton>
            </ItemTemplate>
        </asp:DataList>
    </div>
    <div>
        <div style="float: left; width: 200px;">
            <asp:TextBox ID="TextBoxNewRoomNum" runat="server"></asp:TextBox>
        </div>
    </div>
</asp:Panel>    

Answer 1

You probably need to add return false; to your ShowRoom() JavaScript method. That will stop the postback.

The LinkButton has the runat="server" attribute which will cause it to initiate a postback every time it's clicked. That's probably the reason the panel disappears.

EDIT:
Per your comments, I'm pretty sure that using <%# Eval("RoomNum")%> for the ShowRoom() method's parameter is causing the problem.

When I have done similar things I've used the this keyword for the parameter's value. eg OnClientClick='return ShowRoom(this);' Then in the ShowRoom() method use that parameter with jQuery to navigate to the span element that holds the room number.

function ShowRoom(linkButton) {
   var span = $(linkButton).Find(span)[0];
   alert(span.innerHTML);

   return false;
}