I need to build some ajax tabs with CodeIgniter. The problem I am having is that I need a lot of information stored in 1 tab, and the info differs in each tab so I can not use a template HTML and just populate the data with different values. The designer that provided the markup styled it so that each html part is hidden. So my question is how should I do it? Get the values i need for each ajax call and populate each tab by context or should I load individual pages for each tab ..so the html and the data are on a different page. I tried to do this in CodeIgniter, but I could not manage to do it in a MVC context.
solution 1. Load all data via the Codeigniter controller and show/hide tabs with Javascript. When JS is disabled: show all data on one page
solution 2. make a call to the server via ajax for each click that exposes a tab, and then call the controller. To be able to call a controller from Javascript you need the base url: http://www.jigniter.com/use-your-site-url-or-base-url-in-javascript-functions/comment-page-1/#comment-654
$.getJSON(CI.base_url + 'controller/method/', function(data) { // ... }
or use $.ajax for complexer stuff. When JS is disabled: each click loads a new view.
First build this without JS, then overlay it.
You can load all the information directly from the controller and pass data to the main view. Codeigniter provide the 3rd parameter for the view to do this:
$string = $this->load->view('myfile', '', true);
in this case you have all the data of the myfile into the $string.
You can put the data into a separated view from the template and then load it.
For example:
$info_tab['first_tab'] = $this->load->view('first_tab_content', '', true);
$info_tab['second_tab'] = $this->load->view('second_tab_content', '', true);
$this->load->view('html_template',$info_tab);
in this way you have two new variables in the view.
The best way to do this is load in partials views ( you load a partial view by passing false as a third view param which gives you a string ) with conditional statements. Tab1 might need to meet 0 conditions, tab2 might need to meet 2 conditions and so on. The best bet might be to use the HMVC plugin.
<ul class="tabs">
<li><a href="#tab-one">Tab One</a></li>
<li><a href="#tab-two">Tab Two</a></li>
<li><a href="#tab-three">Tab Three</a></li>
</ul>
-
<div id="tab-one" class="tab-content">
<?php echo Modules::run('module/tab_one'); ?>
</div>
<div id="tab-two" class="tab-content">
<?php echo Modules::run('module/tab_two'); ?>
</div>
<div id="tab-three" class="tab-content">
<?php echo Modules::run('module/tab_three'); ?>
</div>
-
public function tab_one(){
$this->load->view('module/partials/view_one', array(), false)
}
-
view_one
PHP
if(condition_is_meet):
// do something
PHP
else:
//do something else
PHP
endif;