I am currently learning CodeIgniter and using it for a small project. I would like to make a template so that I don't need to write repeated code for the views. I like jruzafa's answer in this post: How to Deal With Codeigniter Templates?
In controller:
//Charge the view inside array
$data['body'] = $this->load->view('pages/contact', '', true);
//charge the view "contact" in the other view template
$this->load->view('template', $data);
In view template.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Template codeigniter</title>
</head>
<body>
<div>
<?=$body?>
</div>
<div class="clear"></div>
<div>Footer</div>
</div>
</body>
</html>
$body is the view contact.
But now I face a problem. The form validation doesn't work if I pass the form_view as string to $data['body']. Is there any way to work around it?
Thanks.
Try loading the body content within the template itself. This should allow you to be more selective with your output:
In controller:
// Set the path to body content inside the $data array
$data['path_to_body'] = 'pages/contact';
$this->load->view('template', $data);
In view template.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Template codeigniter</title>
</head>
<body>
<div>
<? $this->load->view($path_to_body) ?>
</div>
<div class="clear"></div>
<div>Footer</div>
</div>
</body>
</html>
Related
I'm working on my first Spring MVC project and I got stuck at a problem. I have 3 types of users in my application: admin, employee and customer. Depending on the type of user, I would like to have a specific type of menu for each of them. I tried using a switch statement in my thymeleaf template but every case gets included in the output and I don't understand why.
This is the code for my method in the controller:
#RequestMapping(value = "list/{roleId}", method = RequestMethod.GET)
public String listFood(Model model, #PathVariable int roleId){
model.addAttribute("title", "Available Foods");
model.addAttribute("roleId", roleId);
model.addAttribute("foods", foodDao.findAll());
return "food/list";
}
And this is the code from the Thymeleaf template (each fragment will be included in the resulting page):
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head th:replace="fragments :: head"></head>
<body class="container">
<h1 th:text="${title}">Food</h1>
<div th:switch="${roleId}">
<p th:case="0"><nav th:replace="admin-fragments :: navigation"></nav></p>
<p th:case="1"><nav th:replace="employee-fragments :: navigation"></nav></p>
<p th:case="2"><nav th:replace="customer-fragments :: navigation"></nav></p>
</div>
</body>
</html>
However, if I change the template to the following one then only the correct case will be included in the resulting page.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head th:replace="fragments :: head"></head>
<body class="container">
<h1 th:text="${title}">Food</h1>
<div th:switch="${roleId}">
<p th:case="0">User is an administrator</p>
<p th:case="1">User is an employee</p>
<p th:case="2">User is a customer</p>
</div>
</body>
</html>
Why isn't the switch from the first template behaving like the one in the second template? What should I change in the first template to be able to have a personalised menu for each type of user? Thank you!
is it possible extend a shared view with thymeleaf?
I saw that is possible use framents but is not what I want.
Instead I want something similar to .NET MVC, with something like #RenderBody() and another view that extend the shared view by including the shared view.
You can use the Thymeleaf Layout Dialect to extend a view.
Layout page
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
...
<body layout:fragment="body">
...
</body>
</html>
Content page
In your content page, you refer to the layout (decorator) page using the layout:decorator attribute.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout.html">
...
<body layout:fragment="body">
<p>Actual page content</p>
</body>
</html>
It is possible to have multiple fragments in one page.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
...
<body>
<div layout:fragment="content"></div>
<footer layout:fragment="footer"></footer>
</body>
</html>
I'm new in codeigniter, I feel trouble about layout/template/themes in codeigniter.
I don't know when should using one of them..
What is the best way that i can do? if i want to make a website with free a html/css template like
goodnatured
|--img
|--img01.jpg
|--css
|--style.css
|--js
|--jquery.js
|--index.html
Anyone can tell me a tutorial, suggest, ... thanks
I just write little additional library(application/libraries/display_lib.php) for rendering tempates and similar page blocks.
Something like this:
class Display_Lib{
private $_CI;
private $_template_data;
public function __construct()
{
$this->_CI =& get_instance();
}
public function set($key, $value)
{
$this->_template_data[$key] = $value;
}
public function get($key)
{
return $this->_template_data[$key];
}
public function get_template_data()
{
return $this->_template_data;
}
public function display_page($view, $data = array())
{
$this->set('content', $this->_CI->load->view($view, $data, TRUE));
$this->_CI->load->view('templates/main_template', $this->get_template_data());
}
}
Set this library in auto load:
$autoload['libraries'] = array('session', 'database', 'display_lib');
And call it in controller:
class Main extends CI_Controller{
public function index()
{
$some_data = array();
$this->display_lib->display_page('views/main_view', $some_data);
}
}
Template example:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<?=base_url();?>">
<meta charset="utf-8">
<link rel="icon" href="<?=site_url('img/favicon.ico')?>" type="image/x-icon"/>
<link rel="stylesheet" href="<?=site_url('css/style.css');?>" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="<?=site_url('js/jquery-1.10.2.min.js');?>"></script>
<title>Some page title</title>
</head>
<body>
<header></header>
<div class="auth_wrapper">
<div class="content">
<?=$content;?>
</div>
<div class="buffer"></div>
</div>
<footer></footer>
</body>
</html>
And application/views/main_view simple exmaple:
<div>Come content will be here</div>
This lib allow to use templates and render views from controllers.
Templates handle the layout of your page. You create a template that will contain your meta, header, footer, and a space for the body. The body get injected in the template, this is where the content change.
The idea is that most of the site don't change, only the body changes. This is where templates are useful, they save you time and increase consistency.
See this template library, it's pretty good: http://getsparks.org/packages/template/show
Themes is combined with a template as templates often define the layout and a theme just 'skin' the layout. A theme include assets and styles that will modify the template further more.
Cheers
Make a template.php, header.php, footer.php. Below is template.php, Similarly make header and footer and place them all in views folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="<?=site_url('img/favicon.ico')?>" type="image/x-icon"/>
<link rel="stylesheet" href="<?=site_url('css/style.css');?>" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="<?=site_url('js/jquery-1.10.2.min.js');?>"></script>
<title>Some page title</title>
</head>
<body>
<header><?=$this->load->view('header');?></header>
<div class="wrapper">
<div class="content">
<?=$main?>
</div>
</div>
<footer><?=$this->load->view('footer');?></footer>
</body>
</html>
In your Controller function:
function index(){
$data = array();
$data['main'] = "home"; #this view is home.php in views folder, the content part of template.php
$this->load->view('template', $data); #this is the template file being rendered.
}
This is the most simple way of using templates in CI I think.
I am trying to create a pdf from html using dompdf with codeigniter. I have two html pages. My problem is that only the first page is saved in the pdf file. The second one is gone.
Here is my code :
$this->load->library('pdf');
$html = $this->load->view('reports_html/couver1','',true);
$html .= $this->load->view('reports_html/reportContentImageLeft','',true);
$this->pdf->load_html($html);
$this->pdf->render();
other code
$this->data['view'] = $this->load->view('reports_html/reportContentImageLeft','',true);
$html = $this->load->view('reports_html/couver1',$this->data,true);
// $this->pdf->load_html($html);
$this->pdf->load_view('reports_html/couver1',$this->data,true);
$this->pdf->render();
i did like you said but only prints on the pdf file the first page
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>on.plans - reports - cover page 1</title>
<link href="<?php echo base_url()."css/reports.css"?>" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<div id="section" class="cover">
<div class="logo">
<img src="/path/to/officeLogo.jpg" width="300px" height="150px">
</div>
<h1>Meeting date</h1>
<h3>Project name</h3>
</div>
</div>
</body>
</html>
<?php echo $view; ?>
i added the view but its not working
thanks for your answer
You can try something like this:
$data['view'] = $this->load->view('reports_html/reportContentImageLeft','',true);
$html = $this->load->view('reports_html/couver1',$data,true);
$this->pdf->load_html($html);
$this->pdf->render();
$dompdf->stream("test.pdf");
And in your reports_html/couver1 view need do something like this <?=$view;?>
This solution is not the best - but it is work.
I have a web page on which I use jQuery's AJAX to load new elements into a div. This part of my page works fine.
I now want to add a similar event to these newly-added elements. To do this I planned to use jQuery's .live() method but nothing appears to happen.
So I initially start with this
<div id="change-agent-list" class="tooltip">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
Into .middle I asynchronously load markup that looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
</head>
<body>
<form name="main" method="post" action="/ils/agent-selector/" id="main">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
</div>
<ul id="content_0_agentsUL">
<li>
Agent 1
</li>
<li>
Agent 2
</li>
<li>
Agent 3
</li>
</ul>
<div id="agent-details"></div>
</form>
</body>
</html>
When the page initially loads I use this script - my intention is to add a click handler for each of the .agent-name elements that are asynchronously added later.
$j(document).ready(function () {
$j(".agent-name").live("click", function() {
var agentDetails = $j(".agent-details");
var loadingContent = '<div id="ajax-load"><img src="/sitecore/__/_images/global/ajax-load.gif" alt="AJAX content loading" /></div>';
agentDetails.show();
agentDetails.empty().html(loadingContent);
var modalURL = $j(".agent-name").attr("href");
agentDetails.load(modalURL);*/
return false;
});
});
The problem is that no events are being bound to the .agent-name elements. I've tried replacing all the inner script with a simple alert() so that I can see if any events are being bound to the .agent-name elements, and I can't get this alert() to display.
So in other words, no events are being bound to my .agent-name elements.
Even if I move the agent-name class to the list elements and change the jQuery to simply
$j(".agent-name").live("click", function() {
alert('1');
});
I still get nothing when I click on the elements.
Can anyone explain why, or how I fix this so that I can late-bind events to elements created in an AJAX callback?
I eventually solved this by using jQuery's on instead of "live".
You can only have one #agent-name because IDs are unique. You can just use $('#agents .link') since you already have a class on each anchor.
Not sure if this is helpful, but this works for me:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".agent-name").live("click", function() {
alert("click");
return false;
});
});
</script>
</head>
<body>
<form name="main" method="post" action="/ils/agent-selector/" id="main">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
</div>
<ul id="content_0_agentsUL">
<li>
Agent 1
</li>
<li>
Agent 2
</li>
<li>
Agent 3
</li>
</ul>
<div id="agent-details"></div>
</form>
</body>
</html>