Results 1 to 14 of 14

Thread: How to get code-behind to react based on javascript?

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    How to get code-behind to react based on javascript?

    I have a simple form where I click on a Label controls that is contained within an <a> element. There are actually two Label controls that when clicked on, they just show or hide two different <div> elements. What I'm trying to do is also attach that click to a code-behind event and just don't know how to do that. I thought of making the <a> an ASP Control but there is no such control. I need a code-behind event to fire when one of these Labels are clicked on.

    Thanks,
    Blake

  2. #2
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: How to get code-behind to react based on javascript?

    You should show some markup.

    Do you have RUNATSERVER set for that element?

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  3. #3
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: How to get code-behind to react based on javascript?

    Each control that is going to have backend code needs runat="server"

    Code:
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="showimage.aspx.vb" Inherits="showimage" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Show Student Pictures</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <table>
            <asp:Repeater ID="repeater1" runat="server">
                <ItemTemplate>
                    <tr>
                        <td class="imagesize">
                            <asp:Image ID="imgStudent1" runat="server" /><!--Height="240px" Width="192px" />-->
                        </td>
                        <td class="imagesize">
                            <asp:Image ID="imgStudent2" runat="server" /><!--Height="240px" Width="192px" />-->
                        </td>
                        <td class="imagesize">
                            <asp:Image ID="imgStudent3" runat="server" /><!--Height="240px" Width="192px" />-->
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:HyperLink ID="lnkStudent1" runat="server" Width="192px" Height="50px" Target="_new">HyperLink</asp:HyperLink>
                        </td>
                        <td>
                            <asp:HyperLink ID="lnkStudent2" runat="server" Width="192px" Height="50px" Target="_new">HyperLink</asp:HyperLink>
                        </td>
                        <td>
                            <asp:HyperLink ID="lnkStudent3" runat="server" Width="192px" Height="50px" Target="_new">HyperLink</asp:HyperLink>
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:Repeater> 
            </table>   
        </div>
        </form>
    </body>
    </html>

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  4. #4

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: How to get code-behind to react based on javascript?

    Here is the HTML for the elements in question.

    Code:
    <body>
        <script type="text/javascript">
            window.addEventListener('load',
                function () {
                    var x = document.getElementById("divVideos");
                    x.style.display = "none";
    
                    document.getElementById("VidImg").Value = "I";
                });
        </script> 
    
        <script type="text/javascript">
            function ImageOrVideo(obj)
            {
                if (obj == "imageLink") {
                    document.getElementById("VidImg").Value = "I";
                    document.getElementById("divVideos").style.display = "none";
                    document.getElementById("divImages").style.display = "block";
                }
                else {
                    document.getElementById("VidImg").Value = "V";
                    document.getElementById("divImages").style.display = "none";
                    document.getElementById("divVideos").style.display = "block";
                }
    
                alert(obj);
            }
        </script>
    
        <div class="divHeader">
            <table style="width: 100%; vertical-align: top;" border="0">
                <tr>
                    <td id="whatsnew">What's new with Blake</td>
                    <td style="width: 50%; text-align: right;"><label id="lblLoggedUser" runat="server"></label></td>
                </tr>
            </table>
        </div>
    
        <div class="menu">
            <a id="imageLink" onclick="ImageOrVideo(id)"><asp:Label ID="lblImage" runat="server" class="menuItems">Images</asp:Label></a>
            <a id="videoLink" onclick="ImageOrVideo(id)"><asp:Label ID="lblVideo" runat="server" class="menuItems">Videos</asp:Label></a>
        </div>
    
    The highlighted <div> contains the Label controls. Even though they are contained within <a> tags, using the C# code-behind, how can I tell when one of the Labels are clicked on?

    Thanks,
    Blake

  5. #5
    Superbly Moderated NeedSomeAnswers's Avatar
    Join Date
    Jun 2002
    Location
    Manchester uk
    Posts
    2,660

    Re: How to get code-behind to react based on javascript?

    If you want your label to have a click event in the code behind you need to create one for it.

    If you start typing OnClick inside you label tag the intellisense should come up, and when you select it it will say - tab to create the handler (or something similar), do that and it will create your click event in the code behind for you.
    Please Mark your Thread "Resolved", if the query is solved & Rate those who have helped you



  6. #6

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: How to get code-behind to react based on javascript?

    Well, I tried that and it worked to a point. However, there was no OnClick event in the intellisense. See Image.
    Attached Images Attached Images  
    Last edited by blakemckenna; Jun 22nd, 2018 at 11:36 AM.
    Blake

  7. #7
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: How to get code-behind to react based on javascript?

    <a> elements are supposed to have HREF's.

    Are you sure you can use them as you are trying?

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  8. #8

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: How to get code-behind to react based on javascript?

    Should the "href" contain the event name?
    Blake

  9. #9
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: How to get code-behind to react based on javascript?

    Have you tried a label outside the <a> element? Can you get OnClick to appear in your CategoryLabel?

    Been a long time since I've done asp.net - sorry for being so little help!

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  10. #10

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: How to get code-behind to react based on javascript?

    Yes, I actually removed the <a> element so the Label controls were stand-alone and there still was no OnClick Event in the intellisense.

    And no worries...I understand not using technologies for a long time.
    Blake

  11. #11
    MS SQL Powerposter szlamany's Avatar
    Join Date
    Mar 2004
    Location
    Connecticut
    Posts
    18,263

    Re: How to get code-behind to react based on javascript?

    Why is that DIV outside your FORM??

    *** Read the sticky in the DB forum about how to get your question answered quickly!! ***

    Please remember to rate posts! Rate any post you find helpful - even in old threads! Use the link to the left - "Rate this Post".

    Some Informative Links:
    [ SQL Rules to Live By ] [ Reserved SQL keywords ] [ When to use INDEX HINTS! ] [ Passing Multi-item Parameters to STORED PROCEDURES ]
    [ Solution to non-domain Windows Authentication ] [ Crazy things we do to shrink log files ] [ SQL 2005 Features ] [ Loading Pictures from DB ]

    MS MVP 2006, 2007, 2008

  12. #12

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: How to get code-behind to react based on javascript?

    I didn't realize that. Thanks for the heads up. Unfortunately, it didn't make a difference pertaining to the ASP:Label controls.
    Blake

  13. #13
    Superbly Moderated NeedSomeAnswers's Avatar
    Join Date
    Jun 2002
    Location
    Manchester uk
    Posts
    2,660

    Re: How to get code-behind to react based on javascript?

    Ah yes i just went and checked and a label doesn't have a click event which does kind of make sense really in the web, a label is just a way of displaying data.

    Maybe what you should be using is a Linkbutton control. take a look at it and see what you think !
    Please Mark your Thread "Resolved", if the query is solved & Rate those who have helped you



  14. #14

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    5,034

    Re: How to get code-behind to react based on javascript?

    LinkButton worked...thanks NeedSomeAnswers!
    Blake

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width