jQuery problem with sortable based on jQueryUi

Question

Hello @ all,

I am having a problem finding the bug which is coming up with one script. I get following error in FireBug:

uncaught exception: Syntax error, unrecognized expression: )

The problem is caused somehow inside my base.js, guessing the sortable function does not want to work with my jQuery version. Please have a look at following demo:

http://dev.evilmile.de/CommandCP/

Line 656 at base.js: I have used the inettuts script which basically clones iGoogles interface. The script gives me the possibility to sort the widgets, hide/show content and change the color of each widget, also it saves everything in a cookie to remember the position and style. Initially that inettuts script was running with jQuery 1.2.6 and UI 1.6.2, I am at jQuery 1.4.2 and UI 1.8.1, what is the problem. All functions are working well in that composition except the sortable function, I don´t get any movement etc.

var iNettuts = {

jQuery : $,

settings : {
    columns : '.column',
    widgetSelector: '.widget',
    handleSelector: '.widget-head',
    contentSelector: '.widget-content',

    /* If you don't want preferences to be saved change this value to
        false, otherwise change it to the name of the cookie: */
    saveToCookie: 'widget-prefs22222',

    widgetDefault : {
        movable: true,
        removable: true,
        collapsible: true,
        editable: true,
        colorClasses : ['color-yellow', 'color-red', 'color-blue', 'color-white', 'color-orange', 'color-green']
    },
    widgetIndividual : {}
},

init : function () {
    this.attachStylesheet('css/inettuts.js.css');
    this.sortWidgets();
    this.addWidgetControls();
    this.makeSortable();
},

getWidgetSettings : function (id) {
    var $ = this.jQuery,
        settings = this.settings;
    return (id&&settings.widgetIndividual[id]) ? $.extend({},settings.widgetDefault,settings.widgetIndividual[id]) : settings.widgetDefault;
},

addWidgetControls : function () {
    var iNettuts = this,
        $ = this.jQuery,
        settings = this.settings;

    $(settings.widgetSelector, $(settings.columns)).each(function () {
        var thisWidgetSettings = iNettuts.getWidgetSettings(this.id);
        if (thisWidgetSettings.removable) {
            $('<a href="#" class="remove">CLOSE</a>').mousedown(function (e) {
                /* STOP event bubbling */
                e.stopPropagation();    
            }).click(function () {
                if(confirm('This widget will be removed, ok?')) {
                    $(this).parents(settings.widgetSelector).animate({
                        opacity: 0    
                    },function () {
                        $(this).wrap('<div/>').parent().slideUp(function () {
                            $(this).remove();
                        });
                    });
                }
                return false;
            }).appendTo($(settings.handleSelector, this));
        }

        if (thisWidgetSettings.editable) {
            $('<a href="#" class="edit">EDIT</a>').mousedown(function (e) {
                /* STOP event bubbling */
                e.stopPropagation();    
            }).toggle(function () {
                $(this).css({backgroundPosition: '-66px 0', width: '55px'})
                    .parents(settings.widgetSelector)
                        .find('.edit-box').show().find('input').focus();
                return false;
            },function () {
                $(this).css({backgroundPosition: '', width: '24px'})
                    .parents(settings.widgetSelector)
                        .find('.edit-box').hide();
                return false;
            }).appendTo($(settings.handleSelector,this));
            $('<div class="edit-box" style="display:none;"/>')
                .append('<ul><li class="item"><label>Change the title?</label><input value="' + $('h3',this).text() + '"/></li>')
                .append((function(){
                    var colorList = '<li class="item"><label>Available colors:</label><ul class="colors">';
                    $(thisWidgetSettings.colorClasses).each(function () {
                        colorList += '<li class="' + this + '"/>';
                    });
                    return colorList + '</ul>';
                })())
                .append('</ul>')
                .insertAfter($(settings.handleSelector,this));
        }

        if (thisWidgetSettings.collapsible) {
            $('<a href="#" class="collapse">COLLAPSE</a>').mousedown(function (e) {
                /* STOP event bubbling */
                e.stopPropagation();    
            }).click(function(){
                $(this).parents(settings.widgetSelector).toggleClass('collapsed');
                /* Save prefs to cookie: */
                iNettuts.savePreferences();
                return false;    
            }).prependTo($(settings.handleSelector,this));
        }
    });

    $('.edit-box').each(function () {
        $('input',this).keyup(function () {
            $(this).parents(settings.widgetSelector).find('h3').text( $(this).val().length>20 ? $(this).val().substr(0,20)+'...' : $(this).val() );
            iNettuts.savePreferences();
        });
        $('ul.colors li',this).click(function () {

            var colorStylePattern = /\bcolor-[\w]{1,}\b/,
                thisWidgetColorClass = $(this).parents(settings.widgetSelector).attr('class').match(colorStylePattern)
            if (thisWidgetColorClass) {
                $(this).parents(settings.widgetSelector)
                    .removeClass(thisWidgetColorClass[0])
                    .addClass($(this).attr('class').match(colorStylePattern)[0]);
                /* Save prefs to cookie: */
                iNettuts.savePreferences();
            }
            return false;

        });
    });

},

attachStylesheet : function (href) {
    var $ = this.jQuery;
    return $('<link href="' + href + '" rel="stylesheet" type="text/css" />').appendTo('head');
},

makeSortable : function () {
    var iNettuts = this,
        $ = this.jQuery,
        settings = this.settings,
        $sortableItems = (function () {
            var notSortable = '';
            $(settings.widgetSelector,$(settings.columns)).each(function (i) {
                if (!iNettuts.getWidgetSettings(this.id).movable) {
                    if(!this.id) {
                        this.id = 'widget-no-id-' + i;
                    }
                    notSortable += '#' + this.id + ',';
                }
            });
            return $('> li:not(' + notSortable + ')', settings.columns);
        })();

    $sortableItems.find(settings.handleSelector).css({
        cursor: 'move'
    }).mousedown(function (e) {
        $sortableItems.css({width:''});
        $(this).parent().css({
            width: $(this).parent().width() + 'px'
        });
    }).mouseup(function () {
        if(!$(this).parent().hasClass('dragging')) {
            $(this).parent().css({width:''});
        } else {
            $(settings.columns).sortable('disable');
        }
    });

    $(settings.columns).sortable({
        items: $sortableItems,
        connectWith: $(settings.columns),
        handle: settings.handleSelector,
        placeholder: 'widget-placeholder',
        forcePlaceholderSize: true,
        revert: 300,
        delay: 100,
        opacity: 0.8,
        containment: 'document',
        start: function (e,ui) {
            $(ui.helper).addClass('dragging');
        },
        stop: function (e,ui) {
            $(ui.item).css({width:''}).removeClass('dragging');
            $(settings.columns).sortable('enable');
            /* Save prefs to cookie: */
            iNettuts.savePreferences();
        }
    });
},

savePreferences : function () {
    var iNettuts = this,
        $ = this.jQuery,
        settings = this.settings,
        cookieString = '';

    if(!settings.saveToCookie) {return;}

    /* Assemble the cookie string */
    $(settings.columns).each(function(i){
        cookieString += (i===0) ? '' : '|';
        $(settings.widgetSelector,this).each(function(i){
            cookieString += (i===0) ? '' : ';';
            /* ID of widget: */
            cookieString += $(this).attr('id') + ',';
            /* Color of widget (color classes) */
            cookieString += $(this).attr('class').match(/\bcolor-[\w]{1,}\b/) + ',';
            /* Title of widget (replaced used characters) */
            cookieString += $('h3:eq(0)',this).text().replace(/\|/g,'[-PIPE-]').replace(/,/g,'[-COMMA-]') + ',';
            /* Collapsed/not collapsed widget? : */
            cookieString += $(settings.contentSelector,this).css('display') === 'none' ? 'collapsed' : 'not-collapsed';
        });
    });
    $.cookie(settings.saveToCookie,cookieString,{
        expires: 10
        //path: '/'
    });
},

sortWidgets : function () {
    var iNettuts = this,
        $ = this.jQuery,
        settings = this.settings;

    /* Read cookie: */
    var cookie = $.cookie(settings.saveToCookie);
    if(!settings.saveToCookie||!cookie) {
        /* Get rid of loading gif and show columns: */
        //$('body').css({background:'#000'});
        $(settings.columns).css({visibility:'visible'});
        return;
    }

    /* For each column */
    $(settings.columns).each(function(i){

        var thisColumn = $(this),
            widgetData = cookie.split('|')[i].split(';');

        $(widgetData).each(function(){
            if(!this.length) {return;}
            var thisWidgetData = this.split(','),
                clonedWidget = $('#' + thisWidgetData[0]),
                colorStylePattern = /\bcolor-[\w]{1,}\b/,
                thisWidgetColorClass = $(clonedWidget).attr('class').match(colorStylePattern);

            /* Add/Replace new colour class: */
            if (thisWidgetColorClass) {
                $(clonedWidget).removeClass(thisWidgetColorClass[0]).addClass(thisWidgetData[1]);
            }

            /* Add/replace new title (Bring back reserved characters): */
            $(clonedWidget).find('h3:eq(0)').html(thisWidgetData[2].replace(/\[-PIPE-\]/g,'|').replace(/\[-COMMA-\]/g,','));

            /* Modify collapsed state if needed: */
            if(thisWidgetData[3]==='collapsed') {
                /* Set CSS styles so widget is in COLLAPSED state */
                $(clonedWidget).addClass('collapsed');
            }

            $('#' + thisWidgetData[0]).remove();
            $(thisColumn).append(clonedWidget);
        });
    });

    /* All done, remove loading gif and show columns: */
    //$('body').css({background:'#fff'});
    $(settings.columns).css({visibility:'visible'});
}

};

Would be absolutely great if anybody could give a tip where to find the problem. I am at the end of my knowledge

Thanks in advance for your time. Kindly regards,

Daniel

Answer 1

Its been some time since you asked the question, but I find myself facing a similar issue.

First you should follow SLaks advice on the following post, or simply step through your code with Firebug to better pinpoint where the issue lies: http://stackoverflow.com/questions/2791332/uncaught-exception-syntax-error-after-jquery-upgrade/2791347#2791347

I'll confirm with you that its a jQuery version causing the issue, since my problem didn't exist in 1.3.2 but does in 1.4.2. And it seems to be related to the jquery selectors, so finding where the issue starts will make it easier to find a solution.