Add events to synchronise checkboxes between parnet and popup windows

Add events to synchronise checkboxes between parnet and popup windows

Hi,

I have a pop-window that contains a checkbox for an item. I want to keep the checkbox synchronised with the checkbox on the parent window. The parent window contains a list of items and I need to bind an event to the parent window's checkbox and the pop-up window. I have managed to get 90% there but I have a couple of issues.

The first problem is that I have had to put the code in-line. The code was originally in a source file and loaded when $.(ready) but I kept on getting errors that self.opener was null. Which it was when the pop-up wasn't there. I could not find a way to make the function work conditionally.

The second problem is that I when I click on the checkbox in the parent window, I get errors from FireBug that jQuery isn't defined.

jQuery is not defined
var bool = jQuery(this).attr('checked');
( line 60)

However the checkbox does toggle correctly:

The other question I have is should unbind the events after and how best to do that.

  1.             <form id="order_form" name="order_form" method="post" >
  2.                   <label>Select item
  3.                   <input type="checkbox" name="itemselect" id="order" value="[% media.id %]" />
  4.                  </label>
  5.             </form>
  6.             <script type="text/javascript">
  7.                   var item = jQuery("form input:checkbox");
  8.                   var parent = self.opener.document.forms[1].itemselect;
  9.                   var parentSelect = jQuery(parent).filter(
                                function(index) {
                                    return jQuery(this).attr('value') == item.val();
                                });


  10.                   // Set the check box initially to the value of the parent
  11.                   item.attr('checked', parentSelect.attr('checked'));
  12.                    // Bind a change event to the parent checkbox to update
                       // the local checkbox

  13.                   parentSelect.bind('change', function() {
  14.                   var bool = jQuery(this).attr('checked');
                                    jQuery("form input:checkbox").attr('checked', bool);
                                });

  15.                    // Bind a change event to the local checkbox to update
                       // the parent checkbox
                       item.bind('change', function() {
                                    parentSelect.attr('checked', item.attr('checked'));
                                });
                     </script>






If anyone has any suggestion or comments, they'd be greatly apperciated.
Thanks in advance
Dermot