Develop Reference

Drupal 8 Jquery conflict once logged in

I'm using Foundation to develop a Drupal theme and, obviously, it requires jQuery.
When I'm logged out from Drupal everything's perfect.
Once I log in, Drupal loads a bunch of libraries among which its own jQuery.
This causes a conflict and breaks the site.
Uncaught TypeError: $ is not a function
How can I solve this?

I had a similar issue with core jQuery. I used the below code for replacing the version with the one i wanted
my_theme.theme
function my_theme_js_alter(&$javascript, \Drupal\Core\Asset\AttachedAssetsInterface $assets) {
// Swap out jQuery to use an updated version of the library.
$javascript['core/assets/vendor/jquery/jquery.js']['data'] = drupal_get_path('theme', 'my_theme') . '/script/jquery-2.2.4.js';
$javascript['core/assets/vendor/jquery/jquery.min.js']['data'] = drupal_get_path('theme', 'my_theme') . '/script/jquery-2.2.4.min.js';
}
Then used the jquery as dependency in libraries
my_theme.libraries.yml
web-styling:
css:
theme:
css/jquery.fancybox.min.css: {}
css/jquery.mCustomScrollbar.min.css: {}
js:
script/jquery.fancybox.min.js: {}
script/jquery.mCustomScrollbar.concat.min.js: {}
dependencies:
- core/jquery
Hope it will help

Vaadin 8 Html Imports Javascript

I am trying to use Vaadin 8 's "Html Import" feature
i followed instructions here : What's New In Vaadin 8
you can check it at 10th feature.
i am also sure that i installed both polymer-cli and bower.As GameCard creator mantioned at his own github.
But when run the application "the cards" are loading but not the way as it should.Mines have no flipping animation and kind a looks bad.
Screenshot :
Update After Gerald's Solution.
Finally Works with the Right Version of Polymer.

Seems to be a problem with the game-card element and the latest version of Polymer. I opened an issue on GitHub. Try with the version I used when I developed the demo. Find it here. Just replace your bower_components directory with the one in my demo.

initialize rank and symbol in different order (set rank first):
GameCard = function () {
var element = this.getElement();
this.setCard = function (symbol, rank) {
element.set("rank", rank);
element.set("symbol", symbol);
};
};

Setting up JSFiddle with CoffeeScript + React?

How can I set up JSFiddle to work with CoffeeScript and React?
I would like to code React examples using CoffeeScript and expect it to run.
I've tried setting the language to CoffeeScript on the left sidebar, and including the React libs, but that does not work.
Any pointers on how I could get Coffee+React to work with JSFiddle?

From <script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>, which is included in the playground:
(function() {
var tag = document.querySelector(
'script[type="application/javascript;version=1.7"]'
);
if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
}
tag.setAttribute('type', 'text/jsx;harmony=true');
tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
})();
The reason is that you are using the playground with jsx, and as FB restricted the setting to JS 1.7 I guess they are using Babel to compile it down to js.
So if you use the non-jsx link, and change the syntax to Coffee and modify the JS/CS file, you are good to go.
Here is a working copy: https://jsfiddle.net/9gnkLgex/

Not able to get value using: this.$("#{INPUT_ELEMENT_ID}").val() in JS Framework

Generally, we can use to get INPUT_ELEMENT_ID value using JQuery as:
$("#{INPUT_ELEMENT_ID}").val();
Which is differ from this code: this.$("#{INPUT_ELEMENT_ID}").val(); or same to above line of code.
Reason to post this question:
I wrote Unit Testing for my backbone application using Jamine.js framework for code coverage.
If my Backbone application's view normally has code: $("#{INPUT_ELEMENT_ID}").val();, then I could easily check the INPUT_ELEMENT_ID value.
But If my application's view code has code: this.$("#{INPUT_ELEMENT_ID}").val();, I can not check the value of INPUT_ELEMENT_ID from Jasmine.js spec file.
(I used Fixtures to get INPUT_ELEMENT_ID value from my Jasmine view spec.js file)
Kindly help me, to understand the problem and resolve it.
Thanks in advance.

$("#{INPUT_ELEMENT_ID}").val();
used to get value with id .
follwoing line is wrong
this.$("#{INPUT_ELEMENT_ID}").val();
we can write this as
$(this).val();
here this is same id or class use in above function .
e.g:
$(".word_span ").on("click", function (){
alert($(this).attr('title'));
});

How can I change the GWT *.nocache.js file

i'm investigating how to change the generated javscript code in *.nocache.js.
I'm trying to add a custom gwt linker to do that, but i don't know how to find such nocache.js files.
I tried it like this:
SortedSet<EmittedArtifact> emittedArtifacts = toReturn.find(EmittedArtifact.class);
for (EmittedArtifact emittedArtifact : emittedArtifacts) {
logger.log(TreeLogger.WARN,
"++++++++++++++++++++++" + emittedArtifact.toString()
);
}
but there is no nocache.js in the output.
So is there anybody has idea about how to locate the nocache.js with GWT linker or how to change this js at all?
thanks!
Ok, I found the solution by myself. The problem is I need follow the Linker guideline of new GWT version. I should use #Shareable and override another version of link function:
public ArtifactSet link(
TreeLogger logger,
LinkerContext context,
ArtifactSet artifacts,
boolean onePermutation) throws UnableToCompleteException

Ok, I found the solution by myself. The problem is I need follow the Linker guideline of new GWT version. I should use #Shareable and override another version of link function:
public ArtifactSet link(
TreeLogger logger,
LinkerContext context,
ArtifactSet artifacts,
boolean onePermutation) throws UnableToCompleteException