JSFiddle - React, Tailwind, and code Playground

by jjay225

HTML

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="Item"/>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label ID="lblPrice" runat="server" ForeColor="DimGray" CssClass="price" Text='<%# Eval( "Price") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label ID="lblCode" runat="server" ForeColor="DimGray" CssClass="code" Text='<%# Eval( "Code") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ID="lnkSelect" runat="server" ImageUrl="~/Buttons/add_to_cart.png"
                            AlternateText="Add To Cart" ImageAlign="Right" CssClass="buttontag" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    <div class="tooltipleft" id="tooltip">
    </div>
</asp:Content>

JavaScript

$("[id*=lnkSelect]").live("click", function () {

            //Get the values
            var code = $("#code").html($(".code", $(this).closest("tr")).html());
            var price = $("#price").html($(".price", $(this).closest("tr")).html());

            //Build the new HTML
            $(code).prepend("<br/>Item: ");
            $(code).append("<br/>Has been<br/>added to your cart.");
            $(code).append("<br/>Price: ");
            $(code).append(price);
            $(".tooltipleft").html(code); //Set the new HTML
            $(".tooltipleft").fadeIn("slow").fadeOut("slow"); //Show the div

            return true;
        });