Drupal 8 Jquery conflict once logged in - javascript

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

Related

Class 'ConsoleTVs\Charts\Charts' not found

I tried to use Laravel charts - consoletvs/charts:6.*,
i using
serveice providers
ConsoleTVs\Charts\ChartsServiceProvider::class,
Alias is
'Charts' => ConsoleTVs\Charts\Charts::class,
In my controller i using use Charts
$chart = Charts::new('line', 'highcharts')
->setTitle('My nice chart')
->setLabels(['First', 'Second', 'Third'])
->setValues([5,10,20])
->setDimensions(1000,500)
->setResponsive(false);
Here I facing issue is:
Class 'ConsoleTVs\Charts\Charts' not found
I can't understand what's going on please help to find out this issues.
PHP version is 7.3.2
Laravel version is 5.5.45
Chart version is 6.3
I Found the issue and i fixed this the version only working
this GitHub version is working
When you use their generators (php artisan make:chart), it says the Library is optional. However, when I omit the library I ran into this error. I corrected it by removing the generated class, and regenerating it specifying the library I wanted (php artisan make:chart Fubar Echarts).
Change your code to the Following and see if it will work for your case:
$chart = Charts::create('line', 'highcharts')
->setTitle('My nice chart')
->setLabels(['First', 'Second', 'Third'])
->setValues([5,10,20])
->setDimensions(1000,500)
->setResponsive(false);
You also need to change the setTitle() attribute to title(),setLabels() to labels(),setValues() to values(),setdimensions() to dimensions() and setResponsive() to responsive().

$ not defined but jQuery IS defined in Wordpress

What might cause Firefox to tell me $ is not defined, but using 'jQuery' works as expected.
I'm on Wordpress 3.4 and Wordpress comes packaged with jQuery. Is it something specific to Wordpress?
jQuery.noConflict() has been called. To resolve this with a minimum amount of code change do this.
Before:
$("your").code(function () {
$("that").uses($.all("over").the("place"));
});
After:
(function ($) {
$("your").code(function () {
$("that").uses($.all("over").the("place"));
});
})(jQuery);
jQuery works in noConflict mode inside wordpress as the docs state: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

Why would Dojo 1.6 fail to properly load javascript file in IE8 using dojo.require?

The following code worked with Dojo 1.5 in Firefox and Internet Explorer 8.
With Dojo 1.6, it still works in Firefox, but does not work in IE8.
I get an Object doesn't support this property or method error when wrappingFunctionInPlainJsFile() is called.
HTML page:
<div dojoType="widget.MyCustomWidget"></div>
In widget/MyCustomWidget.js
dojo.provide("widget.MyCustomWidget");
dojo.require("js.plainJsFile");
dojo.declare("widget.MyCustomWidget", [dijit._Widget, dijit._Templated], {
...
// this gets called when the widget is clicked on in the UI
run: function() {
wrappingFunctionInPlainJsFile();
},
...
});
In js/plainJsFile.js
dojo.provide("js.plainJsFile");
function someFunction() {
}
function wrappingFunctionInPlainJsFile(){
new someFunction();
}
Any ideas on what I am doing wrong would be greatly appreciated.
Note: If I import the plainJsFile.js directly on the HTML page instead of using dojo.require then I have no problems.
I believe that the purpose of the dojo.require system to break your code up into modules where those modules aren't just arbitrary chunks of js, but dojo.declare'd objects. When you write dojo.provide("js.plainJsFile"), by convention I'd expect there to be an global object called "js" which had a property "plainJsFile". See the code example on this page.
I actually use dojo.require the way that you do, ignoring the convention I'm describing, and it works just fine -- in firefox. IE won't swallow it though. IE will behave if all the required js files are compressed into a single file (which you mentioned solves your problem).
So, basically, I think that IE is less flexible about scope while dojo.require is doing its thing, and you putting function declarations in a "module" like that is breaking things. Try going with the convention and see if that helps.
I tried the dojo mailing list and got a fix courtesy of Karl Tiedt.
See here: http://dojo-toolkit.33424.n3.nabble.com/Why-would-Dojo-1-6-fail-to-properly-load-javascript-file-in-IE8-using-dojo-require-td3204800.html#a3204894
Copy/paste of solution.
"Its an IE quirk....
dojo.provide("js.plainJsFile");
(function() {
function someFunction()
wrappingFunctionInPlainJsFile = function() {
new someFunction();
}
})();
should work... I always use my name spaces though and do it this way
dojo.provide("js.plainJsFile");
(function(pjsf) {
pjsf.someFunction = function()
pjsf.wrappingFunctionInPlainJsFile = function(){
new someFunction();
}
})(js.plainJsFile);
"
Note: I tried the above solution and it worked for me in IE8 and Firefox.

Javascript "<body onload=...>" in Drupal

I'm trying to integrate a javascript library for drag&drop on tables into one page of my custom Drupal module. I've included the js file using drupal_add_js, but I don't know how to initialize it.
The documentation for that library states that an init function should be called like
<body onload="REDIPS.drag.init()">
How would I do that in Drupal? Or has Drupal some better way of initializing the script?
Drupal has its own mechanism for this, involving adding a property to Drupal.behaviors. See this page: http://drupal.org/node/205296
Drupal.behaviors.redipsDragBehavior = function() {
REDIPS.drag.init();
};
From the linked page:
Any function defined as a property of
Drupal.behaviors will get called when
the DOM has loaded.
You could try adding another drupal_add_js call in the same function as your other add_js:
drupal_add_js('REDIPS.drag.init();','inline','header',true);
The last param "true" is to defer the execution of the script.
I hope that helps in some way!

Intellisense support in Visual Studio 2008/2010 for jQuery closures {

I'm trying to get Intellisense to correctly work for closure. As a plugin author, I always use a closure to create an isolated environment for my plugin code:
(function($) {
// code here
})(jQuery);
But the problem here is that Intellisense doesn't pick up that jQuery is being passed in the execution of the function. Adding $ = jQuery in the above code fixes the problem, but that's just poor execution, IMHO.
Anyone here got this working without resorting to embedded ASP server tags (this is a standalone JS file)? Something preferably not including modifying existing code other than some odd /// <option .../>-like solution?
It isn't clear in your post or your comments, but at the top of your .js file, did you add:
/// <reference path="jquery.vsdoc.js" />
to the top of your file?
ScottGu's blog has more on intellisense in external libraries (not jQuery-specific).
Also, here's another possible solution, is this what you mentioned with $=jQuery?:
(function($) { // private closure; <% /*debug*/ if (false) { %>
$ = jQuery;
// <% } /*end debug*/ %>
$(function() {
// do stuff
});
})(jQuery);
Found here: http://blog.jeroenvanwarmerdam.nl/post/IntelliSense-VS08-within-private-closure.aspx
if you are looking at Visual Studio 2010 for your jQuery plugin development IDE, you have made the right choice. Here are the details for the setup:
Download the jquery and the respective jquery.vsdoc in the same directory of your project. You can download the latest version of the jQuery files from http://www.asp.net/ajaxlibrary/cdn.ashx. Here are the links for the latest jQuery links from above CDN:
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1-vsdoc.js
In my development environment I use the uncompressed jquery file renamed to jquery.js (removing the version information [-1.7.1] in the file name, and remember to remove the version information from the vsdoc file name too).
Create your plugin file with its first line containing the line
/// <reference path="/path/to/jquery.js">
Create the plugin code with closure. Here is the full skeleton of a plugin:
/// <reference path="jquery.js" />
(function ($) {
/// <param name="$" type="jQuery" />
jQuery.fn.gallery = function () {
return this.each(function () {
// your code here
});
};
})(jQuery);
Remember to use /// <param name="$" type="jQuery" /> as the first line in the closure of the plugin as I have demonstrated in the code above. It all works for me in Visual studio 2010 SP1.
Visit My jQuery Plugin Site and Blog
But before installing the hotfix make sure you have SP1 installed in your system.
I'm surprised this doesn't work in VS2010 (I don't think you will be able to make it work in VS2008).
You could try adding an xml doc comment to the beginning closure to define the param type. Something like this:
/// <param name="$" type="Jquery" />
(I don't know what the class name for the jquery object is -- or if there is even one available).

Categories

Resources