title: How do I open multiple forms on a single HTML page?
body: <p>I have a single Bootstrap HTML page that is a repository for a large number of forms (quizzes). Currently I have the quizzes opening in a bootstrap modal via iFrame, but the lag on the initial load of the repository page is bad (too many calls to the server for the iFrames).</p>
  
  <p>This is for work so the server is Oracle (no php), and the systems are still all XP using IE8.</p>
  
  <p>The iFrames work but they lag the page. How do I go about opening multiple versions of this form without leaving the page?</p>
  
  <p>Quizzes follow this format: <a href="http://techlaboratory.net/techlab/demos/SmartWizard2/" rel="nofollow">http://techlaboratory.net/techlab/demos/SmartWizard2/</a> </p>
  
  <hr>
  
  <p>Based on the Ajax suggestion I tried to mimic the example I found but I must be missing something.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;ajax test&lt;/title&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  function showUrlInDialog(url){
     var tag = $("&lt;div&gt;&lt;/div&gt;");
        $.ajax({
           url: url,
             success: function(data) {
                tag.html(data).dialog({modal: true}).dialog('open');
                  }
                     });
                      } 
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;a href="#" onclick="showUrlInDialog('../../quiz_all/match.html'); return false;"&gt;Match quiz&lt;/a&gt; 
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>