I am having an issue with my addSale function, I can get it to load the content but it does not carry the CSS from my Main Template CSS link through to my jQuery Colorbox pop up box,
How could I make my partial view load the required CSS document?
Main Template:
<!DOCTYPE html>
<!--[if lt IE 7 ]><html lang=en-us class="no-js ie6"><![endif]-->
<!--[if IE 7 ]><html lang=en-us class="no-js ie7"><![endif]-->
<!--[if IE 8 ]><html lang=en-us class="no-js ie8"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang=en-us class=no-js> <!--<![endif]-->
<head>
<title><?php echo str_replace(".php","",ucfirst(basename($_SERVER['REQUEST_URI']))); ?> : Nationwide Housemovers</title>
<link href="<?php echo base_url()?>includes/css/adminstyle.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<?php echo base_url()?>includes/css/colorbox.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="<?=base_url()?>includes/css/validationEngine.jquery.css" type="text/css" media="screen">
<script type="text/javascript" src="<?php echo base_url() ?>includes/js/ckedit/ckeditor.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>includes/js/shiv.js"></script>
</head>
<body>
<div id ="wrapper">
<div id="header">
<div class="companyName"></div>
<div class="companyQuote"></div>
</div>
<div id ="leftCol">
<nav>
<ul>
<?php if($this->session->userdata('logged_in')): ?>
<li><?php echo anchor('admin/dashboard', 'Dashboard');?></li>
<li><a>Edit Pages</a>
<?php if(is_array($cms_pages)): ?>
<ul>
<?php foreach($cms_pages as $page): ?>
<li><a href="<?=base_url();?>admin/editpage/index/<?= $page->id ?>/<?php echo url_title($page->name,'dash', TRUE); ?>"><?=$page->name?></a></li>
<?php endforeach; ?>
</ul> <!-- UL Close -->
<?php endif; ?>
</li> <!-- Edit Close -->
<li><a href="gallery">Gallery</a>
<ul>
<li><?php echo anchor('admin/addimage','Add Image');?></li>
<li><?php echo anchor('admin/deleteimage','Delete Image');?></li>
<li><?php echo anchor('admin/imagecaption','Edit Caption');?></li>
</ul>
</li> <!-- Gallery Close -->
<li><a href="sales">Sales</a>
<ul>
<li><?php echo anchor('admin/addsale','Add Sale');?></li>
<li><a>Edit Sale</a>
<?php if(is_array($sales_pages)): ?>
<ul>
<?php foreach($sales_pages as $sale): ?>
<li><a href="<?=base_url();?>admin/editsale/index/<?=$sale->id?>/<?php echo url_title($sale->name,'dash', TRUE); ?>"><?=$sale->name?></a></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li><!-- LI Edit Sale Close -->
<li><?php echo anchor('admin/deletesale','Delete Sale');?></li>
</ul><!-- UL Close -->
<li><?php echo anchor('admin/home/logout','Log Out');?></li>
<?php else: ?>
<?php redirect('admin/home'); ?>
<?php endif; ?>
</ul>
</nav>
</div><!--leftCol End -->
<section id="content">
<h1><?=$title?></h1>
<?=$content?>
</section>
<div class="clear"></div>
<footer>
<p>LTD <?php echo date('Y'); ?></p>
</footer>
</div>
<script type="text/javascript" src="<?php echo base_url() ?>includes/js/jquery-1.5.1.min.js"></script>
<script src="<?= base_url() ?>includes/jquery.colorbox-min.js" type="text/javascript"></script>
<script src="<?= base_url() ?>includes/js/jquery.colorbox.js" type="text/javascript"></script>
<script src="<?= base_url() ?>includes/js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="<?= base_url() ?>includes/js/jquery.validationEngine.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel='newSale']").colorbox({width:"80%", height:"80%", iframe:true});
$("a[rel='editsale']").colorbox({width:"50%", inline:true, href:"#addSale"});
$("#pageEdit").validationEngine();
$("#addImage").validationEngine();
$("#addSale").validationEngine();
$("#editSale").validationEngine();
$('#captionSelect').change(function(){
var id = $(this).val();
var caption = $('#captionOption_' + id).html();
var thumbname = $('#captionOption_' + id).attr('title');
$('#captionInput').val(caption);
$('#preview').attr('src', '/includes/uploads/gallery/thumbs/' + thumbname);
alert('/path/to/pictures/' + thumbname + '.jpg');
});
});
</script>
</body>
</html>
Sales View:
<div id="newSale">
<a href="sales/addSale" rel="newSale">Add Sale</a>
</div>
<?php if($sales_pages): ?>
<?php foreach($sales_pages as $sale): ?>
<div id ="salesItem">
<img class="thumbnail" src="<?=base_url()?>includes/uploads/sales/thumbs/<?=$sale->thumbname?>" alt="<?=$sale->name?>"/>
<div class="items"><a href="deletesale/delete/<?=$sale->id?>">Delete</a> | <a href="#"rel="editsale" >Edit Sale</a> | <a href="#">Images</a></div>
</div>
<?php endforeach; ?>
<?php endif; ?>
Sales Controller:
class Sales extends CI_Controller {
function __construct(){
parent::__construct();
$this->load->library('user_agent');
}
function index() {
if(!$this->session->userdata('logged_in')) {
redirect('admin/home');
}
// Main Page Data
$data['sales_pages'] = $this->sales_model->getSalesPages();
$data['cms_pages'] = $this->navigation_model->getCMSPages();
$data['title'] = 'Sales';
$data['content'] = $this->load->view('admin/sales', $data, TRUE);
$this->load->view('admintemplate', $data);
}
function addSale(){
$this->load->view('admin/testview', TRUE);
}
}
Since you use an iframe, i think you should build a proper html document, complete with its own stylesheet.