Проблема jQuery с сортировкой на основе jQueryUi

У меня проблема с поиском ошибки, которая появляется в одном скрипте. Я получаю следующую ошибку в FireBug:

неперехваченное исключение: синтаксическая ошибка, нераспознанное выражение:)

Проблема как-то вызвана внутри моего base.js, предполагая, что сортируемая функция не хочет работать с моей версией jQuery. Пожалуйста, взгляните на следующую демонстрацию:

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

Строка 656 в base.js: я использовал скрипт inettuts, который в основном клонирует интерфейс iGoogle. Скрипт дает мне возможность сортировать виджеты, скрывать/отображать содержимое и изменять цвет каждого виджета, а также сохраняет все в файле cookie, чтобы запомнить положение и стиль. Изначально этот скрипт inettuts работал с jQuery 1.2.6 и UI 1.6.2, у меня jQuery 1.4.2 и UI 1.8.1, в чем проблема. Все функции в этой композиции работают хорошо, кроме функции сортировки, у меня нет движения и т. д.

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'});
}

};

Было бы абсолютно здорово, если бы кто-нибудь мог дать совет, где найти проблему. я на пределе своих знаний

Спасибо заранее за ваше время. Добрые пожелания,

Даниэль


person Daniel    schedule 03.05.2010    source источник


Ответы (1)


Прошло некоторое время с тех пор, как вы задали вопрос, но я столкнулся с похожей проблемой.

Сначала вы должны следовать совету SLaks в следующем посте или просто просмотреть свой код с помощью Firebug, чтобы лучше определить, в чем проблема: неперехваченное исключение: синтаксическая ошибка после обновления jQuery

Я подтвержу вам, что проблема связана с версией jQuery, поскольку моей проблемы не было в 1.3.2, но есть в 1.4.2. И, похоже, это связано с селекторами jquery, поэтому поиск того, где начинается проблема, облегчит поиск решения.

person GrandVizier    schedule 07.09.2010