Question

I thought my question was answered over here at

How to use JQuery with Master Pages?

but after trying the things suggested there, my code is still not working. I’m trying to get a checkbox control to toggle a hidden div below. Here’s the code in my external .js file;

  $(document).ready(function() {
             alert("hello world");
         });//works

        $('[id$=parking]').click(function() {
        $('#parktype').slideToggle('slow');//doesn't work
        });

and here is the code in my .aspx file

<td class="vanilla">
            <div id="park"></div><asp:CheckBox ID="parking" runat="server" /></div>
          </td>
         </tr>
        </table>
        </div>


        <div id="parktype" style="display:none;width:540px;padding:20px;margin:auto;">
        <table width="75%" border="0" cellpadding="5" cellspacing="0">
         <tr>

Last but not least I have linked my masterpage to the jQuery library;

 <script src="../jquery-1.4.4.min.js" type="text/javascript"></script>

As far as I can tell, the slideToggle function is not being triggered, and I suspect this is because of the difficulty in grabbing the name of a control in asp.net.

I’ve tried changing this:

 $('[id$=parking]').click(function() {

to many variations, including

 $('[id$=_parking]').click(function() {

 $('[id$="_parking"]').click(function() {

 $('[id$=ctl00_body_parking]').click(function() {

with the last variation being the ID given in the processed file;

 <td class="vanilla">
            <div id="park"></div><input id="ctl00_body_parking" type="checkbox" name="ctl00$body$parking" /></div>
          </td>

Not quite sure what I’m missing but thankful for any helpful hints, or whacks over the head indicating I’m just missing something really obvious…

Again, the goal is to have the div #parktype slideToggle when the asp.net control parking is clicked.
Merci!

Answer 1

Because your .js is external the document ready will not fire.
I’m a little rusty on my asp.net controls but i think you can set your OnClientClick Event to

<asp:CheckBox ID="parking" runat="server" OnClientClick="$('#parktype').slideToggle('slow');" />

or
you can set the OnClientClick to a function which passes in the checkbox itself

<asp:CheckBox ID="parking" runat="server" OnClientClick="toggleParkType(this);" />

Here’s a sample of the function

function toggleParkType(chkbox){
    $(chkbox).slideToggle();
    //   test if checked
    if($(chkbx).is(":checked")){
     // perform action for checked
    }
}