Hey there, I could really use some assistance. I've created a style switcher, but I'm struggling to figure out how to replace the stylesheet properly. Currently, my code empties the <head> element when what I really need is for it to simply swap out the previous stylesheet. Here's a snippet of my code:
Menu and JavaScript
<ul id="options">
<li><a class="option" href="<?php echo base_url();?>welcome/setBackground/red">Red</a></li>
<li><a class="option" href="<?php echo base_url();?>welcome/setBackground/green">Green</a></li>
<script type="text/javascript">
$('a.option').click(function(ev) {
ev.preventDefault();
var url = $(this).attr("href");
alert(url)
$.ajax({
url : url,
type : "POST",
data : "js=true",
success : function(html) {
$('head').html(html);
}
});
});
</script>
PHP Section
function setBackground() {
$data['style'] = $this->uri->segment(3);
$_COOKIE[] = setcookie("style", $data['style'], time()+(60*60*24*30), "/");
//die(print_r($_COOKIE));
if($this->input->post('js') == "true") {
//echo $data['style'];
$this->load->view('base/cssSelector', $data);
} else {
redirect(base_url().'welcome');
}
}
HTML Generated by JavaScript and PHP
<link rel="stylesheet" href="/media/css/<?php echo $style; ?>.css" media="screen, projection" />