Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

jQuery and jQuery UI Conflicts

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!

Tagged:

Answers

  • 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.

    grep is your friend.

  • @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.

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    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.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • x00x00 MVP
    edited February 2013

    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?

    grep is your friend.

  • I used jQuery UI - v1.10.0 also

    grep is your friend.

  • businessdadbusinessdad Stealth contributor MVP

    @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.

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

    grep is your friend.

  • businessdadbusinessdad Stealth contributor MVP

    @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.

  • 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?

  • GaiwecoorGaiwecoor New
    edited February 2013

    @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.

  • 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. :\

Sign In or Register to comment.