jquery Syntax Help

Question

Hey all,
I am new to working with variables and am trying to get this function working. I was wondering if anyone can help me find the problem in it. It doesn't seem to be working at all. I'm not sure if I have marked everything up correctly.

<script type="text/javascript">
    $(document).ready(function() {
        $('.partners_internal_product_select input[type=radio]').live('change', function(){ //Setting up the chenge event for the radio button
            var AffectedRegistration = $(this).closest('.partners_internal_product_registration'); //Select the nearest div with this class
            var ID = $(this).attr('id'); //getting the ID of the radio button
            var IDArray = ID.split('_'); //seperating the ID into an array
            var regURL = 'accomodationpartners/'+IDArray[1]+'.php'; //building a url to load
            $(AffectedRegistration).load(regURL); //loading the url into the nearest div.partners_internal_product_registration
        });
    });

    </script>
    <div class="partners_internal_item_hdr"><h1 class="white">Program Registration</h1></div>
    <div class="partners_internal_item">
        <div class="partners_internal_item_subhdrfull"><h2>Select a Product to Register For:</h2></div>
        <div class="partners_internal_product_select">
            <fieldset><input type="radio" class="productselect" name="productselect" id="productselect_daytrip" /><label for="productselect_daytrip">Day Trip</label></fieldset>
            <fieldset><input type="radio" class="productselect" name="productselect" id="productselect_courseregistraion" /><label for="productselect_courseregistraion">Course Registration</label></fieldset>
            <fieldset><input type="radio" class="productselect" name="productselect" id="productselect_socialbusinessgroup" /><label for="productselect_socialbusinessgroup">Social/Business Group</label></fieldset>
            <fieldset><input type="radio" class="productselect" name="productselect" id="productselect_paddlefest" /><label for="productselect_paddlefest">Paddlefest</label></fieldset>
            <fieldset><input type="radio" class="productselect" name="productselect" id="productselect_paddleplay" /><label for="productselect_paddleplay">Paddle and Play</label></fieldset>
        </div>
        <div class="partners_internal_product_registration"></div>
    </div>

It just doesn't work, I am not sure if I have marked it up correctly. — patrick
– patrick, Commented Mar 17, 2011 at 15:19
If you're not getting any javascript errors, then your code isn't acting as expected, your best bet will be to use firebug/developer tools to step through your method, and see what variables are being assigned as. — Psytronic
– Psytronic, Commented Mar 17, 2011 at 15:20

Swaff · Accepted Answer · 2011-03-17 15:24:28Z

3

The closest function in jQuery will look for the next element with the filter you supply that is a parent, or parent of a parent etc, basically up the DOM tree.

In your script you are searching for the partners_internal_product_registration class from the radio buttons, but the div with class partners_internal_product_registration, is actually a sibling of the radio button's parent.

You really need

var AffectedRegistration = $(this).closest('.partners_internal_product_select')
                                .siblings('partners_internal_product_registration');

answered Mar 17, 2011 at 15:24

Swaff

13.7k4 gold badges28 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kapa Over a year ago

+1 another possible great solution (I will you give you the upvote tomorrow, reached the daily vote limit :))

patrick Over a year ago

Thanks for the explanation too, that helped alot!

kapa · Accepted Answer · 2011-03-17 15:28:13Z

I can only guess what you want to do with this, but I suspect the problem is with this line:

var AffectedRegistration = 
  $(this).closest('.partners_internal_product_registration');

closest() tries to get a parent with the specified parameters, though the .partners_internal_product_registration div is not a parent of the radiobutton.

You want to get the closest .partners_internal_item, and in that, get the .partners_internal_product_registration div that's inside of it.

You do this with the following line (using jQuery context):

var AffectedRegistration = 
   $('.partners_internal_product_registration',  
     $(this).closest('.partners_internal_item'));

or you can use the .children() function:

var AffectedRegistration = 
   $(this).closest('.partners_internal_item')
     .children('.partners_internal_product_registration');

Collectives™ on Stack Overflow

jquery Syntax Help

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related