4 Replies - 2004 Views - Last Post: 07 February 2013 - 12:43 PM

#1 rgfirefly24  Icon User is offline

  • D.I.C Lover
  • member icon


Reputation: 260
  • View blog
  • Posts: 1,419
  • Joined: 07-April 08

jquery not working in page, but works from console

Posted 07 February 2013 - 11:29 AM

Ok I have a user control (which is nested probably 5 deep) and within the usercontrol I have the following in the ascx:

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=hoursCheckBoxList.ClientID%> input').change(function () {
            if (this.value === "C") {
                $("#customTimeDiv").fadeIn();
            }
            else {
                $("#customTimeDiv").fadeOut();
            }
        });
    });
</script>




When I load up the page and click around in the list of radio buttons the custom div does not fade in or fade out. I thought it might be that the JQuery wasn't pulling the right ID so i did a view source and this is what it shows:
<script type="text/javascript">
        $("#ctl00_ctl00_phContent_phContent_pnlControl_pnlControl_dynamicControl_phControls_phControls_dynamicControl_ucRequest_hoursCheckBoxList input").change(function () {
            if (this.value === "C") {
                $("#customTimeDiv").fadeIn();
            }
            else {
                $("#customTimeDiv").fadeOut();
            }
        });
</script>



Here is the radiobutton list source:
<table id="ctl00_ctl00_phContent_phContent_pnlControl_pnlControl_dynamicControl_phControls_phControls_dynamicControl_ucRequest_hoursCheckBoxList" name="hoursCheckBoxList" border="0">
										<tr>
											<td><input id="ctl00_ctl00_phContent_phContent_pnlControl_pnlControl_dynamicControl_phControls_phControls_dynamicControl_ucRequest_hoursCheckBoxList_0" type="radio" name="ctl00$ctl00$phContent$phContent$pnlControl$pnlControl_dynamicControl$phControls$phControls_dynamicControl$ucRequest$hoursCheckBoxList" value="F" /><label for="ctl00_ctl00_phContent_phContent_pnlControl_pnlControl_dynamicControl_phControls_phControls_dynamicControl_ucRequest_hoursCheckBoxList_0">Full Day</label></td>
										</tr><tr>
											<td><input id="ctl00_ctl00_phContent_phContent_pnlControl_pnlControl_dynamicControl_phControls_phControls_dynamicControl_ucRequest_hoursCheckBoxList_1" type="radio" name="ctl00$ctl00$phContent$phContent$pnlControl$pnlControl_dynamicControl$phControls$phControls_dynamicControl$ucRequest$hoursCheckBoxList" value="M" /><label for="ctl00_ctl00_phContent_phContent_pnlControl_pnlControl_dynamicControl_phControls_phControls_dynamicControl_ucRequest_hoursCheckBoxList_1">Half Day - Morning</label></td>
										</tr><tr>
											<td><input id="ctl00_ctl00_phContent_phContent_pnlControl_pnlControl_dynamicControl_phControls_phControls_dynamicControl_ucRequest_hoursCheckBoxList_2" type="radio" name="ctl00$ctl00$phContent$phContent$pnlControl$pnlControl_dynamicControl$phControls$phControls_dynamicControl$ucRequest$hoursCheckBoxList" value="A" /><label for="ctl00_ctl00_phContent_phContent_pnlControl_pnlControl_dynamicControl_phControls_phControls_dynamicControl_ucRequest_hoursCheckBoxList_2">Half Day - Afternoon</label></td>
										</tr><tr>
											<td><input id="ctl00_ctl00_phContent_phContent_pnlControl_pnlControl_dynamicControl_phControls_phControls_dynamicControl_ucRequest_hoursCheckBoxList_3" type="radio" name="ctl00$ctl00$phContent$phContent$pnlControl$pnlControl_dynamicControl$phControls$phControls_dynamicControl$ucRequest$hoursCheckBoxList" value="C" /><label for="ctl00_ctl00_phContent_phContent_pnlControl_pnlControl_dynamicControl_phControls_phControls_dynamicControl_ucRequest_hoursCheckBoxList_3">Custom</label></td>
										</tr>
									</table>




It is pulling the correct ID, so I decided to change it to do an alert which doesn't fire either. I then took the code and in both Chrome's console and IE's console I took the javascript code and ran it from there. The radio buttons then magically started working. Alerts fired, and the custom div faded in and out. What I don't understand and can't figure out is why it would work from the console, but not from the page itself.

Is This A Good Question/Topic? 0
  • +

Replies To: jquery not working in page, but works from console

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2885
  • View blog
  • Posts: 9,573
  • Joined: 12-December 12

Re: jquery not working in page, but works from console

Posted 07 February 2013 - 11:40 AM

Does your browser's console show any error messages, and what are they?

Is the jQuery library attached? I don't know how this works in ascx, but it still needs to be attached somehow.
Was This Post Helpful? 0
  • +
  • -

#3 rgfirefly24  Icon User is offline

  • D.I.C Lover
  • member icon


Reputation: 260
  • View blog
  • Posts: 1,419
  • Joined: 07-April 08

Re: jquery not working in page, but works from console

Posted 07 February 2013 - 11:53 AM

The browser's console doesn't show any errors at all, and the JQuery libraries are attached in the parent container. We use a script.ashx file to combine all of the site wide javascript files together including JQuery. I have also verified that the script.ashx file is being loaded and the JQuery is available by putting the following into the page:

<script type="text/javascript">
    $(document).ready(function() {
        alert('Foo');
    });
</script>



the alert does fire when ever I load up the control.
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3394
  • View blog
  • Posts: 9,592
  • Joined: 08-June 10

Re: jquery not working in page, but works from console

Posted 07 February 2013 - 12:34 PM

er, afaik, radio buttons do not have a change event. because they never change their value.
Was This Post Helpful? 1
  • +
  • -

#5 rgfirefly24  Icon User is offline

  • D.I.C Lover
  • member icon


Reputation: 260
  • View blog
  • Posts: 1,419
  • Joined: 07-April 08

Re: jquery not working in page, but works from console

Posted 07 February 2013 - 12:43 PM

hrm, I change it to a .click event and it still gives me the same result. I've also tried this to no avail:
    $(document).ready(function () {
        //$('#<%=hoursCheckBoxList.ClientID%> radio').click(function () {
        //    if (this.value === "C") {
        //        $("#customTimeDiv").fadeIn();
        //    }
       //     else {
       //         $("#customTimeDiv").fadeOut();
       //     }
       // });

        $('#<%=hoursCheckBoxList.ClientID%> input[type="radio"]').each(function () {
            $(this).click(function () {
                alert((this).value);
            });
        });
    });



EDIT: Tried this too and still didn't work. It's like it's being fired before the page actually loads and so it can't find the controls.

    $(document).ready(function () {
        $('[id*=hoursCheckBoxList] input').click(function () {
            alert((this).value);
            //if (this.value === "C") {
            //    $("#customTimeDiv").fadeIn();
            //}
            //else {
            //    $("#customTimeDiv").fadeOut();
            //}
        });

        //$('[id*=hoursCheckBoxList] input[type="radio"]').each(function () {
        //    $(this).click(function () {
        //        alert((this).value);
        //    });
        //});
    });


This post has been edited by rgfirefly24: 07 February 2013 - 12:51 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1