title: how to use iframe instead of div with jquery ui tabs?
body: <p>I have 4 tabs:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(document).ready(function(){
          $("#tabs").tabs({cache: true});
  
      });
  
  &lt;/script&gt;
  
  &lt;div id="tabs"&gt;
      &lt;ul style="padding: 0; margin: 0;"&gt;
          &lt;li class="context-tab" target="story-iframe"&gt;&lt;a id="recent-tab" href="/canvas/getstories?context=recent"&gt;Recent&lt;/a&gt;&lt;/li&gt;
          &lt;li class="context-tab" target="story-iframe"&gt;&lt;a id="popular-tab" href="/canvas/getstories?context=popularity" target="points-view"&gt;Popular&lt;/a&gt;&lt;/li&gt;
          &lt;li class="context-tab" target="story-iframe"&gt;&lt;a id="random-tab" href="/canvas/getstories?context=random" target="points-view"&gt;Random&lt;/a&gt;&lt;/li&gt;
          &lt;li class="context-tab" target="story-iframe"&gt;&lt;a id="question-tab" href="/canvas/getstories?context=question"&gt;By Question&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When a tab is clicked, it goes to the django view, and renders_to_response this page:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="{{ STATIC_URL }}css/custom-theme/jquery-ui-1.8.16.custom.css"&gt;
      &lt;link rel="stylesheet" href="{{ STATIC_URL }}css/ui.slider.extras.css"&gt;
      &lt;link rel="stylesheet" href="{{ STATIC_URL }}css/style.css" type="text/css"&gt;
      &lt;link rel="stylesheet" href="{{ STATIC_URL }}css/facebook.css" type="text/css"&gt;
      &lt;script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.6.2.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ STATIC_URL }}js/jquery-ui-1.8.16.custom.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ STATIC_URL }}js/vote.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="{{ STATIC_URL }}js/chart.js"&gt;&lt;/script&gt;
      &lt;script src="/canvas/schoolsAndMajors.js"&gt;&lt;/script&gt;
  
  {% block include %}
      {% include 'story-div.html' %}
  {% endblock %}
  
      &lt;script&gt;
          $(document).ready(function(){
              $("#{{ div }}").empty();
  
              displayStoriesData("{{ div }}", {{ responses|safe }}, {{ scores }}, {{ votes|safe }}, "{{ STATIC_URL }}");
              votehandler_init({{ response_ids }}, []);
              voted_init({{ response_ids }}, []);
          });
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
      &lt;div id="{{ div }}"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>which looks perfect, but the content is loaded into a div, not an iframe, and as such, I can't use duplicate ids, which I would like to do (as some of my other code is dependent upon the ids being a certain way)</p>
  
  <p>What I see online is iframe tags on the page with srcs and ids set to match... but I'm not sure if/how this fits in with the django views.</p>
  
  <p>EDIT: So I just tried to load the content in an iframe on the same page... the iframe loaded below the rest of the content, though... so I'm not sure that's going to work.</p>
  
  <p>EDIT2: it was loading outside of the rest of the content because it was outside the tabs div... but when I make 4 iframes, one for each tab, they all load at once, sequentially, and the lis are no longer separate tabs.... so I feel like something is wrong with that.</p>
  
  <p>The code for this edit looks like:</p>
  
  <pre><code>&lt;div id="tabs"&gt;
      &lt;ul style="padding: 0; margin: 0;"&gt;
          &lt;li class="context-tab" href="#iframe1"&gt;&lt;a id="recent-tab" &gt;Recent&lt;/a&gt;&lt;/li&gt;
          &lt;li class="context-tab" href="#iframe2"&gt;&lt;a id="popular-tab"&gt;Popular&lt;/a&gt;&lt;/li&gt;
          &lt;li class="context-tab" href="#iframe3"&gt;&lt;a id="random-tab"&gt;Random&lt;/a&gt;&lt;/li&gt;
          &lt;li class="context-tab" href="#iframe4"&gt;&lt;a id="question-tab"&gt;By Question&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;iframe id="iframe1" src="/canvas/getstories?context=recent" style="width:100%;"&gt;
          &lt;/iframe&gt;
  
      &lt;iframe id="iframe2" src="/canvas/getstories?context=popularity" style="width:100%;"&gt;
          &lt;/iframe&gt;
  
      &lt;iframe id="iframe3" src="/canvas/getstories?context=random" style="width:100%;"&gt;
          &lt;/iframe&gt;
  
      &lt;iframe id="iframe4" src="/canvas/getstories?context=question" style="width:100%;"&gt;
          &lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>