locked
Java Script to fire on a User Control RRS feed

  • Question

  • User-1188570427 posted

    I have a number of user controls on an .aspx page. Where do I put the java script to work on a specific user control?

    I tried to put it on the .aspx page, but the document ready function fires, but when I click the checkbox control, nothing happens with the table row I am trying to change. 

        <script type="text/javascript">
            $(document).ready(function () {
                $('#cbEnableChangeOfAlreadyScheduledGameStartLocalTime').change(function () {
                    if (!this.checked) 
                        $('#tblRowChangeHomeAlreadyScheduledGameLocalStartTime').fadeIn('slow');
                    else 
                        $('#tblRowChangeHomeAlreadyScheduledGameLocalStartTime').fadeOut('slow');
                });
                alert('loaded');
            });
        </script>
        <asp:TableRow ID="tblRowChangeHomeAlreadyScheduledGameLocalStartTime" Visible="false">
            <asp:TableCell HorizontalAlign="Right" VerticalAlign="Middle" Width="25%">
                <asp:Label runat="server" ID="lblHomeTeamAlreadyScheduledLocalStartTimeTitle" CssClass="ItemTitleCss" Text="Select Home Team Local Start Time:"></asp:Label>
            </asp:TableCell>
            <asp:TableCell HorizontalAlign="Left" VerticalAlign="Middle" Width="50%">
                <telerik:RadTextBox runat="server" ID="txtHomeTeamAlreadyScheduledForTeamValue" CssClass="ItemTitleCss" Width="75px"  ReadOnly="true"></telerik:RadTextBox>
                &nbsp;&nbsp;
                <telerik:RadTimePicker runat="server" ID="rtpHomeTeamAlreadyScheduledLocalStartTimeValue" Enabled="false"></telerik:RadTimePicker>
                &nbsp;&nbsp;
                <asp:Label runat="server" ID="lblHomeTeamAlreadyScheduledTimeZoneTitle" CssClass="ItemTitleCss" Text="Home Team Time Zone: "></asp:Label>
                &nbsp;
                <telerik:RadTextBox runat="server" ID="txtHomeTeamAlreadyScheduledTimeZoneValue" CssClass="ItemTitleCss" Width="100px"  ReadOnly="true"></telerik:RadTextBox>
            </asp:TableCell>
            <asp:TableCell HorizontalAlign="Center" VerticalAlign="Middle" Width="25%">
                <telerik:RadButton runat="server" Text="Set Home Team Already Scheduled Local Start Time" ID="btnSetHomeTeamAlreadyScheduledLocalStartTime" Enabled="false" OnClick="btnSetHomeTeamAlreadyScheduledLocalStartTime_Click"></telerik:RadButton>
            </asp:TableCell>
        </asp:TableRow>

    Thursday, August 9, 2018 4:05 AM

Answers

  • User475983607 posted

    tvb2727

    I have a number of user controls on an .aspx page. Where do I put the java script to work on a specific user control?

    JavaScript usually goes in the content page, a master page, or a file.

    It is important to realize JavaScript runs in browser while user control (server controls) run on the server.  The results of running a user control is HTML rendered positionally in the content page.

    tvb2727

    I tried to put it on the .aspx page, but the document ready function fires, but when I click the checkbox control, nothing happens with the table row I am trying to change. 

    The main issue is the jQuery selector is incorrect.  If you open  developer tools and view the IDs generated by Web Forms, right click and element and choose Inspect, you will see the IDs are different than the markup (designer View).  The ID naming convention reflects the position of the server control within the control tree.

    The jQuery syntax is for selecting a single control by ID in ASP WebForms is...

    $('#<%=cbEnableChangeOfAlreadyScheduledGameStartLocalTime.ClientID%>')...

    If there are multiple controls, in the case of a data bound controls, then add a CssClass to the markup.

    <asp:DropDownList id="cbEnableChangeOfAlreadyScheduledGameStartLocalTime"
    	CssClass="myStyle"
    	runat="server">

    Use the jQuery class selector to assign a click event to all the dropdowns.

    $('.myStyle').change(...

    There is not enough source code shown to guess how the final markup is formatted.  I can't provide the accurate syntax for selecting a table row.  I assume that you'll need to select a parent node of the dropdown to find the row.

    Spend some quality time learning jQuery selectors.  That will help a lot is the main programming problem you are having.

    https://api.jquery.com/category/selectors/

    Also, take some time to use the browser's developer tools and view the resulting HTML markup.  That will help you to figure out what jQuery selector to use.

    Anyway, give it another try with this new knowledge.  Post all the relevant code if you are still having issues.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 9, 2018 11:20 AM

All replies

  • User475983607 posted

    tvb2727

    I have a number of user controls on an .aspx page. Where do I put the java script to work on a specific user control?

    JavaScript usually goes in the content page, a master page, or a file.

    It is important to realize JavaScript runs in browser while user control (server controls) run on the server.  The results of running a user control is HTML rendered positionally in the content page.

    tvb2727

    I tried to put it on the .aspx page, but the document ready function fires, but when I click the checkbox control, nothing happens with the table row I am trying to change. 

    The main issue is the jQuery selector is incorrect.  If you open  developer tools and view the IDs generated by Web Forms, right click and element and choose Inspect, you will see the IDs are different than the markup (designer View).  The ID naming convention reflects the position of the server control within the control tree.

    The jQuery syntax is for selecting a single control by ID in ASP WebForms is...

    $('#<%=cbEnableChangeOfAlreadyScheduledGameStartLocalTime.ClientID%>')...

    If there are multiple controls, in the case of a data bound controls, then add a CssClass to the markup.

    <asp:DropDownList id="cbEnableChangeOfAlreadyScheduledGameStartLocalTime"
    	CssClass="myStyle"
    	runat="server">

    Use the jQuery class selector to assign a click event to all the dropdowns.

    $('.myStyle').change(...

    There is not enough source code shown to guess how the final markup is formatted.  I can't provide the accurate syntax for selecting a table row.  I assume that you'll need to select a parent node of the dropdown to find the row.

    Spend some quality time learning jQuery selectors.  That will help a lot is the main programming problem you are having.

    https://api.jquery.com/category/selectors/

    Also, take some time to use the browser's developer tools and view the resulting HTML markup.  That will help you to figure out what jQuery selector to use.

    Anyway, give it another try with this new knowledge.  Post all the relevant code if you are still having issues.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 9, 2018 11:20 AM
  • User-1188570427 posted

    mgebhard:

    All of your comments helped out.

    In the end, I do not think the table was in the DOM yet, so that is why it was not working.

    I have worked around it and have it working now. Thank you.

    Friday, August 10, 2018 12:21 PM