title: JQuery UI dialog not working correctly; error message "TypeError: undefined is not a function"
body: <p>I am trying to make a popup dialog window using JQuery UI and it opens when I click a bookmark button.</p>
  
  <p>When I click first time on the button I get this error and nothing appears:</p>
  
  <pre><code>Uncaught TypeError: undefined is not a function (anonymous function)
  </code></pre>
  
  <p>The second time I click, the window appears.
  If I click again, The window appears without the title and the text from the body of the window appears at the end of the picture.</p>
  
  <p>This is the code:</p>
  
  <pre><code>var script1 = document.createElement('script');
  script1.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
  var script2 = document.createElement('script');
  script2.src = 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js';
  
  document.head.appendChild(script1);
  document.head.appendChild(script2);
  $("head").append("&lt;link rel='stylesheet' href='//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css'&gt;");
  $("body").append("&lt;div id='dialog' title='Basic dialog'&gt;&lt;p&gt;This is the default dialog which is useful for displaying information. &lt;/p&gt;&lt;/div&gt;");
  
  $(document).ready($("#dialog").dialog());
  </code></pre>