jQuery and jQuery UI Conflicts

Gaiwecoor

Sorry if this has already been answered, but my search-fu is failing me.

I'm currently working on a plugin that makes heavy use of jQuery UI with drag & drop, tooltips, and dialogs. If I use my plugin to pull in the jQuery UI files, it won't work with the jQuery.js included in default Vanilla (version 1.6.2), although it claims to be compatible with version 1.6+.

If I use my plugin to pull in the current version of jQuery (v. 1.9.1), all of my scripts work perfectly. Functionality of core Vanilla and and other plugins, however, break. (Notifications fading and ButtonBar are good examples - they just won't work when I load the new version of jQuery.)

I'm pretty new to writing plugins, so any help here would be greatly appreciated. I'm just trying to get pointed in the right direction.

Thanks!

x00

There is nothing wrong with drag and drop. I've used sortable, droppable, etc Tooltip has been around for least a few years and not exactly hard to replicate, again with dialogue.

Why you you make use of vanillas own dialogues? At least then it is fairly consistent. I'm talking about the popups not the notifications.

Gaiwecoor

@x00 - If it's working for you, it must be something with my installation, then. Any time I try to include the UI scripts without replacing jQuery.js, I get these errors (as reported by Chrome):

Uncaught TypeError: Cannot read property 'length' of undefined jquery.js:16 e.extend.each jquery.js:16 e.widget jquery-ui-1.10.0.custom.min.js:6 (anonymous function) jquery-ui-1.10.0.custom.min.js:6 (anonymous function) jquery-ui-1.10.0.custom.min.js:6 Uncaught TypeError: Object [object Object] has no method 'draggable' MyPluginJS.js:17 (anonymous function) MyPluginJS.js:17 e.resolveWith jquery.js:16 w jquery.js:18 d jquery.js:18

I suppose I'll just have to keep working at it.

As far as Vanilla's popups, I'm just not very familiar with them yet. I was hoping to be able to keep things within jQuery UI for conisistency on the plugin.

Kasper

Rule of thumb: Always use the jQuery version bundled with Vanilla. If you must use another one, anything beyond 1.7.2 will break the jQuery UI widgets - you could try replacing these though, it might work.

x00

what is your code and how are you including ui in vanilla?

Daggable is ages old should be no problem, what object are you trying to make dragable?

did you remember to include it in you ui?

x00

I used jQuery UI - v1.10.0 also

businessdad

@x00 said:
I used jQuery UI - v1.10.0 also

I also used jQuery UI 1.10 in my PostScheduler plugin, and it doesn't seem to break anything. I had to use a separate UI library because the one provided with Vanilla doesn't include some of the components I needed.

x00

Well it is prudent to serve only what you need when you need it.

businessdad

@x00 said:
Well it is prudent to serve only what you need when you need it.

I agree. In fact, I replace the jQuery UI only on the Write/Edit Discussion form.

Gaiwecoor

All - thanks for the responses.

@x00 said:
what is your code and how are you including ui in vanilla?

Daggable is ages old should be no problem, what object are you trying to make dragable?

did you remember to include it in you ui?

I'm including it like so:

$Sender->AddJsFile($this->GetResource('js/jquery-ui-1.10.0.custom.min.js', FALSE, FALSE));

Yes, I'm certain Draggable is included. Like I said before, it works when I include jQuery 1.9.0 first, but doesn't work when I just use Vanilla's default jQuery. When using the default jQuery, it throws those errors I mentioned above.

As far as how it's being used, it's something like-a so:

$('<img src="**SourceImage**" id="_imageId_" class="**DraggableClass**" />').appendTo("#**ContainerId**").draggable({ containment: "parent", helper: "clone", opacity: 0.5, revert: true, revertDuration: false, stop: function( event, ui ) { $.post( "**update URL**", { "imageId" : this.id, "updateReq" : "Location", "x" : ui.position.left, "y" : ui.position.top }, function(data) { $("#**imageId**").animate({ "left": data.Location.x+"px", "top": data.Location.y+"px" }); } ); } });

I'm putting the image in the container, making it draggable. Once the user stops dragging, the stop event sends the location to an update script, saving the location to which it was dragged. The update script returns those same coordinates, so the image is moved to the new saved location once everything is updated.

Thoughts?

vrijvlinder

This might shed some light on the conflict:

http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Gaiwecoor

@vrijvlinder - That almost does it!

I'm running the plugin when the user views the list of discussions in a category, as well as when viewing discussions. Using jQuery.noConflict(); makes it work when viewing categories; it still breaks when viewing discussions.

Gaiwecoor

Ah - never mind that last post. It was always behaving when viewing categories. It only had problems when viewing a discussion!

That ... only confuses me more.