multiple buttons to open same dialog

multiple buttons to open same dialog

So I'm scratching my head here with trying to use several buttons to open the same dialog form.

I have an accordion with a selector for each record returned by a query.  Within the selector, other related data is queried and returned.  I want the user to be able to click a button, see the form dialog, enter the data, and ajax takes over.  Everything works on the first selector just fine.  On the rest of them, the buttons don't open the form dialog.

My button code:

  1. <a href="#" onClick="document.getElementById('GameUnitNum').value = <? echo $ResultAr["UnitID"]; ?>" id="DialogAddGameButton" class="dialog ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Add Game</a>
Note: the onClick applies a value to a hidden field into the form.


  1.                     // Game Dialog
  2.                     $('#AddGameForm').dialog({
  3.                         autoOpen: false,
  4.                         width: 600,
  5.                         buttons: {
  6.                             "Ok": function() {
  7.                                 $(this).dialog("close");
  8.                                  AddGame(function(){
  9.                                  });
  10.                             },
  11.                             "Cancel": function() {
  12.                                
  13.                                 $(this).dialog("close");
  14.                             }
  15.                         }
  16.                     });
  17.                    
  18.                     // Dialog Link
  19.                     $('#DialogAddGameButton').click(function(){
  20.                         $('#AddGameForm').dialog('open');
  21.                         return false;
  22.                     });
  23.                                        
  24.                     //hover states on the static widgets
  25.                     $('#DialogAddGameButton, ul#icons li').hover(
  26.                         function() { $(this).addClass('ui-state-hover'); },
  27.                         function() { $(this).removeClass('ui-state-hover'); }
  28.                     );


Any advice is appreciated.