UI dialog open event only firing every second time it is opened.

UI dialog open event only firing every second time it is opened.

Hello all.

I am using a dialog for a form on a site I am building. When the user clicks a button the form pops up and it can be submitted. Some of the form elements get customized during the open event. I have used this type of technique before and it suited my purpose. However this time I am running into some behavior I can't explain. It appears that the code in the open event only fires every SECOND time the dialog is opened. I have cut down the functionality of the dialog and the function that opens it in order to debug but I am still getting the same results and can't explain it.

There is a variable number of divs  on the screen, based on whats retrieved from a DB each of these divs has a link that, when clicked, opens the dialog. The dialog is being used to request another user on the site to be associates.

The divs have the structure :
  1. <div id = 'friend_div'>
  2.       <a href = 'users_profile'<img src = 'users_pic_path' /></a>
  3.       <a href = "#" class = 'invite'>Invite</a>
  4. </div>

The dialog form looks like this :


  1.     <form id = "add_associate_dialog">
  2.    
  3.         <p id = "add_title"> </p>
  4.         <img id = "associate_pic" width = "200" height = "100" />
  5.         <label>Response Message (optional) </label>
  6.         <p>
  7.             <textarea cols = "20" rows = "5"id = "colleague_message" ></textarea>
  8.         </p>
  9.    
  10.     </form>
I turn the form into a dialog control like this. For debugging I have cut out all extraneous code so right now all it does is send an alert when the open event is fired. The code to open the dialog is also shown below, and again it has been stripped down for debugging, all it does is open the dialog:

  1. <script type = "text/javascript">
  2. $(function(){
  3.       $("#add_associate_dialog").dialog({
  4.         autoOpen: false,
  5.         open: function(event, ui){
  6.             alert("open");
  7.         }
  8.       });
  9.       $(".invite").click(function(){
  10.            
  11.          $("#add_associate_dialog"). dialog('open');
  12.           return false;
  13.       });   
  14. }) // end document ready
  15. </script>

What happens is the first time I click an invite link the dialog form will pop up, but the code run in the open event(the alert) will not fire. The second time I click a link, it will open and the event WILL fire, the alert pops up. When I click a third time the form shows but no alert, the fourth the form shows with the alert and so on. It's like it only fires every second time. I am pretty much out of ideas on this one, I have no idea why this is behaving like this. Could anyone out there make some suggestions as to what I could try to find the problem? Has anyone else encountered something like this? Any advice anyone could give me would be very much appreciated. Thanks very much.

Jstall