In jQuery-ui, this._mouseInit is not a function error, why am I getting this after i upgrade to 1.8.2

Question

Hi I am having trouble with my application after I upgraded to 1.8.2 jquery-ui. I am getting a "this._mouseInit is not a function error".

Includes:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css" media="all">@import "css/pinpoint.css";</style>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.pinpoint.js"></script>

Here is where the code is giving me the error:

$(window).load(function() {
  $.widget("ui.boxTool", $.extend({}, $.ui.mouse, {

  _init: function() {
    this.element.addClass("ui-boxTool");
    this.dragged = false;

    this._mouseInit();
    this.width = $('#toPinpoint').width();
    this.height = $('#toPinpoint').height();

    this.helper = $(document.createElement('div'))
      .css({border:'1px dashed #c2c0c0'})
      .css({cursor:'crosshair'})
      .addClass("ui-boxTool-helper");
  },

  destroy: function() {
    this.element
      .removeClass("ui-boxTool ui-boxTool-disabled")
      .removeData("boxTool")
      .unbind(".selectable");
    this._mouseDestroy();

    return this;
  },

  _mouseStart: function(event) {
    var self = this;

    this.opos = [event.pageX, event.pageY];

    if (this.options.disabled)
      return;

    var options = this.options;

    this._trigger("start", event);

    $(options.appendTo).append(this.helper);

    this.helper.css({
      "z-index": 100,
      "position": "absolute",
      "left": event.clientX,
      "top": event.clientY,
      "width": 0,
      "height": 0
    });
  },

  _mouseDrag: function(event) {
    var self = this;
    this.dragged = true;

    if (this.options.disabled)
      return;

    var offset = $('.canvas').offset();
    var options = this.options;
    var x1 = this.opos[0], y1 = this.opos[1], x2 = event.pageX, y2 = event.pageY;
    if (x1 > x2) { 
        var tmp = x2; 
        x2 = x1; 
        x1 = tmp; 
    }
    if (y1 > y2) { var tmp = y2; y2 = y1; y1 = tmp; }
    if (x2 > this.width+offset.left-1){x2=this.width+offset.left-1;}
    if (y2 > this.height+offset.top-1){y2=this.height+offset.top-1;}
    if (x1 < offset.left){x2=this.offset.left;}
    if (y1 < offset.top){ x2=this.offset.top;}
    this.helper.css({left: x1, top: y1, width: x2-x1, height: y2-y1});

    this._trigger("drag", event);

    return false;
  },

  _mouseStop: function(event) {
    var self = this;

    this.dragged = false;

    var options = this.options;

    var clone = this.helper.clone()
      .removeClass('ui-boxTool-helper').appendTo(options.appendTo);



    this._trigger("stop", event, { box: clone });

    this.helper.remove();
    //$('.view-mode').remove(this.helper);
    return false;
  }

  }));
});

Answer 1

The syntax changed a bit in jQuery UI 1.8+ when extending a widget, this:

$(window).load(function() {
  $.widget("ui.boxTool", $.extend({}, $.ui.mouse, {

Should just be this:

$.widget("ui.boxTool", $.ui.mouse, {

Two changes here: the $.extend() isn't needed, it's determined by the arguments now, and you don't want to declare plugins inside a window.onload event...there's no need and it'll only cause trouble.

---

Make sure to change the end to match as well, the last 2 lines:

  }));
});

Should now just be:

});