0

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!

Community
  • 1
  • 1
mountaingirl
  • 248
  • 2
  • 10
  • will your code fire an alert with the selector you have added? Also - you seem to have too many cloding div tags in you markup - not sure if this will interfere, but better to get rid of them. Finally you want to put the text your trying to match in quotes = $('[id$="parking"]').click(function() { – Stuart Burrows Dec 16 '10 at 19:15

3 Answers3

0

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
    }
}
RhinoDevX64
  • 687
  • 1
  • 5
  • 13
0

try this:

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

  $('[id$="parking"]').click(function() {
    $('#parktype').slideToggle('slow');
  });
});

Additionally you should review the comment I left on your question about the div tags

Stuart Burrows
  • 10,824
  • 2
  • 34
  • 33
0

Try to use change function.

     $(document).ready(function() {         
       $('[id$=parking]').change(function() {
              $('#parktype').slideToggle('slow');
        });
    });
Sherwin
  • 377
  • 1
  • 6
  • 23