I'm trying to use ui.sortable in my Angular project and I keep getting this error element.sortable is not a function. I'm using Angular 1.6.3 and Webpack. I tried to load this library in several ways and none works.
require('jquery-ui/ui/core');
require('jquery-ui/ui/widget');
require('jquery-ui/ui/widgets/mouse');
require('jquery-ui/ui/widgets/sortable');
Earlier I was using require('jquery-ui-sortable-npm'); which has jQueryUI core and sortable pluging provided.
I'm using selectize which is also using jQueryUI sortable and it works just fine. Does anyone succeeded to make this work?
Related
I have a project in angularjs and I want to upgrade this project to Angular9.
The problem is most of the project uses jQuery features such as query-ui, selectors, change the dom, animations, bootstrap and more.
Say it may only my problem since I do not want to use jQuery after the upgrade, just to do stuff in the angular way. so I guess to convert jQuery to angular.
I wonder if there is a way to do that? or I need to go manually and remove the jQuery code to new one?
I know I can import jQuery to my project, but sometimes I use $('#some').innerHtml('bla') and this is not what I want to do in my new code.
What are the ideas or approaches should I consider and use?
I am trying to use Progressbar js in Liferay DXp custom plugin. It was working fine in 6.2 however it seems to be not working in DXP.
I have checked the standalone html with this plugin and it works fine however it is not working with DXP 7.0
I am getting
"Uncaught ReferenceError: ProgressBar is not defined"
error.
The file is well loaded on page but I still get this error
.
I have checked the version of Jquery and it's 2.1.4 in DXP 7.0. The plugin is well supported with this version of Jquery as it works fine on standalone html file.
Not sure if there is any issue with DXP while using third party js plugins as I have faced similar issue while using jquery cookie plugin.
Has anyone faced this issue or is there any way to use third party plugin in DXP?
The way I imported this pluigin in portlet is with annotation
"com.liferay.portlet.header-portlet-javascript=/js/progressbar.min.js",
Since it was not working so I have added it in theme and tried but no luck.
Could anyone help me with this, please.
The way I imported this pluigin in portlet is with annotation "com.liferay.portlet.header-portlet-javascript=/js/progressbar.min.js"
Check the generated markup, what actual URL is requested from the server, and if it's being served. I'm assuming that it's a 404 - for example because the file might be missing from your bundle, or in a different location.
If these hints don't help, please edit your question and create an MCVE
after a good hour of googling I still haven't found out how to properly include JQuery (or any normal JS file for that matter) into my AnuglarJS application, how would I go over this?
AngularJS provides jqLite, which is a jQuery-like library that provides a subset of jQuery functionality.But it doesnt work if you include jQuery in your app. You should check this out for how to integrating angular and jQuery
http://www.bennadel.com/blog/2752-using-jquery-instead-of-jqlite-in-angularjs.htm
I am getting an error when I try to call $("#myDiv").modal(). The error is:
Uncaught TypeError: undefined is not a function
I have seen this error come from a few different places, and modal() is called with different parameters in the various places. I've seen a lot of questions that say the solution is to include the jquery and bootstrap files in the right order. I find this confusing because I am using jquery and bootstrap npm modules, so I don't include their js files anywhere. How can I get this to work with npm modules?
This issued might be resolved. But I am adding the solution for future reference.
Try checking if the bootstarp jQuery library is included. This problem might be because of a situation where you also include a jQuery library into the web page along with the existing bootstrap jQuery library. Bootstrap will always reference the first included jQuery.
.modal() is included into bootstrap's jQuery. So try including that before.
I have php app where jQueryUI library version 1.8.4. is already implemented with jquery library version 1.4.2. But as per new requirements I need to implement some modules in kendo UI library. So I installed stable version of kendoUI and integrated with my code base but it was giving me some issues so I updated my jquery version to latest stable version. Since then I am having jquery object conflicts. So I think problem is related with jqueryUI.
So can we use both jQueryUI and KendoUI libraries at same time in same page?
I am getting error like this - $.sub is not a function. kendo.data.HierarchicalDataSource is not a constructor
Please anyone tell me how to resolve this issue?
#All,
Thanks for your help guys. My issues gets resolved. Now I have point my js to udpated CDN server jquery js, jqueryUI js and kendoUI js. By doing this I got conflicts like .live is not working and all but I have resolved them by using their alternatives.
Thanks once again.
Kendo depends on jQuery! Therefore, yes you can have both of them at the same page. Different versions of Kendo depends on different versions of jQuery.
Latest Kendo (such as 2013.1.319) works with jQuery 1.9. Upgrading your jQuery from 1.8.4 to 1.9 is quite fun (follow http://jquery.com/upgrade-guide/1.9/). If you are using some 3rd party js plugins/libs what are based on 1.8.4 in your project you might need to upgrade them too.