title: Load dynamically generated layout to DIV content section of HTML page
body: <p>I am developing the News letter  web Application, It consists of  4 inside  tabs where he can select the layout in one tab and select the people who he wants to send in another tab  and preview of selected layout content and finally submit tab.</p>
  
  <p>I want to load  content section of tab1(Layout)  to div content of another HTML   page (where header and footer section created to show the preview in 3rd tab) as this HTML page is linked to 3rd tab. I can load total page into HTML page using jquery  but i want to load dynamically generated layout with content  of tab1 to HTML page.</p>
  
  <p><strong>Below are 4 inner tabs</strong> </p>
  
  <pre><code>&lt;ul class="nav nav-tabs" id="myTab"&gt;
      &lt;li class="active"&gt;&lt;a id="templ_code_tab" data-toggle="tab" href="#templ_code"&gt;1. Select teh layout&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a id="templ_preview_tab" data-toggle="tab" href="#templ_list"&gt;2. List o fthe people&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a id="templ_preview_tab" data-toggle="tab" href="#temp_preview"&gt;3. preview&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a id="templ_preview_tab" data-toggle="tab" href="#templ_preview1"&gt;4. send&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>In Tab1 Customer can select his layout and post the content/image  in that</p>
  
  <pre><code>&lt;select id="templ_editor_theme1" class="form-control input-sm" &gt;
      &lt;option value="" disabled selected&gt;Select Layout&lt;/option&gt;
      &lt;option value="1"&gt;TextboxandImage&lt;/option&gt;
      &lt;option value="2"&gt;Imageonly&lt;/option&gt;
   &lt;/select&gt;
  </code></pre>
  
  <p>Below are the  Tab1 layout DIV section of the Options 1 and 2</p>
  
  <pre><code>&lt;div class="row" id ="TextboxandImage" style="display:none" &gt;
    &lt;div class="col-sm-12"&gt;
  
      &lt;div class="row"&gt;
        &lt;div class="col-sm-6"&gt;
          &lt;textarea class="form-control" rows="10"&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-6"&gt;
          &lt;img src="http://www.jail.se/hardware/digital_camera/canon/ixus_800is-powershot_sd700/images/sample_photos/sample3.jpg"  class="img-thumbnail" rows="10"/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div class="hover-btn"&gt;
      &lt;button type="button" class="close" data-dismiss="alert"&gt;
  
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="row" id ="Imageonly" style="display:none"&gt;
    &lt;div class="col-sm-12"&gt;
      &lt;input type="image" src="http://www.jail.se/hardware/digital_camera/canon/ixus_800is-powershot_sd700/images/sample_photos/sample3.jpg"  class="img-thumbnail" rows="5" onclick="chooseFile();"/&gt;
      &lt;input type="file" id="my_file" style="display: none" /&gt;
      &lt;input type="submit" id="Up" style="display: none;" /&gt;
    &lt;/div&gt;
    &lt;div class="hover-btn"&gt;
      &lt;button type="button" class="close" data-dismiss="alert"&gt;
        &lt;span aria-hidden="true"&gt;×&lt;/span&gt;
        &lt;span class="sr-only"&gt;Close&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In second tab customer can select the list of the people who he wants to send the news letter.</p>
  
  <pre><code>&lt;div id="templ_list" class="tab-pane fade"&gt;              
    &lt;h1&gt;Listor&lt;/h1&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-12"&gt;
        &lt;label&gt;Välj de listor du vill skicka till:&lt;/label&gt;
        &lt;br /&gt;
        &lt;br /&gt;
        &lt;input type="checkbox" /&gt;&amp;nbsp;&amp;nbsp;Test/utveckling
        &lt;br /&gt;
        &lt;input type="checkbox" /&gt;&amp;nbsp;&amp;nbsp;Intern korr
        &lt;br /&gt;
        &lt;input type="checkbox" /&gt;&amp;nbsp;&amp;nbsp;Kunder
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>When click on third tab (Preview Tab) It should display the selected layout with content of Tab1 with header and footer.</strong></p>
  
  <p>I have created  HTML with header,footer and div content (Empty-content)linked it to third tab through Iframe. </p>
  
  <p>Basic HTML Page</p>
  
  <pre><code>&lt;div id="temp_preview" class="tab-pane fade"&gt;
    &lt;iframe src="~/Templates/LgCollection/Basic.html" style="width: 90%; height: 700px"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I want to load the selected layout and content to the Empty content Div of HTML page which is link to 3rd tab.</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class ="header" &gt;
      &lt;div class ="container"&gt;
        &lt;div class ="logo"&gt;
          &lt;img src="/images/logo1.png" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id ="content"&gt;
  </code></pre>
  
  <p>Here I want to load the tab1 dynamically select layout with content</p>
  
  <pre><code>  &lt;/div&gt;
  
  
    &lt;div class=" footer"&gt;
  
    &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>