Top Menu

Jump to content
Home
    Modules
      • Projects
      • Activity
      • Work packages
      • Gantt charts
      • Calendars
      • Team planners
      • Boards
      • News
    • Getting started
    • Introduction video
      Welcome to OpenProject Community
      Get a quick overview of project management and team collaboration with OpenProject. You can restart this video from the help menu.

    • Help and support
    • Upgrade to Enterprise edition
    • User guides
    • Videos
    • Shortcuts
    • Community forum
    • Enterprise support

    • Additional resources
    • Data privacy and security policy
    • Digital accessibility (DE)
    • OpenProject website
    • Security alerts / Newsletter
    • OpenProject blog
    • Release notes
    • Report a bug
    • Development roadmap
    • Add and edit translations
    • API documentation
  • Sign in
      Forgot your password?

      or sign in with your existing account

      Google

Side Menu

  • Overview
  • Activity
    Activity
  • Roadmap
  • Work packages
    Work packages
  • Gantt charts
    Gantt charts
  • Calendars
    Calendars
  • Team planners
    Team planners
  • Boards
    Boards
  • News
  • Forums

Content

Development
  1. OpenProject
  2. Forums
  3. Development
  4. Manipulating the DOM with $(sel) instead of jQuery(sel)

Manipulating the DOM with $(sel) instead of jQuery(sel)

Added by Kiffin Gish over 8 years ago

I would like to use jquery in a plugin that I am writing.

As things are currently setup, I need to use the more cumbersome jQuery(sel) and would rather use $(sel) instead.

What is the standard way to use third party JavaScript libraries, and how can I specifically integrate jQuery into my plugin?


Replies (8)

RE: Manipulating the DOM with $(sel) instead of jQuery(sel) - Added by Jens Ulferts over 8 years ago

This has historic reasons but the reason should no longer exist.

The js functionality used to be implemented in prototype and thus $ was already taken. But as prototype has been removed, it should now be possible to change that. PRs welcome.

RE: Manipulating the DOM with $(sel) instead of jQuery(sel) - Added by Kiffin Gish over 8 years ago

There seem to be alot more dependencies on jQuery(sel) which depend on its presence. This makes things much more complicated than just adding gem 'rails-jquery' to the Gemfile and //= require jquery to the manifest. Any ideas on the best approach?

RE: Manipulating the DOM with $(sel) instead of jQuery(sel) - Added by Jens Ulferts over 8 years ago

If I understand the documentation correctly, jQuery with jQuery.noConflict() not set will listen to jQuery as well as $. So removing the code in OpenProject should be all right.

RE: Manipulating the DOM with $(sel) instead of jQuery(sel) - Added by Kiffin Gish over 8 years ago

As it turns out, removing the code in OpenProject is not necessary, because it has already been commented out in application.js.erb manifest:

//# require jquery_noconflict

So I solved the problem like this:

var $ = jQuery.noConflict();

$(document).ready(function() {

  $("#logo").hover(
    function enter() {
      $(this).attr("style", "border: 3px solid red;");
    },
    function leave() {
      $(this).removeAttr("style");
    }
  );
});

RE: Manipulating the DOM with $(sel) instead of jQuery(sel) - Added by Oliver Günther over 8 years ago

Hi Kiffin,

an alternative would simply be an anonymous function exposing $ in an anonymous function. Whichever you prefer.

(function($) {
  $('.foobar')...
})(jQuery);

Best,
Oliver

RE: Manipulating the DOM with $(sel) instead of jQuery(sel) - Added by Kiffin Gish over 8 years ago

That’s true, in fact more elegant. I was running with the jQuery.noConflict() suggestion and overlooked the more obvious.

RE: Manipulating the DOM with $(sel) instead of jQuery(sel) - Added by Jens Ulferts over 8 years ago

But if it is already commented out you will already be able to call jQuery via the $ directly, meaning you can already do

$('.foobar')...

without the wrapping if you choose to.

I tried it out in the console and it is working as expected.

Note to self - we should still remove the js file to avoid further confusion.

RE: Manipulating the DOM with $(sel) instead of jQuery(sel) - Added by Kiffin Gish over 8 years ago

Well, that was the original problem I had which was the reason for this thread. Namely, if I try:

$(document).ready(function() { ... });

I get the following error:

main.self.js?body=1:10 Uncaught ReferenceError: $ is not defined

Whereas, when I wrap it with:

(function($) {
  ...
})(jQuery);

Everything works just fine.

Yes indeed, typing $(...) works just fine in the debug console, but something is telling me that when my plugin is loaded, the jQuery stuff has not yet been initialized.

Could I be missing soemthing?

  • (1 - 8/8)
Loading...