John,
Thanks for the tip.
Adding the ownerDocument as you suggested (and documented here:
http://docs.jquery.com/Core/jQuery#htmlownerDocument
) does remove the error. No handle is added to the slider, though.
One reason might be that I need to plumb the ownerDocument around the
slider widget and ui core more completely. I'd like to get more
feedback from the ui dev folks on any discussion and thoughts they've
had in this area. I like standing on shoulders, plus if it's work that
they already want to get done contributing back would be extra
motivating.
However, there is one thing that seems odd to me. In the code below,
something happens to self.element between mark A and mark B.
$.widget("ui.slider", {
_init: function() {
var self = this;
this.element.addClass("ui-slider");
this._initBoundaries();
// Initialize mouse and key events for interaction
this.handle = $(this.options.handle, this.element);
// mark A
if (!this.handle.length) {
self.handle = self.generated = $(self.options.handles
|| [0]).map
(function() {
// mark B
var handle = $("<div/>",
self.element).addClass("ui-slider-
handle").appendTo(self.element);
if (this.id)
handle.attr("id", this.id);
return handle[0];
});
}
// mark C
At mark A, self.element has the expected class and id. at mark B and
mark C, the class and id equal 0 (not undefined or null).
I understand that the map is flexible for one or two slider handles. I
think the expected behavior is that self.handle and self.generated
both point to an array of handle elements (unwrapped from jquery
objects). (the "this" inside the map refers to each array item in turn
that the map function is acting on, right?)
aahhhh....I get it. My guess is that I need to add the ownerDocument,
in this case self.element, to the jquery items that map is acting on.
If that's true then this is all part of the original guess that I need
to plump ownerDocument everywhere.
Assuming I'm stumbling onto the right track, I guess I'll try to use
jquery source code as a guide for adding ownerDocs to jquery ui
components, see if the dev folks have anything helpful to add, and
post back when (if) I make progress.
Thanks for nudging me in the right direction.
Lucy.
On Dec 1, 10:50 am, John Resig <[email protected]> wrote:
> It seems like changing:
> var handle = $("<div/>").addClass("ui-slider-handle").appendTo
> (self.element);
>
> to:
> var handle = $("<div/>", self.element).addClass("ui-slider-
> handle").appendTo(self.element);
>
> Would solve the problem in UI, at least. jQuery tries to do similar
> across its code base.
>
> --John
>
> On Nov 30, 12:19 pm, lucy <[email protected]> wrote:
>
> > Hi,
>
> > I'm calling jquery.ui version 1.6 from aFirefoxextension. I'm
> > getting an interesting problem.
>
> > Whenever some ui widget calls $("<<some html>>"), this.element is
> > over-
> > written by the element just created.
>
> > UI plugins that don't do this kind of thing, eg the effects, work
> > fine. The slider plugin, which I am particularly interested in, does
> > this when creating the handle. Even if I create the handle before
> > calling slider, other parts get messed up.
>
> > If this is the wrong list, let me know. I wasn't sure where to go for
> > help. I've spent much of today debugging this, and I thought you might
> > have more insight on working with jquery.ui. I appreciate any help you
> > can provide.
>
> > I've included relevant code below. My guess is that the problem is
> > some kind of scope/closure issue...or maybe I'm not loading jQuery or
> > jQuery.ui correctly. Myextensionreceives page load events, and from
> > that loads jQuery with the appropriate context. It then loads
> > jQuery.ui.
>
> > I'm runningFirefox3.5 on Mac OS 10.5.7.
>
> > If you have questions let me know. I'm still learning good Javascript
> > practices.
>
> > Thanks,
> > Lucy.
>
> > jquery ui all 1.6:
>
> > /**
> > * Add the jQuery_UI function to encapsulate entire UI in a function
> > * so that we can pass in the
> > * jQuery+context created by the request instance.
> > */
> > function jQuery_UI(jQuery) {
>
> > (function($) {
>
> > var _remove = $.fn.remove,
> > isFF2 = $.browser.mozilla && (parseFloat($.browser.version) <
> > 1.9);
>
> > <<elided>>
>
> > $.widget("ui.slider", {
>
> > _init: function() {
>
> > var self = this;
> > this.element.addClass("ui-slider");
> > this._initBoundaries();
>
> > // Initialize mouse and key events for interaction
> > this.handle = $(this.options.handle, this.element);
> > if (!this.handle.length) {
> > self.handle = self.generated = $
> > (self.options.handles || [0]).map
> > (function() {
> > var handle = $("<div/>").addClass("ui-
> > slider-handle").appendTo
> > (self.element);
> > // Mark A: at this point, self.element
> > becomes the ui-slider-
> > handle element!
> > if (this.id)
> > handle.attr("id", this.id);
> > return handle[0];
> > });
> > }
>
> > note that the occurrence at Mark A is not limited to this situation.
> > for example, simplifying the above with the following still results in
> > self.element being over written at Mark A by the test element (or
> > rather, this.element.attr("class") then equals "test"):
>
> > var self = this;
> > this.element.addClass("ui-slider");
> > this._initBoundaries();
> > var x = $("<div class=\"test\"></div>");
> > // Mark A
>
> > cloning self.element and then resetting it after Mark A does
> > work...but that only solves this particular problem right here.
>
> > Theextension's"views", in this case slider_test_page, access jquery
> > in the following manner:
>
> > slider_test_page: function(request) {
> > << neat django template-style rendering elided--this is cool
> > because we share templates with our server. this isn't relevant, but
> > it is interesting. if you want to know more send me an email. i wish i
> > could provide something more jquery ui-ish in return, but that's all i
> > got. >>
>
> > var jq = request.add_jQuery_ui();
> > jq("#slider").slider();
>
> > }
>
> > Finally, here is the code for loading jQuery into the request:
>
> > function PageRequest(url, event) {
> > this.url = url;
> > this.event = event;}
>
> > PageRequest.prototype = {};
> > _extend(PageRequest.prototype, {
> > add_jQuery_ui: function() {
> > var self = this;
> > // the jQuery referenced inside here refers to the
> > object loaded by
> > the jQuery library
> > var jq = function(selector, context) {
> > return jQuery.fn.init(selector, context ||
> > self.get_document());
> > };
> > jQuery.extend(jq, jQuery);
> > jQuery_UI(jq);
> > return jq
> > },
> > get_document: function() {
> > var document = this.event.originalTarget;
> > return document;
> > },
> > <<elided>>
>
> > A couple extra things. These probably aren't relevant, I'm just trying
> > to get my thoughts straight:
>
> > 1. Views normally access jQuery via a different request method:
> > jQuery: (function() {
> > // the jQuery referenced inside here refers to the
> > object loaded by
> > the jQuery library
> > var jq = function(selector, context) {
> > //logger("request.jQuery(): " + selector +
> > this.event);
> > return jQuery.fn.init(selector, context ||
> > this.get_document());
> > };
> > jQuery.extend(jq, jQuery);
> > return jq;
> > })(),
>
> > Whenever I loaded ui from that method, the closures would get fun. I
> > can't remember exactly what caused what, but I struggled with
> > this.get_document being undefined, and the jQuery getting passed to
> > jQuery_UI being just the jQuery prototype...no fn property, etc.
>
> > 2. When I hack the sliders to work, eg correcting for the over writing
> > by cloning the original element and resetting it later, the handle
> > appears, but doesn't respond to mouse events or anything....so i guess
> > by work I mean that no exceptions occur. Still, when that occurs, then
> > reloading the page causes infinite recursion. I've tried only loading
> > jQuery_UI when jq("<div />").slider() raises an exception. No effect.
>
> > 3. I have to use jquery 1.2.6 because of aFirefoxextensionbug...or
> > something. Maybe it's worth testing the latest versions of both in
> > case that clears things up.
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.
