In APEX pages that have a text field with autocomplete, $.fn.autocomplete is overridden by a totally different function that integrates APEX functionality.
jQuery UI is loaded, but overridden.
How can I use the jQuery UI version?
To avoid conflict between different jqueries having different versions use noConflict() method which returns a reference to jQuery, that you can save in a variable.Please check documentation https://api.jquery.com/jquery.noconflict/
Hope this will help you.
Related
Context: Trying to use jquery ui plugins (tabs and dialog) in a primefaces application directly from javascript (due to a certain requirement).
Problem: Getting 'length undefined' and 'undefined not a function' errors on the calls. More specifically, $("#id").tabs() is throwing the error.
What I did: search in stackoverflow; checked $.fn.* and $.ui.* in the console; surprisingly a lot of ui plugins are available (datepicker, droppable, selectable) but dialog and tabs seem to be missing. $.ui.version is 1.11.3. I tried using outputScript and directly <script> tags to include jquery ui, but none seemed to include these plugins; tried noConflict.
Additional info: It worked at some point intermittently.. not sure what caused it to work and what is preventing it from working now. Spent a lot of time troubleshooting this.
Advance thanks for your time and shall drop additional info if required.
PrimeFaces contains a customized (subset) of the jQuery-UI components. The others have to be added by you. And make sure you use them from a compatible version. Compatible with the jQuery version that PrimeFaces uses.
Including them should be done like you normally would include separate jquery-ui components or jquery-ui compatible ones by normally loading them via a javascript tag
I have this website (in Hebrew): http://www.iping.co.il (if you could have a look at it maybe with google translate and see what it does it could be great but not a must).
It basically a website that shows your IP, and gives you a set of tools (like ping, whois check, open port checks...).
I've built it a while back and I was using jQuery and jQuery UI to do all the work (like opening dialogs, call the server, change the DOM, show a progress bar...).
Now I'm working on rebuilding it - I'm rebuilding using ASP.NET MVC 5, HTML5 and Bootstrap3. I figured it's a great little website to test new things I've been reading about lately. And one of those things I would like to try and implement (after reading much about) is AngularJS.
As far as I know, AngularJS is not meant to change the DOM directly, but use directives and 2 way bindings to do so.
I have a lot of code, and plugins that I use that uses jQuery and jQuery UI to (for example the dialogs, the progress bar and so on... things that I haven't figured out how to do with AngularJS). It seems that if I use the jQueryUI progress bar and update it from from AngularJS that I'm breaking some rules here and that it's probably dirty and not the way it should be written.
So my question is, what is the correct way to work when and build a rich UI when using AngularJS? is jQuery and jQueryUI even still relevant? if so, is there a correct way to use them (maybe DI somehow?)?
I've searched and found something called AngularJS UI - but it's not as rich as jQueryUI.
Thank you
Using plugins within directives is fairly simple in concept.
<div my-directive></div>
Following is a very minimialistic directive with just enough code to initialize a plugin. The returned function is equivalent to link in a more defined directive
angular.module('myApp').directive('myDirective',function(/* dependencies*/){
/* element is a jQuery object when jQuery is included in page before angular.js*/
return function(scope,element,attrs){
/* can use attributes or scope to pass options to plugin if needed*/
element.someJqueryPlugin();
}
});
This would be equivalent to writing in jQuery only:
$(function(){
$('[my-directive]').someJqueryPlugin();
});
If you want to use AngularJS and Bootstrap I suggest you take a look at these directives:
http://angular-ui.github.io/bootstrap/
Once you load the modules, you can set up say a progress bar this way:
<progressbar max="max" value="dynamic">
<span style="color:black; white-space:nowrap;">{{dynamic}} / {{max}}</span>
</progressbar>
You shouldn't even need to include JQuery if you only need the Bootstrap components.
I am using jQuery and Dojo widget on same JSP page but getting this issue,
Dojo part is working fine until I click on jquery based dropdown, as soon as I click jQuery-Dropdown, dojo based dropdown stops working.
I have searched a lot and tried following to resolve this issue but no use
Has anybody used Dojo and JQuery in the same project?
If I use
$.noConflict(true);
jquery dropdown stops working after one click, which means on first click it opens but then is not closed and not do anything else.
all the help would highly be appreciated.
Note: This is the very first time I am using Dojo and jquery.
EDIT: I used closure as well something like
(function($) {
var jQuery = $.noconflict(true);
var $ = jQuery;
})(jQuery);
but it also didnt help.
Please tell me how to make Dojo dropdown keep working even after Jquery-dropdown clicked.
If it helps there is another question regarding how to use jquery with dojo in the same project, it gives an example of the dojoConfig and talks about how to import jquery using AMD.
jQuery / Dojo - How do I use jQuery with Dojo toolkit
What are the main differences between a Jquery Widget and a Jquery Plugin.
Mainly:
What purposes do they serve
Is one better than another or do they both have their place in the jquery world
What is an example where I would want to use one over another
What is an example if any where either would be a fine solution
What is an example of a widely used widget and a widely used plugin
I've never heard of a jQuery widget. I imagine some people might use the term to describe a... widget... that has been made with jQuery. Certainly there are widgets in jQuery UI, for example. It's an odd question.
A widget is a widget (always includes a visual element, sometimes includes reusable functionality), and can be a subset of a plugin or a plugin in and of itself.
A plugin extends jQuery directly and may or may not have a visual component.
Difference between jQuery Widget and plugin is state.
please see details on it here
I am trying to use FormCheck for MooTools to validate a basic contact form I am planning to build. The problem is I can't seem to set up the script to work at all =(
If anyone knows about FormCheck or MooTools and can add any pointers they would all be greatly recieved.
My website is here: http://ryanis.me/
You are using jquery AND mootools on the same page? Why would you do that, it's a bad practice and bad form to stuff your users for two frameworks for what is a small page without anything complex. that aside, are you using the noconflict mode in either framework (note that this is only available since mootools 1.2.3 and requires some changes in the source code of the plugins, probably better off namespacing jquery)
first of all, you have a mootools domready function then you do inline js on the body tag onLoad...
then at the bottom of the source, you try the mootools domready again...
then you embed an accordion script (something that mootools can have built in as part of mootools-more). not sure what you use jquery for but you really need to structure your page better and pick a single framework.
the error you are getting in the formcheck js implies that either this.form is undefined (at time of evaluation $("contactform") was not available or that this.form.getElements() is not a valid method, which would imply that the mootools element prototype is not working. once again, are you using the noconflict mode?
it really needs refactoring and rethinking...
If you are using jQuery you may want to check out various jQuery plugins that will do form validation for you. The validation plugin works pretty well. If you want to use jQuery and MooTools together, you probably need to make sure that you are using jQuery in noConflict mode.