title: codeigniter and tab contents
body: <p>I have some <strong>tabs</strong> whose contents are fully functional parts of my website.</p>
  
  <p>For instance, in my admin area, I have tabs [add/delete album][add photo][delete photo]. I'm technically dividing the admin area via tabs.</p>
  
  <p>I'm using ajax to load the content into these tabs. tab content area is a div.</p>
  
  <p>The view that is <strong>inside</strong> the tab content area also uses ajax to load stuff. 
  These are ajax calls that operates inside the tab content area.</p>
  
  <p>Everything works fine as long as the view inside the tab content area stays same or only part of it changes. But when certain interactions inside tab content area return a whole new view, tab content area would not show them. </p>
  
  <p>I know what happens is that this new view that is returned is not passed into the tab content area div.</p>
  
  <p>In firebug, I can see that ajax success function response shows the new view that is returned.
  But I do not know how to pass that new view to the tab content area.</p>
  
  <p>I would appreciate it if someone could help me out in explaining how this could be solved or how contents inside tabs are managed in CI.</p>
  
  <pre><code>adminTabsview.php
  
  &lt;ul id="adminTabs"&gt; 
      &lt;li &gt;&lt;?php echo anchor('#album_addDelete', 'Album Add/Delete'); ?&gt;&lt;/li&gt;     
  &lt;/ul&gt;   
  &lt;div id="adminTabsContent"&gt;&lt;/div&gt;
  
  $(document).ready(function(){   
  $('#adminTabs a').on({      
      click: function (evt){          
          evt.preventDefault();           
          var page = this.hash.substr(1);          
           adminTabsAjaxCall(page);           
      }   
  });
  });
  
  function adminTabsAjaxCall ($data){
  
  $.ajax({
      type: "POST",
      url: "index.php/adminsite_controller/"+ $data + "/",
      dataType: "html",
      data: $data,
      statusCode: {removed}
              },
      success: adminTabContent        
  
  });
  
  function adminTabContent (data){            
      $('#adminTabsContent').html(data);
  }
  </code></pre>
  
  <hr>
  
  <pre><code>albumsEditDeleteView.php
  (this is a view that gets loaded into the tab contentarea div)
  
  &lt;div id="adminTabsContent"&gt;
  &lt;div id="albumList"&gt;
  &lt;ul&gt;
  &lt;li&gt;
   &lt;a href="#"&gt;Asdf&lt;/a&gt;
   &lt;a class="add" href="http://localhost/myPHP/photoalbums/index.php/Albums_Controller/add_album/301/Asdf/1/28/0"&gt;[ add ]&lt;/a&gt;
   &lt;a class="delete" href="http://localhost/myPHP/photoalbums/index.php/Albums_Controller/delete_album/301/Asdf/1/28/0"&gt;[ delete ]&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  $(document).ready(function(){   
  $('#albumList').on({        
      click: function (evt){          
          evt.preventDefault();   
  var $clickedElement = evt.target.tagName;
  if ($clickedElement == 'A' ){                
      var urlarray = url.split('/');      
      $chosen.albumid     = urlarray[8];
      $chosen.albumname   = urlarray[9];
      $chosen.lft     = urlarray[10];
      $chosen.rgt     = urlarray[11];
      $chosen.nodeDepth   = urlarray[12]; 
             if ($class == 'add'){                  
       albumajaxcall($chosen);
         }
            if ($class == 'delete'){            
      deleteajaxcall($chosen);
         }            
      }               
  }   
  });
  });
  
  
  function albumajaxcall($data){
  $.ajax({
      type: "POST",
      url: "index.php/Adminsite_Controller/add_album/",
      dataType: "json",
      data: $data,
      statusCode: {removed}
              },
      success: adminTabContent
  }); 
  }
  
  function adminTabContent(data){         
  $('#adminTabsContent').html(data);
  }
  </code></pre>
  
  <hr>
  
  <pre><code>//heres the view file that has to replace the original view inside 
  //tabcontent area
  //addnode_view.php
      &lt;?php echo form_open('Albums_Controller/update_albumSet');?&gt;                                
          &lt;input type="text" name="newAlbum" id="newAlbum" value=""/&gt;             
          &lt;input type="submit" name="submit" value="Submit" /&gt;        
      &lt;?php echo form_close();?&gt;
      &lt;?php 
  
  
  //heres the controller function
  function add_album(){           
      $levelData ['albumid']      = $this-&gt;input-&gt;post('albumid');
      &lt;!-- removed--&gt;
  
      $levelData ['main_content'] = 'addnode_view';   
      $this-&gt;load-&gt;view('includes/template', $levelData);
  }
  
  
   //And heres the controller method that loads 
   //the original page (albumsEditDeleteView.php) - this is the original view 
   //that gets loaded into the tab- I get stuck when this view 
   //has to be **totally** replaced through links in the view)
  
  function album_addDelete(){
      $allNodes ['myAlbumList'] = $this-&gt;Albums_Model-&gt;get_albumList();
      echo $this-&gt;load-&gt;view('albumsEditDelete_view', $allNodes); 
  }
  </code></pre>
  
  <p>thanx in advance.</p>