Angular JS - Adding a jquery plugin to jQlite - javascript

I need to do some dom traversal on a $element, but jQuery or jQlite don't do what I need out of the box so I need to use a jQuery plugin called closestChild.
https://github.com/lolmaus/jquery.closestchild/blob/master/jquery.closestchild.js
I have installed using bower and I'm trying to load it after angular.min.js in my script tags but still getting the following error.
Uncaught TypeError: Cannot read property 'fn' of undefined
So, I assume that jQlite that comes with Angular doesn't give you the $ to work with by default? Or am I just doing things in the wrong order?

No, angular.element (jqLite) doesn't export $ global variable. So you can't just use any jQuery plugin with Angular without jQuery. In some cases, you can workaround it if you manually create $ reference before including plugin like if it was jQuery. For example like this:
<script src="path-to-angular.js"></script>
<script>
window.$ = window.jQuery = angular.element;
window.$.fn = window.$.prototype;
</script>
<script src="path-to-jquery.plugin.js"></script>
However, in your case it will not work, because the plugin of interest uses $.fn.filter method, which jqLite doesn't implement. Here is the list of all available angular.element methods.
You can implement some of them by yourself and include before plugin..
However, I would recommend to actually use jQuery if you want to use jQuery plugins.

jQlite does not support jQuery plugins. In reality it is meant to be a light-weight selector tool -- not a heavy-weight tool that supports extending, like jQuery.
You have two options:
Use JavaScript to implement the functionality ( element.getElementBySelector('foo)[0] ).
Include jQuery in your project.
I would personally use option 1.

Related

In what cases or conditions jQuery.noConflict is needed?

I want to ask is there any practical reason where jQuery.noConflict function is needed utmost?
In layman terms I am asking, what is the reason behind the evolution of this function?
You are using another library which also using $.
You have to use multiple versions of jQuery, mostly because the
plugins depends on different version of jQuery.
The jQuery library and virtually all of its plugins are contained within the jQuery namespace. As a general rule, global objects are stored inside the jQuery namespace as well, so you shouldn't get a clash between jQuery and any other library (like prototype.js, MooTools, or YUI).
That said, there is one caveat: by default, jQuery uses $ as a shortcut for jQuery. Thus, if you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page and before you attempt to use jQuery in your page.
for E.g
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
you can read more here http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

How do you intergrate jquery library modules into your javascript framework using require js

I cloned the jquery library and tried to integrate it with my own JavaScript library without much success.
I do not need all the jquery functionality ,hence the need to only load the relevant jquery modules with the functionality i want.I have been able to load the core module (core.js) and have successfully utilized some of the functionality, however the functionality provided is limited in that i am unable to do chaining or even do simple stuff such as html element selection.Interestingly id selectors work perfectly fine, but element creation is not working.
Example code of what is working and not working.
define([
"../jquery/src/core",
"../jquery/src/selector",
],
function(
jqcore,
jqselector
){
//this works fine
var div_element = jqcore("#mydiv");
//This does not work ,i want to understand why this is not working
var body_element = jqcore("body");
//I would like to understand why i am not able to do this or what i should do for the code below to work
jqcore("p").append("<b>Appended text</b>");
})
I am using sizzle selector which i belive is being loaded corrently but i am not sure.
Are you sure you included the sizzle selector? (you claim you load it but I don't see it implemented in the code?)
See documentation
https://github.com/jquery/jquery (chapter modules)
I believe this paragraph describes the problem you are having:
sizzle: The Sizzle selector engine. When this module is excluded, it is replaced by a rudimentary selector engine based on the browser's querySelectorAll method that does not support jQuery selector extensions or enhanced semantics. See the selector-native.js file for details.
That would explain the basic selector support.

jQuery and AngularJS not working together

I am using RequireJS and Angular but they are not working together in my set up. Things work fine when jQuery version is 1.7.2. However I wanted to use jQuery 1.8.1 and jQuery UI and angular app even fails to initialize the my main module with this.
Here is the problem:
Case sensitive variables: jQuery and jquery. In jquery 1.8.1 source code, towards the end they have defined window.jQuery. Where as in earlier version 1.7.2 had window.jquery defined.
Since I want to use jQuery UI in my app included the file jquery-ui-1.8.23.custom.min.js. After including it I got the error that "jQuery" is undefined.
So, I decided to upgrade my jQuery version and downloaded the said 1.8.1 version. Towards the end of the jQuery source code I could see that this version defined window.jQuery (correct case as needed by jQuery UI).
I updated my require-jquery JS with latest version from James Burke github project and updated it with jquery 1.8.1.
But including the updated jQuery/RequireJS project, angularjs has stopped working.
I get this error in Chrome console:
If I revert to 1.7.2 angular works. Or if I edit jQuery file to define window.jquery instead of window.jQuery (note the case) it again works. But that means jQuery UI won't.
Using jQuery's noConflict method is a more elegant and future proof solution to this problem.
View extensive documentation on http://api.jquery.com/jQuery.noConflict/
UPDATE (example from the link):
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
I fixed this solution by removing the line from jQuery source which made $ and jQuery the global variables. This line looks something like window.jQuery = window.$ = jQuery.
If you are also using AngularJS with RequireJS and are facing similar problem, remove these lines.
Furthermore, you will have to use jqueryui-amd in your project. Download the utility from the Github page and it will convert jQuery UI script to AMD modules.
Using the AngularJS feature called 'directives' to extend HTML elements I was able to use jQuery UI components in reusable and sane manner.
I've to say that I've hated and loved AngularJS while working on my project, sometimes even letting everybody on Twitter know that I hate AngularJS. However, after having implemented and finished two projects over the last month I have fairly good idea on when to use it and when not to use it.
Here is one jsFiddle I've created to demonstrate the use of jQuery UI with AngularJS:
http://jsfiddle.net/samunplugged/gMyfE/2/
Easily fixed this after my two days try..
When try
Include the particular Slider Jquery files to the view.html directly. remove jquery from index.html file

Using ReqiureJS to have local instances of 3rd party libraries

My application's JavaScript uses jQuery and jQuery plugins and running in "hostile" environment I have no control over (this is PHP extension for eCommerce platform). Thus no way to determine whether my jQuery code will be executed before someone will attach his instance of jQuery/plugins (introduced by other extension) or after this or someone will load jQuery dynamically after page rendered.
Basically the problem is that other extension could use jQuery (with plugins) also and just connecting jQuery with tag will not work.
I have a strong feeling that RequireJS might help me to load needed version of jQuery as far as particular versions of jQuery plugins into the encapsulated scope without polluting global scope (so other extensions will still function properly). Then I'll wrap all my code to "require" statements and it will run using it's own set of jQuery and plugins. I tried this and it kind of works (have not tested this in production environment though) but in some weird way. Seems like this question is kind of relevant to problems I have. Also answer suggesting to use AMD-compatible version of jQuery. But what about plugins? I don't think all plugins I use have such versions.
So questions:
Could RequireJS be used to cover such use case (running jQuery+plugins in undefined environment)? If RequireJS could be used there then any example code or explanation of how to do this properly will be greatly appreciated.
If there is no way to cover this with RequireJS what do you think would be best approach to handle issue?
Yes, I believe RequireJS can help you out here. To my knowledge you'll have to do some legwork, though. Take a look at the source of the (as of 2012-08-19) latest jQuery: link. At the bottom you can see that window.jQuery is being set, defining jQuery and $. The define call for AMD loaders happens after that, so jQuery is in the global scope no matter what. What you want to do is guarantee that your own version of jQuery and plugins stay isolated from other jQuery instances and plugins, correct?
Place your custom jQuery and plugins into their own directory (let's call it "jqcustom") and use that directory when specifying dependencies in your scripts' define calls. You'll want to modify your version of jQuery by wrapping it in a define call and returning the jQuery object at the very bottom, taking out jQuery's window.jQuery and window.$ assignments as well as its default define call in the process (these are both at the bottom, remember). Then you'll need to wrap all of your plugins in define calls and specify your own version of jQuery as the dependency. Example:
define(['jqcustom/jquery'], function(jQuery) {
//inside this method 'jQuery' will override any predefined global window.jQuery
//in case any plugins use the $ variable, define that locally too
var $ = jQuery;
//... plugin code ...
});
If you use RequireJS' optimizer, it can do the wrapping of the plugins for you with its shim config options. jQuery plugins work by adding methods to jQuery's prototype object, so I believe as long as you pass the same jQuery (your custom jqcustom/jquery one) to every plugin with your define wrapping, the plugins' extensions will all be set on the same object and be accessible in subsequent define calls specifying your custom jQuery or custom plugins as dependencies. Good luck!

Combining Scriptaculous and jQuery in a Rails application

I've got the following situation
A rails application that makes use of rjs / Scriptaculous to offer AJAX functionality
Lot of nice javascript written using jQuery (for a separate application)
I want to combine the two and use my jQuery based functionality in my Rails application, but I'm worried about jQuery and Scriptaculous clashing (they both define the $() function, etc).
What is my easiest option to bring the two together? Thanks!
jQuery.noConflict();
Then use jQuery instead of $ to refer to jQuery. e.g.,
jQuery('div.foo').doSomething()
If you need to adapt jQuery code that uses $, you can surround it with this:
(function($) {
...your code here...
})(jQuery);
I believe it's jQuery.noConflict().
You can call it standalone like this:
jQuery.noConflict();
jQuery('div').hide();
Or you can assign it to another variable of your choosing:
var $j = jQuery.noConflict();
$j('div').hide();
Or you can keep using jQuery's $ function inside a block like this:
jQuery.noConflict();
// Put all your code in your document ready area
jQuery(document).ready(function($){
// Do jQuery stuff using $
$("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
For more information, see Using jQuery with Other Libraries in the jQuery documentation.
jRails is a drop-in replacement for scriptaculous/prototype in Rails using the jQuery library, it does exactly what you're looking for.

Categories