2010-05-03 3 views
0

J'ai un problème pour trouver le bogue qui arrive avec un script. Je me l'erreur suivante dans Firebug:Problème jQuery avec sortable basé sur jQueryUi

exception uncaught: Erreur de syntaxe, expression non reconnue:)

Le problème est causé en quelque sorte à l'intérieur de mes base.js, deviner la fonction triables ne veut pas travailler avec ma version jQuery. S'il vous plaît jeter un oeil à la démo suivante:

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

Ligne 656 à base.js: Je l'ai utilisé le script inettuts qui clone essentiellement interface iGoogles. Le script me donne la possibilité de trier les widgets, de masquer/afficher le contenu et de changer la couleur de chaque widget, de plus il enregistre tout dans un cookie pour se souvenir de la position et du style. Initialement, le script inettuts fonctionnait avec jQuery 1.2.6 et UI 1.6.2, je suis à jQuery 1.4.2 et UI 1.8.1, quel est le problème. Toutes les fonctions fonctionnent bien dans cette composition sauf la fonction triable, je ne reçois aucun mouvement, 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'}); 
} 

};

Serait absolument génial si quelqu'un pouvait donner un pourboire où trouver le problème. Je suis à la fin de mes connaissances

Merci d'avance pour votre temps. ce qui a trait Bienveillantes,

Daniel

Répondre

0

Son un certain temps que vous avez posé la question, mais je me trouve face à un problème similaire.

D'abord, vous devez suivre SLaks conseils sur le post suivant, ou passez simplement votre code avec Firebug pour mieux déterminer où la question est: uncaught exception: Syntax error after jQuery upgrade

Je vais confirmer avec vous que sa version jQuery l'origine du problème , puisque mon problème n'existait pas en 1.3.2 mais en 1.4.2. Et il semble être lié aux sélecteurs de jquery, donc trouver où le problème commence va faciliter la recherche d'une solution.