Codeigniter and jQuery css switcher

Question

hello,

I have been following a tutorial on creating a style switcher with PHP and jQuery, now in the tutorial the PHP function uses get data, which is not available in codeigniter, I was hoping someone would be able to help me tidy up my sorry attempt?

My PHP function

    function setBackground() {
    $style = $this->uri->segment(3);
    setcookie("style", $style, time() + (60*60*24*30));
    echo $style;
}

My HTML and jquery call

<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>
</ul>
<script type="text/javascript">
$('a.option').styleSwitcher(); // calling the plugin
</script>

The jQuery plugin

jQuery.fn.styleSwitcher = function(){
$(this).click(function(){
    loadStyleSheet(this);
    return false;
});
function loadStyleSheet(obj) {
    $('body').append('<div id="overlay" />');
    $('body').css({height:'100%'});
    $('#overlay')
        .css({
            display: 'none',
            position: 'absolute',
            top:0,
            left: 0,
            width: '100%',
            height: '100%',
            zIndex: 1000,
            background: 'black url(img/loading.gif) no-repeat center'
        })
        .fadeIn(500,function(){
            $.get( obj.href+'&js',function(data){
            $('#stylesheet').attr('href','/media/css/' + data + '.css');

                cssDummy.check(function(){
                    $('#overlay').fadeOut(500,function(){
                        $(this).remove();
                    }); 
                });
            });
        });
}
var cssDummy = {
    init: function(){
        $('<div id="dummy-element" style="display:none" />').appendTo('body');
    },
    check: function(callback) {
        if ($('#dummy-element').width()==2) callback();
        else setTimeout(function(){cssDummy.check(callback)}, 200);
    }
}
cssDummy.init();

}

On clicking the link to change the stylesheet I get this error rturned via firebug,

An Error Was Encountered

The URI you submitted has disallowed characters.

the URL that is being sent is,

http://mywebsite/index.php/welcome/setBackground/green&js

this example is me clicking the green choice.

Answer 1

try removing +'&js' part from:

...
$.get( obj.href+'&js',function(data){
...

in jQuery plugin.

Answer 2

You are not calling function setBackground() in jquery.

.fadeIn(500,function(){
        $.get( obj.href+'&js',function(data){

You need to add id red and blue in a tag. You need to call it something like this.

.fadeIn(500,function(){
var color=$('.color').attr('id');
$.post('yourphpclass/setBackground/'+color, ...
...