Does Drupal 7.87 support JQuery 3.6.x - drupal-7

I am trying to update jQuery for Drupal 7.87 to version 3.6.x. The jQuery_update module (7.x-3.0-alpha5)installed and the highest JQuery version I can pick from the dropdown list is 3.3.
Does anyone know if Drupal 7.87 support JQuery 3.6.x? If yes, how can I upgrade it properly?
Thanks

The module jquery_update allows to use "recent" versions of jQuery within Drupal but does not provide the latest versions because the changes tend to break Drupal 7 core JS.
A solution is to "side load" the newer version using the module jQuery Multi :
jQuery Multi allows you to load an extra version of the jQuery library
in parallel to Drupal's version, without conflicting with Drupal's
version.
For instance, if you're loading jQuery-3.6.0, the alias will be jq360, and you can use it in your scripts by wrapping your code as follows :
(function($){
// Code here
// ....
})(jq360)

Related

Angular not working correctly with Meteor 1.3.1

I am following www.angular-meteor.com tutorial on a windows computer.
But when I run meteor in console I only see:
A blank screen besides socially...
So it seems like some angular packages does not work with Meteor 1.3.1.
Here is output from meteor list:
accounts-password 1.1.7 Password support for accounts
angular 1.3.9_2 Everything you need to use Angu...
angularui:angular-google-maps 2.3.2 angular-google-maps (official)
angularui:angular-ui-bootstrap 0.13.0 Native AngularJS (Angular) direc...
angularui:angular-ui-router 0.2.15 angular-ui-router (official): Fl...
angularutils:pagination 0.9.1_2 Magical automatic pagination fo...
check 1.1.3 Check whether a value matches a p...
dotansimha:accounts-ui-angular 0.0.4 AngularJS wrapper for Meteor's Ac...
email 1.0.11 Send email messages
es5-shim 4.5.9 Shims and polyfills to improve EC...
jquery 1.11.7 Manipulate the DOM using CSS sel...
less 2.5.7 Leaner CSS language
meteor-base 1.0.3 Packages that every Meteor app needs
mobile-experience 1.0.3 Packages for a great mobile user ...
mongo 1.1.6 Adaptor for using MongoDB and Min...
reactive-var 1.0.8 Reactive variable
standard-minifier-css 1.0.5 Standard css minifier used with M...
standard-minifier-js 1.0.5 Standard javascript minifiers use...
tmeasday:publish-counts 0.7.3 Publish the count of a cursor, in...
tracker 1.0.12 Dependency tracker to allow reac...
twbs:bootstrap 3.3.6 The most popular front-end framew...
For example angularui:angular-ui-router seems not be working. But it works with meteor 1.2 version.
Is there someone out there that have the same problem? Maybe a solution as well?
Best Regards
EDIT
Removing dotansimha:accounts-ui-angular resulted in that I can see the map and search box. But The app is still broken. No parties are shown, pagination does not work and so on... Any ideas how to fix it?
I think I got it working now:
meteor list
accounts-password 1.1.7 Password support for accounts
angular-meteor-auth 1.0.1 Angular-Meteor authentication module
angular-templates 1.0.2 Compile angular templates into th...
angular:angular 1.5.3_1 AngularJS (official) release. F...
angularui:angular-google-maps 2.3.2 angular-google-maps (official)
angularui:angular-ui-bootstrap 0.13.0 Native AngularJS (Angular) direc...
angularui:angular-ui-router 0.2.15 angular-ui-router (official): Fl...
angularutils:pagination 0.9.1_2 Magical automatic pagination fo...
check 1.1.3 Check whether a value matches a p...
dotansimha:accounts-ui-angular 0.0.4 AngularJS wrapper for Meteor's Ac...
email 1.0.11 Send email messages
es5-shim 4.5.9 Shims and polyfills to improve EC...
jquery 1.11.7 Manipulate the DOM using CSS sel...
less 2.5.7 Leaner CSS language
meteor-base 1.0.3 Packages that every Meteor app needs
mobile-experience 1.0.3 Packages for a great mobile user ...
modules 0.5.2 CommonJS module system
mongo 1.1.6 Adaptor for using MongoDB and Min...
pbastowski:angular-babel 1.3.2 Babel compiler and ng-annotate fo...
reactive-var 1.0.8 Reactive variable
standard-minifier-css 1.0.5 Standard css minifier used with M...
standard-minifier-js 1.0.5 Standard javascript minifiers use...
tmeasday:publish-counts 0.7.3 Publish the count of a cursor, in...
tracker 1.0.12 Dependency tracker to allow reac...
twbs:bootstrap 3.3.6 The most popular front-end framew...
So I do use accounts-ui-angular!
I followed this link
What I did was:
First:
Remove the angular meteor package you installed via atmosphere: meteor remove angular
Make sure you have the ecmascript package installed. If you had the atmosphere angular package installed previously you may have removed it after getting a notice that multiple compilers were trying to handle files with .js extension. So check out meteor list and if ecmascript isn't there do: meteor add ecmascript
Install angular and angular meteor via npm: npm install angular angular-meteor --save
List 'angular-meteor' as a module dependency for your main module: angular.module('myApp', ['angular-meteor']);
meteor remove ecmascript
meteor add modules (ecmascript implies modules so you have to add it manually if you remove ecma)
meteor add pbastowski:angular-babel
Note that I do not need to import angular in app.js (no import angular from 'angular'; or import 'angular-meteor';)
Now:
Hope that helps if someone have the same problem:)
I found that the problem is the incompatibility with this package:
meteor remove dotansimha:accounts-ui-angular
Don't forget to remove the dependency 'accounts.ui' on 'app.js'
Just removed and the result:
Possibly the problem is why somehow this package uses the "blaze-html-templates"

Does AngularJs work without bootstrap

I want to start using Angular, but i noticed all tutorials include bootstrap first lesson bootstrapping.. I'm not a big fan of grid systems and css frameworks so my question is can you use Angular without bootstrap or the bootstrap is required?
AngularJS has no dependencies on other libraries. It even includes a stripped-down version of jQuery, but it will use the full jQuery library if it's loaded before AngularJS.

Package conflict in meteor : Angular2 and Templating

I am in and out of a project with Meteor, trying to wrap my head around this framework (documentation is comparable to Ruby... just terrible and fragmented), and I get this error :
While determining active plugins:
error: conflict: two packages included in the app (barbatus:angular2 and
templating) are both trying to handle *.html
And this is my installed packages :
autopublish 1.0.4 (For prototyping only) Publish the entire d...
blaze-html-templates 1.0.1 Compile HTML templates into reactive UI wit...
ecmascript 0.1.5 Compiler plugin that supports ES2015+ in al...
es5-shim 4.1.13 Shims and polyfills to improve ECMAScript ...
flemay:less-autoprefixer 1.1.0 The dynamic stylesheet language + Autoprefixer
insecure 1.0.4 (For prototyping only) Allow all database w...
jquery 1.11.4 Manipulate the DOM using CSS selectors
meteor-base 1.0.1 Packages that every Meteor app needs
mobile-experience 1.0.1 Packages for a great mobile user experience
mongo 1.1.2 Adaptor for using MongoDB and Minimongo ove...
semantic:ui 2.1.4 Official Semantic UI Integration for Meteor
session 1.1.1 Session variable
standard-minifiers 1.0.1 Standard minifiers used with Meteor apps by...
tracker 1.0.9 Dependency tracker to allow reactive callbacks
urigo:angular2-meteor 0.2.0+ Angular2 and Meteor integration
Now, I know that barbatus:angular2 is used by urigo:angular2-meteor, but I'm unsure why it would conflict with templating (which is obviously required by something else... if not meteor-base itself.
How do I fix this?
** Edit **
This is my only .html file :
<head>
<title>larpdb</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
Basically, this is a brand new empty project; how can I avoid getting this error? Do I have to strictly not use <template> tags in my project?
In Meteor 1.2.0.2 you can use
> meteor remove blaze-html-templates
Changes to your project's package version selections:
blaze-html-templates removed from your project
caching-compiler removed from your project
caching-html-compiler removed from your project
templating removed from your project
templating-tools removed from your project
Then add the urigo:angular2-meteor package (must download from GitHub)
> meteor add urigo:angular2-meteor
In meteor .html file have templates only. If you are creating angular templates and giving same extension then at that time it will throw error. because in meteor only master file have html tag and if you adding different html file not having template tag then it will treat it as HTML file and add html tag in it while building.
so if you are creating templates for angular just rename it somefile.ng.html.
so that while meteor build it will don't have conflict.
meteor remove blaze-html-templates
meteor remove ecmascript
Run the following commands to remove meteor's default ecmascript package .
Now the app should run fine .

Any conflicts between UI-Bootstrap and Twitter Bootstrap?

Are there any conflicts between Angular UI-Bootstrap and Twitter Bootstrap?
I am trying to avoid using jQuery-UI with AngularJS if a more Angular-friendly UI package is available. I already started with Twitter Bootstrap, so I do not wish to unload Twitter Bootstrap.
No, there are no conflicts. Especially since ui-bootstrap is dependent on Twitter Bootstrap.
From the linked docs:
This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:
AngularJS (requires AngularJS 1.3.x, tested with 1.3.13). 0.12.0 is the last version of this library that supports AngularJS 1.2.x.
Bootstrap CSS (tested with version 3.1.1). This version of the library (0.13.0) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.
If you are going all in on Angular then stick with either AngularStrap or Angular UI Bootstrap, do not mix it with Twitter Bootstrap JS library. Both of the Angular projects mentioned utilize the Bootstrap CSS, but they completely replace the Bootstrap JS library, with pretty much all functionality included.
Apart from the unnecessary bloat to load both libraries, you'll end up with issues integrating the Bootstrap JS library with Angular for stuff like model binding.

Adding a Fuelux wizard to an Angular project

I'm reading https://github.com/ExactTarget/fuelux in order to get familiar with the Fuelux wizard, and how I can integrate it with my AngularJS project.
In the non-AMD section it says :
Non-AMD
If you'd prefer not to use AMD, simply add the loader script to the head tag of your page:
<script src="http://www.fuelcdn.com/fuelux/2.6.1/loader.min.js" type="text/javascript"> </script>
but something in jquery is conflicting with my angular routes.
I'm also using this as a guide, and adding the necessary css links and requirejs links; however the wizard does not render properly (as if it were missing the css styling).
wizard
UPDATE:
In my latest attempt, after downloading from https://github.com/ExactTarget/fuelux/tree/3.0.0-wip , I'm still getting the non-formatted wizard. Please see screen shot :
FuelUX 2.x is AMD only. The loader.js is a polyfill of sorts (almond.js- a minimal AMD API implementation) that allows AMD, just so you don't have to load require.js yourself, but it's still there.
The latest version FuelUX 3 is a WIP branch and is UMD (Universal Module Definition) which means it can be used with/without AMD via tags with only Bootstrap and JQuery as dependencies. You might try it.

Resources