I am trying to create a popover in the Javascript of my Angular 12 project. I am using Boostrap v5.0.1. I can't seem to get rid of a name error when I am trying to create the popover:
var exampleEl = document.getElementById(item.name + index);
var tooltip = new bootstrap.Popover(exampleEl, {
container: 'body',
animation: true
});
Typescript is telling me "Can't find name bootstrap".
I have added bootrap.js to my angular.json file:
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
According to the docs, popper.js is included in the bundle file. I am not using jQuery and do not want to include it. I have not seen another post with a similar issue so I must be just overlooking something small. Any ideas?
Posting this declaration at the top of the file worked:
declare var bootstrap: any;
Related
I am making an app using Quill JS and Electron. I want to use Quill's syntax highlighting module and followed the instructions on the API page (https://quilljs.com/docs/modules/syntax/). For some reason, the function does not work (no highlighting is shown in code-block). I switched the <script src=...> tag to require and declared Quill as
quill = new Quill('#editor', {
modules: {
syntax: require('highlight.js'),
toolbar: false
},
theme: 'snow'
});
The result is whenever I type something into the code-block, an error saying " " is not a valid language. I made sure that I included the css file on the main page. What am I doing wrong here?
From the link that you provide. It clearly says
var quill = new Quill('#editor', {
modules: {
syntax: true, // Include syntax module
toolbar: [['code-block']] // Include button in toolbar
},
theme: 'snow'
});
So you only need to set true on that property.
What you have to be careful is to make sure window.hljs is present if you include the script tag before Quill is imported.
Or if you use webpack. You can use ProvidePlugin and set it like this
plugins : [
.
.
new ProvidePlugin({
'window.Quill': 'quill/dist/quill.js',
'Quill': 'quill/dist/quill.js',
"window.hljs": "highlight.js"
})
]
Yes, this question may be repeated. But I just don't get this setup working in any way.
I tried prettty much everything:
Getting the libraries directly into the index.html through a CDN.
Installing them via NPM and then adding them to angular-cli.json script field.
Importing the modules directly into my components, both with aliased JQuery (import * as $ from 'jquery') and just plain import (import 'jquery').
I tried other setups, like doing the imports in the root component, importing these libraries in various locations... but I don't get this working.
Currently, I need to get working one Bootstrap modal, and one Datepicker component which also works with JQuery, but it's being impossible for me. Sometimes I get the '$ is undefined' and sometimes I get other errors.
So now, I will ask: which is the real solution for this problem in latest Angular versions? How should I make the imports?
Thank you!
EDIT: Current situation:
Added the dependencies to the angular-cli.json file:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],
I try to call the .modal() function that bootstrap has to add to Jquery:
( $('#myModal')).modal({
backdrop: true,
focus: true,
show: true
})
But it just throws...:
SegmentsComponent.html:15 ERROR ReferenceError: $ is not defined
at SegmentsComponent.openModal (segments.component.ts:55)
at Object.eval [as handleEvent] (SegmentsComponent.html:15)
at handleEvent (core.js:13255)
at callWithDebugContext (core.js:14740)
at Object.debugHandleEvent [as handleEvent] (core.js:14327)
at dispatchEvent (core.js:9704)
at eval (core.js:10318)
at HTMLAnchorElement.eval (platform-browser.js:2614)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4620)
Any help?
mmmmm .. it looks very strange .. the only reason why it can gives to you $ is not defined is because you DON'T INCLUDE IT well..
so what i can suggest to you is to DOUBLE check your jquery path in the scripts :[] section ..
REMEMBER .. the path is intended from the src(or your root: entry) folder!
ALSO check the jquery version .. I saw that NPM don't include jquery when you do install bootstrap ... so install jquery manually and get the right version ..
AND in your .ts file .. have you declare var $ : any in the head of your ts file? ...
Hope it helps you!
You need to install Jquery and bootstrap (popper for Bootstrap 4) with package managers or CDN. Your .angular-cli.json file must look like this:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
Make sure these three files exist.
I found the answer, it can be solved by two methods one is included js file in index.html or ou can include like this, also you can include js as well as jquery.
ngOnInit() {
$(document).ready(function () {
$.getScript('../../assets/frontend/js/app.js', function (w) { });
}); }
I tried to require materialize in Vue and Laravel
in bootstrap.js I have
window.Materialize = require('materialize-css');
in App.vue component I have
mounted(){
Materialize.toast('I am a toast!', 4000)
}
and received
"Uncaught ReferenceError: Materialize is not defined"
message.
Either drop a script tag with materialize js or, make sure jquery is loaded before requiring materialize.
I suppose you have a browserify setup and if you do you can do something like that:
require('jquery')(window);
require('materialize-css')(window);
Or something like that:
global.jQuery = require('jquery')
global.Materialize = require('materialize-css')
Or import globally jQuery only then simply var Materialize=require('materialize-css') and use the variabile instead.
For webpack setups add a plugin for the stuff you have installed via npm and need globally:
plugins:[
new webpack.ProvidePlugin({
$: "jquery",
jQuery:'jquery',
jquery:'jquery'
}),
],
My application is working fine in ext js 4.2.1 but when I upgrade I am unable to get the viewport to load correctly. The view port is in a different file and loads initially but then I get the
Error: [Ext.create] Unrecognized class name / alias: App.view.MainViewport
I have tried requiring the the viewport file but that is not working. Any help would be much appreciated.
app.js
Ext.Loader.setConfig({enabled: true)};
Ext.Loader.setPath('Ext.ux', 'extjs5.1.1/ux');
Ext.require(['Ext.tip.QuickTipManager','Ext.container.Viewport', 'Ext.plugin.Viewport','Ext.layout.*','Ext.form.Panel','Ext.form.Panel', 'Ext.form.Label','Ext.grid.*','Ext.data.*','Ext.tree.*','Ext.selection.*', 'Ext.tab.Panel','Ext.ux.TabCloseMenu'] );
Ext.onReady( function() {
Ext.application({
name : 'App',
appFolder: 'extapp',
launch: function() {
Ext.create('App.view.MainViewport');
}
});
});
MainViewport.js
Ext.define('App.view.MainViewport', {
extend : 'Ext.container.Viewport',
alias : 'widget.MainViewport',
layout: {
type: 'border'
},
initComponent: function() {
console.info("initializing view");
}
});
I did try using the MainViewport in the require but that returned an error and empty page. I actually found the problem and was able to fix it!
The problem was that in the MainViewport file, I had a requires and then the required files also required other files. In order to find the files that were causing the errors, I had to traverse through all of the required files and find the failing one. I did this by commenting out each required file everywhere and eventually found the culprit. Then, my page rendered correctly. Thanks for your help!
I am trying to add the CodeSnippet plugin to CKEditor (installed in my Rails app using ckeditor-rails). To do this, I first added the CodeSnippet plugin folder and all of its dependencies to the directory app > assets > javascripts > ckeditor > plugins (so my plugins folder contains folders for codesnippet, dialog, dialogui, lineutils, and widget).
I then updated my app/assets/javascripts/ckeditor/config.js.coffee to include the following:
CKEDITOR.editorConfig = (config) ->
config.startupShowBorders = true
config.resize_enabled = false
config.scayt_autoStartup = true
config.language = 'en'
config.width = '445px'
config.extraPlugins = 'widget,dialog,dialogui,lineutils,codesnippet'
config.toolbar_Default = [
{ name: 'basicstyles', items: [ 'Bold','Italic','Underline', '-', 'NumberedList','BulletedList', 'Link','Unlink', 'CodeSnippet','RemoveFormat' ] }
]
config.toolbar = 'Default'
true
When I try to load a webpage with the CKEditor, I get the following errors in my javascript console:
Uncaught TypeError: undefined is not a function
referring to this line of widgets/plugin.js:
CKEDITOR.style.addCustomHandler( {
and the same error
Uncaught TypeError: undefined is not a function
referring to this line of codesnippets/plugin.js:
editor.addContentsCss( path + 'lib/highlight/styles/' + editor.config.codeSnippet_theme + '.css' );
Anyone able to configure this CKEditor to use the CodeSnippet plugin in a Rails app?
I wasn't able to get this to work at all using any ckeditor gems. As a result, I completely removed the ck_editor rails gem and downloaded a build directly from the ckeditor website with the plugins I wanted added in.
I then placed the whole ckeditors folder into my app > assets > javascripts folder and added the following to application.js
//= require ckeditor/ckeditor.js
I did end up having to do some customization by editing ckeditor/ckeditor.js directly, but I was finally able to get the CodeSnippet plugin to work this way.
Hope this helps someone!