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>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</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;
Related
I have a very specific problem with the layout
Iam using the PHP, MVC CodeIgniter framework
I have a home page layout where there is left navigation withe following links with fade-in and fade-out effect.
Iam loading all the data from a home controller for these menus. All the data is from a single table
except for current_affairs which Iam loading it as a separate partial or html
Followin is the code snippet I have.
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#home" data-toggle="tab"class="analistic><a></li> </ul>
</div>
<div class="tab-pane fade" id="home1">
<p><?php echo $result -> home1?></p>
<p><?php =current_affairs ?></p>
</div>
Now Iam adding another new page which is the "local_news" page which will be from another method in the same controller
I need the same left navigation in here as well. But the body content is different here. In that case if have a separate view
for local_news and load both of them they are loading one after the other. which is not correct.
Is there a way to display local news just like home,about ie, within the nav
Any help on this would be highly appreciated. Thanks in advance.
I think you have already discovered that you are loading the same thing twice. In local news just load the content instead of the whole page. Moreover, Its not clear what you are doing in the controller. But "YES" there are many ways to solve the problem. The way to follow is depended on the way you are organizing your things.
My website has two div columns: a vertical navigation menu and main content. I used php to navigate different pages of my website to the main div (similar to this php example)...(eg. index.php?pg=about_us --> get content from /page/about.html). But one of the pages I want to display this gallery (http://sye.dk/sfpg/) on the main div.
How to display my gallery correctly in the main div (installed under /pages/gallery/index.php) (eg. width about 700px)? I have the same problem if the navigation menu is pointed to an external website. (let's say google) The size and charset are not displayed correctly while using div. Thank you.
<?php
// ...blah blah blah
$pgname = isset($_GET['pg']) ? trim(strip_tags($_GET['pg'])) : 'index';
//....
?>
// starts html, header and body
<div class="left_col">
<nav id="navigation">
<ul>
<li>Home</li>
<li>News</li>
<li>Gallery</li>
<li>Donate</li>
<li>About Us</li>
</ul>
</nav>
</div>
<section class="main_col clearfix">
<?php
if ($pgname != 'gallery'){
echo file_get_contents('pages/'. $pgname. '.html');
} else {
echo file_get_contents('http://google.com/'); // this doesn't work, and neither work with '/pages/gallery/index.php'
}
?>
</section>
Simplified, the above becomes:
gallery.php:
<?php
$name = 'gallery'; // Fixed for this example.
$html_gallery = 'pages/'. $name . '.html';
?>
<html>
<section>
<?php include $html_gallery ?>
</section>
</html>
pages/gallery.html:
<img src="/images/foo.jpg">
<img src="/images/bar.jpg">
<img src="/images/baz.jpg">
gallery.php would render much like this:
<html>
<section>
<img src="/images/foo.jpg">
<img src="/images/bar.jpg">
<img src="/images/baz.jpg">
</section>
</html>
So as you can see, it is up to you to style the output.
I like your idea a lot... but I think it would be much easier for you to use JavaScript and AJAX for this. Also, this approach will prevent the page from reloading!
EDIT - So, if you say you have both HTML and PHP files to use, an ext parameter (extension) in your events will do the trick. - EDIT
My idea would be to give an onclick event on each li calling a JavaScript function, let's say onclick="getContent(page, ext)". So of course you need to replace page to whatever string you like, let's say gallery; and ext to any extension you need as a string, let's say php.
Sample result:
<li onclick="getContent('news', 'html')" title="News">News</li>
<li onclick="getContent('gallery', 'php')" title="Gallery">Gallery</li>
Now, let's build our JavaScript-AJAX stuff. What we first need to do is create the function and place it right after the <body> tag inside a <script> tag, of course. Then remember to add an id to your main column, in the following example it will be content.
<script type="text/javascript">
function getContent(pageName, ext){
var url = "pages/"+pageName+"."+ext, // gallery.php - news.html
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("content").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
</script>
So now this function creates the request and gets the data from your URL and then places all the HTML in it inside your section. Of course, make sure that the HTML file contains only what you need inside the section.
Your main column in HTML should look like this:
<section class="main_col clearfix" id="content"></section>
- EDIT -
About the pre-made single file PHP gallery and resizing problem... I saw the demo and I think I know how it works... my advice is to make sure you set a width to your main_col section because the content given by the demo seems to be lots of div's with a class thumbbox which happens to be arranged by CSS display:inline-block so it should just work fine like that.
But the biggest problem I see is that once you load the content on your page, it will not work unless you include(); (PHP) the file or at least the source code for your single page PHP gallery, because you will only load the HTML and I also see that it uses the JavaScript onclick event just like my idea.
What I can say is that to help you solve this thing entirely, I should be able to see how you're implementing this library and many other things. I think you can work it out tho if you include the file like I said (so that the PHP code loads and hopefully prints the necessary JavaScript).
Also, the charset might be solved using PHP utf8_encode(); or utf8_decode();. Use the first one to encode from ISO-8859-1 to UTF8 and the second one for the other way round.
I'm have a problem and I don't really know how to fix it. I'm trying to style the Tabs above my forum made with Drupal(see picture)
For some reason it always renders the tabs like on the picture. This is because I'm using the render function (print render($tabs)). I don't know how to get the names of the tabs. They are in a Array called $tabs, but this array returns this(See picture)
Here is everything summarized:
I want to design Drupal's default tabs, but there is one problem, I can't get the names of the tabs without using print render($tabs). But this function already styles the tabs.
Current code:
<?php if ($tabs): ?>
<ul class="nav nav-pills nav-justified">
<li class="active"><?php print_r render($tabs);?></li>
</ul>
<?php endif ?>
EDIT
When you click the tab, it has to redict to a URL. with the render function, it does this automatically. Is it also possible to do this?
This question already has answers here:
jQuery Ajax POST example with PHP
(17 answers)
Closed 9 years ago.
Ok, so lets say that I have navbar eg.
<ul>
<li class="selected">home</li>
<li>about me</li>
<li>contact</li>
<ul>
and I have a content on a page that I want to change depending on which <li> is selected without reloading the whole page. It seems a bit pointless to reload the whole page just to update 2 divs.
eg. when home is selected I want to load home.php included in <div class='content'> + change class of <li> home</li> to selected etc.
should I use AJAX for this? or should I use $_GET -> altering the URL?
I am a beginner -> sorry for basic questions.
Thx for any kind of help!
You can use Ajax.
But if you're total beginner, another solution without Ajax :
• put all your content in a single file
• put IDs on your div, related to the content (div containing "about" content = div#about)
• just toggle the div on click, related to the content
Like this (JS with jQuery) :
$(document).ready(function(){
$('nav a').click(function(){
var dest = $(this).attr('href');
$('div.content').fadeOut(); // Hide all content divs
$(dest).fadeIn(); // Show the requested part
// You can do all of this using addClass / removeClass and use CSS transition (smoother, cleaner);
return false;
});
});
HTML updated:
<ul> <li class="selected">home</li> <li>about me</li> <li>contact</li> <ul>
If you had no idea of what is Ajax, I guess this solution is better for you.
To change part of your page from a new request, use Ajax. You can find a lot about it online.
That said, using ajax for basic navigation of a simple website is bad taste. Just do a normal navigation.
I wish to be able to open page on a specific tab by sending a message via GET variable. I was thinking something like:
http://mydomain/mytimecards.php?tab=vte
Here is the code for the jQuery tabs:
<div id="tabs">
<ul>
<li>Submit Time Cards</li>
<li>View Time Entries</li>
</ul>
<div id="mytimecards">
etc ....
Is it possible to force the page to display the 2nd tab (#timecardReports) instead of the first ONLY IF ?tab=vte is received as a GET (or better yet POST) variable?
Assuming the plugin you are using allows you to set an active tab on load, you could do something like:
<li><a href="#timecardReports" id="vte" <? if(isset($_GET['tab']) && $_GET['tab'] == 'vte'){ echo 'class="active"'; } ?>>View Time Entries</a></li>
Replacing class="active" with whatever the plugin requires you to set.
Thanks, guys, Ben and itachi were onto the right solution. This worked:
http://mydomain.com/mytimecards.php?tab=vte#timecardReports
I found this by using firebug and watching what changed as the tabs were clicked. Thanks itachi.
Ben's suggestion enabled me to test for this condition and set it on page load.
Credit to them both.