Geek Answers Handbook

In jQuery-ui this._mouseInit is not a function of the error, why do I get this after I upgraded to 1.8.2

Hi, I am having problems with my application after upgrading to 1.8.2 jquery-ui. I get "this._mouseInit is not an error function".

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>

This is where the code gives 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;
  }

  }));
});
+5
source share
2 answers

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

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

It should just be:

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

Two changes here: $.extend()not required, it is determined by the arguments now, and you do not want to declare plugins inside the event window.onload... there is no need, and this will only cause problems.

, :

  }));
});

:

});
+2

More articles:


All Articles