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>

• Psytronic: What's the issue you're having? Where's the error?
• gideon: What is the problem? Describe it in detail.
• patrick: It just doesn't work, I am not sure if I have marked it up correctly.
• Alnitak: "doesn't work" is not normally sufficient for diagnosis.
• Psytronic: 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.

Answer 1

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');

• kapa: +1 another possible great solution (I will you give you the upvote tomorrow, reached the daily vote limit :))
• patrick: Thanks for the explanation too, that helped alot!

Answer 2

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');