I have some jquery code using $ in my controller. When I include jquery in the page, then it works fine but when I remove jQuery then I get following error:
ReferenceError: $ is not defined
I read online that jquery has inbuilt small footprint jquery named jQlite then why I get the error:
$('.scrollProductPicker , .scrollTailoredSupport').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
return false;
});
in Angular JS angular.element is used as an alias for $ or "JQuery", which is part of jqlite and hence if you are using $ directly you need to add the reference of jQuery. more details you can find at this link Angular JS documentation
Looking up elements via selectors is not supported by jqLite.
jLite is avaiable here angular.element.
So you cannot do this:
angular.element("body"); //DOES NOT WORK!
However, you can do:
angular.element(document.body); //DOES WORK!
jLite has just a sub set of functions from jQuery.
#Ramesh & #ThiagoPXP has given the correct answers. But you can still make full use of Angular to select any elements like so:
angular.element(document.querySelectorAll("div.foo"));
// or
angular.element(document.querySelector("#my-page ul.bar"));
You can make your code simpler by registering them as methods in Angular:
angular.findAll = function(selector) {
return angular.element(document.querySelectorAll(selector));
}
And then you can write easily as:
angular.findAll("div.foo");
// or
angular.findAll("#my-page ul.bar");
Or simpler (to use syntax like jQuery):
window.$ = function(selector) {
return angular.element(document.querySelectorAll(selector));
}
$("#my-page ul.bar") // will work
But, if you do not include jQuery, Angular will use a small version of jQuery i.e. jqlite which will not have every method available as jQuery.
This is definitely good. but I want that smooth scroll feature. Couldn't use angular-smoothscroll directive as the link is outside of my angular app and the target anchor is inside the angular app. I ended up with using vanilla javascipt for smooth scroll
Related
I have the following functional (in html) jsfiddle:
http://jsfiddle.net/pmpvLjuq/1/
I've found that in order to be functional in Wordpress too, should be used in jQuery's noConflict mode. In wp codex I've found this section:
At this point, I'm not so sure if I understand the global term in these circumstances. Should I replace all the $ signs with jQuery ?
What I've done without error in the console (but I'm concerned) also working in wp pages it's here: http://jsfiddle.net/8r9rcft2/2/
In other words, in these particular cases should I still replace the $ mark(?)
line 15
$links = $(".pagedMenu li"), will be jQuerylinks = jQuery(".pagedMenu li"),(?)
line 16
count = $links.length, will be count = jQuerylinks.length, (?)
line
The same for lines 25,26,26, ect.
Can I have your prepared for wordpress jsfiddle in jQuery's noConflict mode in order to have the whole picture of this process please?
Can you please confirm, as a rule of thumb, if I dont receive any error in the browser console that means everything is fine in the code? Thanks
I always used jQuery like this in wordpress and it's working for me I hop this is working for you.
(function($){
$(document).ready(function(){
// write code here
});
// or also you can write jquery code like this
jQuery(document).ready(function(){
// write code here
});
})(jQuery);
I always prefer below method because it always separate jquery libraries and never conflict and it is one of recommended method of jquery.
Its just a example. I mostly used it for smooth scrooling.
$scroll= jQuery.noConflict();
$scroll('a').click(function(){
$scroll('html, body').animate({
scrollTop: $scroll( $scroll(this).attr('href') ).offset().top
}, 1000);
return false;
});
I am developing a site using Joomla 2.5 and since I'm going to be handing it off to a client who is less than code savvy, I don't want to have to make them try to remember how to add class=hyphenate to every <p> when they add / update content.
I'm trying to use JQuery to do it but it doesn't seem to be working. Here is my code that should add the class:
<script type="text/javascript">
$("p").addClass("hyphenate");
</script>
Any input / help is - as always - appreciated!
Thanks,
Cynthia
If your script tag is placed before the p elements, you need to wait for the document to be ready - like this:
$(document).ready(function(){
$("p").addClass("hyphenate");
});
Shorthand version:
$(function(){
$("p").addClass("hyphenate");
});
Sidenote: when mixing libraries, global variables (like the $) can get out of hand. So make your own scope, ensuring that the $ is jQuery:
(function($){ // $ = jQuery
$(function(){
$("p").addClass("hyphenate");
});
})(jQuery);
Also your Jquery May Conflict with Joomla Mootools, to overcome you can use JQuery noConflict
var JQ=jQuery.noConflict();
JQ(document).ready(function(){
JQ("p").addClass("hyphenate");
});
I am working in a large site that has 2 conflicting jquery plugins included for doing autocmplete.
1) jquery.autocomplete.js (not part of jquery ui) that does :
$.fn.extend({
autocomplete: function ...
2) jquery.ui.autocomplete.js (from the latest jquery ui library), that also uses the autocomplete keyword.
$.widget( "ui.autocomplete", { ...
Is there a way to specify that i am using only the second, jquery.ui widget
when calling
$( "#tags" ).autocomplete ...
without changing the 2 files?
As the second autocomplete is using the $.Widget method of registering itself with jQuery it'll be easiest to change the behaviour of the in-house one.
You won't be able to load both of them without making some sort of change to the jQuery object between the two script loads because they'll just conflict with (or overwrite) each other.
I would try this:
<script src="jquery.autocomplete.js"> </script>
<script>
// rename the local copy of $.fn.autocomplete
$.fn.ourautocomplete = $.fn.autocomplete;
delete $.fn.autocomplete;
</script>
<script src="jquery-ui.autocomplete.js"> </script>
Which will then make:
$().autocomplete()
use the jQuery UI version, and
$().ourautocomplete()
use your local version.
I tried to do it with the tabs function of jQuery UI, it should work the same for you.
A function is technically a js object, so you could simply rename it :
$.fn.tabs2 = $.fn.tabs;
delete $.fn.tabs;
$("#tabz").tabs2({});
Hope that helps!
Edit
Like Alnitak suggested, you also need to delete the previous function's name.
Also, I think .fn is required.
I've got a simple form in a page that is loading Mootools and JQuery. JQuery is in no conflict mode, which seems like it ought to cause no problems.
There's a form element called "name"--
<input class="required" id="sendname" name="sendname" value="">
And I'm trying to attach a click event to it using Mootools to update something else when the name box is clicked:
$('sendname').addEvent('click', function(e){
// do stuff.
});
The problem is that the click event never gets added.
This error appears on load:
Uncaught TypeError: Cannot call method 'addEvent' of null
When I try to interact with the element in a js console, I get the following error:
> $('sendname').setProperty('value', 'test');
TypeError: Object sendname has no method 'setProperty'</strike>
EDIT: the previous was fixed by loading a newer Mootools. However, the click event still isn't functioning properly, though it throws no errors or warning.
This code works fine in almost any situation I've used it in. I assume there's some issue with jQuery conflicting, but the fact that the $ notation works seems to confirm that noConflict mode is operational. Any ideas?
You are targetting the element wrongly... I think this has nothing to do with a possible conflict.
In this case you need to add the hash for an id or a period for a class, like this:
$('#sendname').addEvent('click', function(e){
// do stuff.
});
Notice the # in #sendname
MooTools has Dollar Safe mode that automatically releases the $ to other libs as long as MooTools is loaded last.
If Dollar Safe mode is active, you need to use:
document.id('SomeElementID').someMethod()
What is happening in the example you are giving, is that you're using jQuery to select the element, and a MooTools method on the result. The thing is, jQuery returns the jQuery object which has no such 'addEvent' method on it. MooTools works on the actual elements so you need to select them with a MooTools query method first: $ == document.id or $$ == document.search
You can cache document.id to a var for convenience if you want:
var $M = document.id;
$M('sendname').addEvent(...)
As described in the comments to the OP, the issue was the load-order of the jQuery/Mootools scripts. The jQuery noConflict was being loaded too late, and causing problems. Please see jsfiddle -- http://jsfiddle.net/uSwzL/1/
Without any problem even loading jquery.js after other $ based library loaded:
<script>$=function(){alert('hell');}</script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$.noConflict();
$();
alert(jQuery.trim(' hello '));
</script>
Even in php framework html template:
<script>
function on_doc_ready()
{jQuery(function($)
{$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
}
);
}
function load_jquery_ui()
{var s2=document.createElement('scr'+'ipt');
s2.setAttribute('onload', 'on_doc_ready();');
s2.src='/app/idm/statics/jQuery/js/jquery-ui-1.10.0.custom.min.js';
document.getElementsByTagName('head')[0].appendChild(s2);
}
function load_jquery_after_mootools()
{var s1=document.createElement('scr'+'ipt');
s1.src='/app/idm/statics/jQuery/js/jquery-1.9.0.js';
s1.setAttribute('onload', '$.noConflict();load_jquery_ui();');
document.getElementsByTagName('head')[0].appendChild(s1);
}
load_jquery_after_mootools();
<script>
I've implemented autocomplete on an input field, but the box does not show up and firebug returns "this.source is not a function". I've used autocomplete on other fields of the same page without any problems. (two textarea's).
I'm using the following code to debug, same effect if I run from script file or Firebug command line.
var fakedata = ['test1','test2','test3','test4','ietsanders'];
$("#omschrijving").autocomplete(fakedata);
running jquery 1.4.2 and jquery ui 1.8.2, both minified versions.
Does anyone have an idea how autocomplete works fine on the textareas but causes this malfunctioning on inputs?
Error & Stack trace:
this.source is not a function
http://facturatie.autodealers.nl/dev/resources/js/jquery-ui-1.8.2.custom.min.js
Line 570
close(Object { name="a"})jquery....min.js (regel 570)
close(Object { name="a"}, Object { name="c"})jquery....min.js (regel 570)
response()
Answer is that the first parameter of the autocomplete should be an object containing the "source" property. This works
var fakedata = ['test1','test2','test3','test4','ietsanders'];
$("#omschrijving").autocomplete({source:fakedata});
If you were trying to use autocomplete from http://www.devbridge.com/projects/autocomplete/jquery/#demo, it now collides with the autocomplete method in jQuery UI. I had the same problem and later noticed that I could just use the jQuery UI implementation.
(NOTE: It appears that this page's documentation is wrong: http://docs.jquery.com/Plugins/Autocomplete#Setup)
If you use it with jQuery UI library it also has plugin named autocomplete. In this case you can use plugin alias devbridgeAutocomplete:
$('.autocomplete').devbridgeAutocomplete({ ... });
This solve the problem with jQuery UI collision
As Shelton stated, the version from devbridge.com (1.1.3) collides with jQuery UI (1.8.4). Got it working by making sure the devbridge version loads after jQuery UI's version.
Had similar problem for tagedit/autocomplete. It seems you also want to disable the autocomplete. Setting the source to false avoids these errors.
Solution:
options.autocompleteOptions.source = false;
Search at the end of jquery.autocomplete.js the following section:
Create chainable jQuery plugin:
$.fn.devbridgeAutocomplete = function (options, args) {....
This devbridgeAutocomplete is an alternative plugin to access to the same functionality using this lines:
if (!$.fn.autocomplete) {
$.fn.autocomplete = $.fn.devbridgeAutocomplete;
}
So.. you can use devbridgeAutocomplete instead of autocomplete or any name by changing this $.fn.devbridgeAutocomplete
in my case I had a second import of jquery which I didn't realize.
Something like:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.27/jquery.autocomplete.min.js"></script>
// More code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
So be sure to import the autocomplete script after you initialized jquery.