Using jquery 2.2.2 in a grails project - javascript

I'm trying to change javascript library versions in a grails project to use compatible versions. We've added Angularjs 1.5.2 to the project. That requires jquery 2.1+ (https://docs.angularjs.org/misc/faq). We're currently using jquery 1.10.2, but 2.2.2 is the latest. The grails way to update this is to edit BuildConfig.groovy and run grails refresh-dependencies. HOWEVER, the grails jquery plugin only supports jquery up through 1.11.1. (https://grails.org/plugin/jquery) Is there a proper grails way to address this?
I'm using grails 2.2.5.

I applied #vahid's suggestion. First step was to download jquery and jquery-ui, and put the necessary files in place. For us, that was:
js/libs/jquery-1.10.2.min.js
js/libs/jquery-ui-1.10.4.custom.min.js
css/blitzer/jquery-ui.custom.css
Then, removed the grails-jquery plugin references from BuildConfig.groovy:
runtime ":jquery:1.10.2"
compile ":jquery-ui:1.10.4"
And added the jquery and jquery-ui modules to Config.groovy:
jquery {
resource url: 'js/libs/jquery-1.10.2.min.js'
}
'jquery-ui' {
resource url: 'js/libs/jquery-ui-1.10.4.custom.min.js'
resource url: 'css/blitzer/jquery-ui.custom.css'
}
The ticks around jquery-ui are essential. I removed our jquery-theme override as well.
The final step was to adjust the versions as needed.

Related

How to make use of an external Js file in .net core 2.1 and Angular 6

I am new to Angular 6 and .Net Core 2.1. I've created a some application but now I need to make use of jquery events. I have installed Jquery packages to node_modules as well.
Could anyone please help me!!
Thanks in advance
Even in the angular-cli.json file, I've added the jquery files and my custom js file.
But still not working.
Below are my configuration and code
Solution Structure
You will find here an example link
I would recommend to keep JQuery out of your Angular project. You have to understand how Angular 2+ works and you will see that there is no need for JQuery.
With JQuery you were selecting an element in the page and modify it but with Angular the UI changes based on a model property. It is another way of thinking about the UI.
You can read more about the differences between the two here link. I also tried to use JQuery when I began using Angular because of my previous experience but I learned that was a mistake.
if you want to use jQuery u will need to put the files in the wwwroot folder. You can link it from there.

How to use external js library functions in Angular 7 project?

We are creating one project in angular 7. We want to use jquery based library as image picker.
We have imported the library correctly as
import * as 'image-picker' from '..asset/image-picker.min.js'
Also it has been imported as script in index.js with correct path.
Now we are getting stuck about the correct use of this file in Typescript environment.
For example how to use the below example method of the above library in
Angular Module in component and templates.
You CANNOT use jquery based libs in Angular context.
It was clearly not a good practice with the old fashionned AngularJS 1.**, now it's not even possible.
EDIT :
According to this source, it's seem's possible.
But for me, it's clearly not a good idea to insist on using Jquery with Angular 7
I saw this library using jquery so
If you using external library you need to include script of that library in your website using script tag or if you using angular cli you need to edit your angular.json and include that script
then use it in your method
$("select").imagepicker()
You can go to my blog to read detail how to integrate third party library to angular here

Angular 1 js and materialize css

Can i use materialze's plugins like carousel and modal with jqlite(included in angular) instead of the full jquery? I want to build a site user plain js and angular, node js and mongodb.
You can include the full jQuery library with an Angular app in any HTML page. The order is important here though: include your script tag for jQuery first, then Angular.
The way that angular works is it first checks to see if jQuery is loaded on the page. If it is, then it will use it, otherwise it will use its self-provided jqlite.
The Angular Docs on the issues also warn about versioning issues:
Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with Angular but we don't guarantee that.

Bootstrap framework without jquery

I have requirement to develop a front end project. I am planning to use angular + bootstrap. I don't have to use jquery, but bootstrap javascript components require jquery. my question is,
1)Can we have bootstrap built on javacript.
2)Can we have bootstrap built on angular.
please provide related good documents on any above two related topics.
For angular project you can user UI Bootstrap which have bootstrap CSS file with a set of native AngularJS directives.It does not require jQuery or Bootstrap's Javascript.The only required dependencies are:
AngularJS
Angular-animate
Bootstrap CSS
Check it here
Have no worry, the internet is full of scripts and tutorials, native JavaScript is the coolest programing language ever! Far more powerful and requires almost zero maintenance on very long periods of time.
Also some features are even better.
If you are looking for Bootstrap without jQuery or vanilla Javascript for Bootstrap, you can use bootstrap.native
The Bootstrap plugins are jQuery plugins, so no, strictly speaking, you can't use them without jQuery. There is this project, however, which may help you.
When building out Angular projects, you should not add on the full jQuery library. jQlite is already included in Angular and this should be all the jQuery that is necessary.
Reference

How to disable resources of a grails plugin

I am working on a project which I have divided into several independent plugins. So like wise for each functionality I have a plugin which is integrated and can be re-used in another project.
So now I am using the plugin of my theme in development mode without packaging with grails.plugin.location.'MyThemePlugin' = "../MyThemePlugin"
All goes well till now but these is another plugin which I recently integrated and it has few same CSS and JS file names but of very old versions. So due to this problem my theme breaks and does not work.
So is there any way to disable the resource (css and js) files of this other plugin?
If there is no use of the css and js file of the new plugin then why don't you simply delete those files from plugin directory itself. Inline plugin editing seems should work.

Categories