Question

I have to develop a small application for school and I first designed in photoshop a bit and “converted” it into html. That went all fine. I created a custom dropdown with javascript and it worked smoothly. I’ve just tried implementing CodeIgniter into the design but the javascript started running twice.

I’ve tried comparing the code of the plain html version with the codeigniter result but I can’t seem to find any difference.

Can any of you maybe help me?
Here’s the CodeIgniter result:
http://intellia.itforit.net/index.htm

As asked by Krof Drakula here are the most important pieces of code:

The actual jquery plugin: (styleForm.js)

    ;(function($){
    $.fn.styleForm = function() {
        var form = this;

        /* Select */
        $('select', this).each(function(){
            var div = '<div class="styledSelect"><ul>';
            var first = false;

            $('option', this).each(function(){
                var cssclass = "";
                if(!first) {
                    first = true;
                    cssclass = 'class="first"'
                }
                div += '<li ' + cssclass + ' id="' + $(this).attr("value") + '">' + $(this).text() + '</li>';
            });

            div += '</ul></div>';
            $(this).hide();
            $(this).after(div);
        });

        $('.styledSelect ul').toggle(function(){
            $('li:not(.first)', this).show("fast");
        }, function(){
            $('li:not(.first)', this).hide("fast");
        });

        $('.styledSelect ul li:not(.first):not(.selected)').click(function(){
            var id = $(this).attr('id');
            var content = $(this).text();
            $('.styledSelect ul li.first').attr('id', id).text(content);
            $('.styledSelect ul li').css({'font-weight': 'normal'});
            $(this).css({'font-weight': 'bold'});

            /* SELECT in Select form item */
            var selected = $('select option[value="' + id + '"]:not(.first)', form).get(0);
            selected.setAttribute("selected", "selected");
            //$(form).submit();
        });

    };
})( jQuery );

And here’s where it gets launched: (canvasDrawing.js)

$(document).ready(function(){
     $('form').styleForm();
     //Unimportant canvas stuff
});

Thanx in advance,
Duckness

Answer 1

The problem is that your canvasDrawing.js, in the “unimportant canvas stuff”, causes a javascript error. If the canvas it describes actually exists, your styleForm stuff only runs once. So add this to your HTML:

        <canvas id="floorplan"></canvas>

And magic will happen. Or, in your canvasDrawing file, add clause like this right after styleForm:

var canvas = document.getElementById('floorplan');
if (!canvas)
    return;

I’m not actually all that clear why having an error in that function causes it to run twice, but it’s definitely the problem. See it: your code + a canvas element = working.