title: jQuery-UI dialog auto closes after a couple of seconds
body: <p>I want a jQuery-UI dialog to open when a button (#loadFile) is clicked, prompting the user for a file. This works fine, but after a couple of seconds the dialog box auto closes. I want it to stay open until the user closes it, or until I specify it with code (for instance when a file is chosen). I can't figure out why this happens.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#accordion').accordion({
    collapsible: true,
    active: 1,
    beforeActivate: function(event, ui) {
      // The accordion believes a panel is being opened
      if (ui.newHeader[0]) {
        var currHeader = ui.newHeader;
        var currContent = currHeader.next('.ui-accordion-content');
        // The accordion believes a panel is being closed
      } else {
        var currHeader = ui.oldHeader;
        var currContent = currHeader.next('.ui-accordion-content');
      }
      // Since we've changed the default behavior, this detects the actual status
      var isPanelSelected = currHeader.attr('aria-selected') == 'true';
  
      // Toggle the panel's header
      currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));
  
      // Toggle the panel's icon
      currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);
  
      // Toggle the panel's content
      currContent.toggleClass('accordion-content-active', !isPanelSelected)
      if (isPanelSelected) {
        currContent.slideUp();
      } else {
        currContent.slideDown();
      }
  
      return false; // Cancels the default action
    }
  });
  
  $(document).ready(function() {
    $(".btn").button();
    $("#dialog").dialog();
    $("#dialog").dialog("close");
  });
  
  $("#loadFile").click(function() {
    $("#dialog").dialog("open");
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!doctype html&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  
    &lt;link rel="stylesheet" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div id="accordion"&gt;
      &lt;h3&gt;Cards&lt;/h3&gt;
      &lt;div&gt;This is where the cards you pick from will appear&lt;/div&gt;
  
      &lt;h3&gt;Control Box&lt;/h3&gt;
      &lt;div&gt;
        &lt;form&gt;Draft number:
          &lt;input type="text" placeholder="#"&gt;
          &lt;input type="submit" value="Search for Draft" class="btn"&gt;
          &lt;button class="btn" id="loadFile"&gt;Load from file&lt;/button&gt;
        &lt;/form&gt;
  
      &lt;/div&gt;
  
      &lt;h3&gt;Picks Log&lt;/h3&gt;
      &lt;div&gt;This is where your picks will be displayed&lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div id="dialog" title="Upload Draft Log" class="filePrompt"&gt;
      &lt;form&gt;Click the browse button in order to select the log file on your hard-drive.
        &lt;br&gt;
        &lt;br&gt;
        &lt;input type="file"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  
    &lt;script src="js/jquery-ui-1.11.4.custom/external/jquery/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/index.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>