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>

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