title: Struts Jquery plugin dialog will only open once
body: <p>I've got the following jsp page and I'm using struts2-jquery-plugin-3.1.1</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function openDialog() {
      $.publish('openDialog');
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="detailContainer"&gt;
    &lt;div id="header"&gt;
       &lt;s:action name="ecu-info-header" var="dc"/&gt;
  
  &lt;ul class="vMenu"&gt;
      &lt;s:iterator var="ecus" value="ecuList" status="status"&gt;
      &lt;s:url id="ecu" value="ecu-info-detail" escapeAmp="false"&gt;
          &lt;s:param name="id" value="%{id}"&gt;&lt;/s:param&gt;
          &lt;s:param name="ecuName" value="name"&gt;&lt;/s:param&gt;
          &lt;s:param name="ajax" value="true"&gt;&lt;/s:param&gt;
      &lt;/s:url&gt;
  
      &lt;li class="vMenuItem"&gt;&lt;sj:a href="%{ecu}" requestType="GET" targets="detail" onclick="openDialog()" onCompleteTopics="closeDialog"&gt;&lt;div class="vMenuItemText"&gt;&lt;s:property value="description"/&gt;&lt;/div&gt;&lt;/sj:a&gt;&lt;/li&gt;
      &lt;/s:iterator&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;div id="detail"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="clear"&gt;&lt;/div&gt;
  &lt;s:submit cssClass="vMenuItemText hidden" id="submit" type="button"
          label="Back" name="back"/&gt;
  &lt;sj:dialog 
      id="myclickdialog" 
      autoOpen="false" 
      modal="true" 
      title="Please Wait ..... "
      closeOnEscape="false"
      openTopics="openDialog"
      closeTopics="closeDialog"
      overlayOpacity="0.85"
      showEffect="scale"
  &gt;
      &lt;p class="instruction"&gt;Reading data from the vehicle&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;img id="loading" src="&lt;%=request.getContextPath()%&gt;/resources/images/loading.gif"/&gt;
  
  &lt;/sj:dialog&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>The first time I click on one of the links, the dialog box opens and closes as expected with the results loaded in div id="details". Second and subsequent clicks on any of the links results in the fresh data reloading, but the dialog box never re-opens.</p>
  
  <p>EDIT:</p>
  
  <p>I've taken the sugestions below and tried to convert to pure JQuery and I still have the same problem.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  $(document).ready(function() {
      $('#popup').dialog({ autoOpen: false })    
      $('#popup').dialog({ modal: true })             // set modal
      $('#popup').dialog({ closeOnEscape: false });       // prevent closing by pressing the escape key
      $('#popup').dialog({ dialogClass: 'no-close' });    // in conjunction with css hides the "x" to close button
      $('#popup').dialog({ title: 'Please wait ....'});
      $('.anchor').each(function() {
          $(this).click(function() {
              processDialog($(this).attr('href'));
              return false;
          });
      });
  });
  
  function openDialog() {
  
      $('#popup').dialog('open');
  }
  
  
  function processDialog(url) {
          openDialog();
  
          $.get(url, function(data) {
              $('#popup').dialog('close');
              $('#detail').html(data);
  
              });
  
          return false;
      }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="detailContainer"&gt;
  &lt;div id="header"&gt;
  &lt;s:action name="ecu-info-header" var="dc"/&gt;
  
  &lt;ul class="vMenu"&gt;
      &lt;s:iterator var="ecus" value="ecuList" status="status"&gt;
      &lt;s:url id="ecu" value="ecu-info-detail"&gt;
          &lt;s:param name="id" value="%{id}"&gt;&lt;/s:param&gt;
          &lt;s:param name="ecuName" value="name"&gt;&lt;/s:param&gt;
          &lt;s:param name="ajax" value="true"&gt;&lt;/s:param&gt;
      &lt;/s:url&gt;
  
      &lt;li class="vMenuItem"&gt;&lt;s:a cssClass="anchor" href="%{ecu}"&gt;&lt;div class="vMenuItemText"&gt;&lt;s:property value="description"/&gt;&lt;/div&gt;&lt;/s:a&gt;&lt;/li&gt;
      &lt;/s:iterator&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;div id="detail"&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div id="clear"&gt;&lt;/div&gt;
  &lt;s:a cssClass="vMenuItemText" id="floatingButton" href="display-diagnostic-menu"&gt;Back&lt;/s:a&gt;
  
  
  &lt;div id="popup" class="hidden"&gt;
  &lt;p class="instruction"&gt;Reading data from the vehicle&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;img id="loading" src="&lt;%=request.getContextPath()%&gt;/resources/images/loading.gif"   /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>First link I click on, the dialog opens as expected, the get request executes, the dialog closes and the data is refreshed. Any subsequent attempt to click on one of the links results in Firebug console reporting "(#popup).dialog is not a function". Refreshing the page and everything starts to work, but again, only once.</p>
  
  <p>EDIT</p>
  
  <p>I found the blog entry at <a href="http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog" rel="nofollow">http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog</a> and as a result the answer seems to be to remove the div for the dialog from my jsp page and create it javascript when the dialog is initialised. So what I've got now is</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var $dialog;
  
  $(document).ready(function() {
  
      $dialog = $('&lt;div&gt;&lt;/div&gt;')
      .html('&lt;p class="instruction"&gt;Reading data from the vehicle&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;img id="loading" src="&lt;%=request.getContextPath()%&gt;/resources/images/loading.gif"/&gt;')
      .dialog({ autoOpen: false,    
                modal: true,              // set modal
                closeOnEscape: false,         // prevent closing by pressing the escape key
                dialogClass: 'no-close',  // in conjunction with css hides the "x" to close button
                title: 'Please wait ....'
                });
      $('.anchor').each(function() {
          $(this).click(function() {
              processDialog($(this).attr('href'));
              return false;
          });
      });
  });
  
  function processDialog(url) {
          $dialog.dialog('open');
          $('#detail').empty();
  
          $.get(url, function(data) {
              $('#detail').html(data);
              $dialog.dialog('close');
  
  
              });
  
          return false;
      }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="detailContainer"&gt;
  &lt;div id="header"&gt;
  &lt;s:action name="ecu-info-header" var="dc"/&gt;
  
  &lt;ul class="vMenu"&gt;
      &lt;s:iterator var="ecus" value="ecuList" status="status"&gt;
      &lt;s:url id="ecu" value="ecu-info-detail"&gt;
          &lt;s:param name="id" value="%{id}"&gt;&lt;/s:param&gt;
          &lt;s:param name="ecuName" value="name"&gt;&lt;/s:param&gt;
          &lt;s:param name="ajax" value="true"&gt;&lt;/s:param&gt;
      &lt;/s:url&gt;
  
      &lt;li class="vMenuItem"&gt;&lt;s:a cssClass="anchor" href="%{ecu}"&gt;&lt;div class="vMenuItemText"&gt;&lt;s:property value="description"/&gt;&lt;/div&gt;&lt;/s:a&gt;&lt;/li&gt;
      &lt;/s:iterator&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;div id="detail"&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div id="clear"&gt;&lt;/div&gt;
  &lt;s:a cssClass="vMenuItemText" id="floatingButton" href="display-diagnostic-menu"&gt;Back&lt;/s:a&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Why this works instead of referencing a div in the jsp page I have no idea and
  would be grateful for an explanation.</p>