I use jquery-3.2.1.js and Materialize v0.98.2 (http://materializecss.com)
i had this code html <div class="chips chips-initial"></div> and
this code of js
$( document ).ready(function() {
//$('.chips').material_chip()
$('.chips-initial').material_chip({
data: [{
tag: 'Apple',
}, {
tag: 'Microsoft',
}, {
tag: 'Google',
}],
});
});
in IE work, firefox too but in chrome i had this error:
jquery-3.2.1.js:3869 Uncaught TypeError: $(...).material_chip is not a function
Solved
I just delete all chrome cache, and it works.
Materialize currently only supports jQuery 2.1.4, but we plan on supporting jQuery 3 soon
Ref: https://github.com/Dogfalo/materialize/pull/4587
Related
I'm a bit clueless with integrating the #google/model-viewer into a nuxtjs project:
This is my model-viewer.js in the plugins folder
import Vue from "vue";
import modelViewer from "#google/model-viewer";
Vue.use(modelViewer);
The part in my nuxt.config.js
plugins: [
"#/plugins/hooks",
{ src: "#/plugins/gsap", mode: "client" },
{ src: "#/plugins/model-viewer", mode: "client" },
],
... and the component so far
<template>
<model-viewer
:src="src"
bounds="tight"
enable-pan
camera-controls
environment-image="neutral"
poster="poster.webp"
shadow-intensity="1"
autoplay
></model-viewer>
</template>
<script lang="ts">
export default {
ssr: false,
name: "Viewer3d",
props: {
src: {
type: String,
required: true,
},
},
setup() {
return {};
},
};
</script>
When called I get the Error
Failed to compile with 1 errors friendly-errors 13:36:36
ERROR in
./node_modules/#google/model-viewer/dist/model-viewer.min.js
friendly-errors 13:36:36
Module parse failed: Unexpected token (999:5963)
friendly-errors 13:36:36 You may need an appropriate loader to handle
this file type, currently no loaders are configured to process this
file. See https://webpack.js.org/concepts#loaders | * limitations
under the License. | */
and a
window is not defined
from my browser.
What am I missing? I am not familiar with loaders in nuxt and wasn't able to find something helping me with my problem.
I had the same issue but with NuxtJS. Try to use an older version of the model-viewer, everything until version 1.10.1 is working for me.
Vue component
<ckeditor :editor="classiceditor" v-model="report_notes" :config="editorConfig" #blur="editReportNotes()" #keyup.enter="editReportNotes()"></ckeditor>
vuejs code
classiceditor:ClassicEditor,
editorConfig: {
// plugins: [ Underline],
toolbar: {
items: [
'bold','italic',
'|','link',
'|','bulletedList', 'numberedList',
]
},
placeholder :'Write a note...',
link: {
defaultProtocol: 'http://'
}
},
Issue is defaultProtocal is not setting. when i give gogole.com as link, It is opening as my-domain/google.com which is a non existing page
I need it as http://google.com
I followed this doc defaultProtocal
Thank you in advance
re-installeed and Upgraded from version 16.0.0 to 22.0.0. Because the feature is recently added
npm install --save #ckeditor/ckeditor5-vue #ckeditor/ckeditor5-build-classic
I'm working on a Vue.js Project I need this
Download Chart
I tried to create a Component like this.
import '../../../assets/js/lib/gauge/justgage.js';
import '../../../assets/js/lib/gauge/raphael.min.js';
Vue.component('justgauge', {
name: 'justgauge',
mounted () {
var g1;
document.addEventListener("DOMContentLoaded", function(event) {
g1 = new JustGage({
id: "justgauge",
value: 72,
//title: "Completed",
fill: '#ffa726',
symbol: '%',
min: 0,
max: 100,
donut: true,
gaugeWidthScale: 0.4,
counter: true,
hideInnerShadow: true
});
});
}
})
I'm getting errors like this-
gauge/raphael.min.js
Module build failed: SyntaxError: Deleting local variable in strict mode (10:22810)
Note: I've used Justgauge.js and raphael on my Local Library. Any help will be highly appretiate.
I made a JustGage component for Vue Js. You can find it here:
https://github.com/agronick/KGauge
The gauge you want would look something like this:
<k-gauge
title="Completed"
:value="72"
:color-steps="['#ffa726']"
:width="500"
:height="300"
:max="100"
:gauge-size="0.4"
:format-function="(x) => `${x.toFixed(2)}%`"
:show-min-max="false"
:doughnut="true"
:shadow-opacity="0"
/>
I'd like to create a Preact component and let folks consume it, even if they're not building Preact apps.
Example: I'd like to build a <MyTooltip> component in Preact, bundle it (along with the Preact runtime), and have folks load it as a script tag use it purely declaratively, perhaps like:
<script src="https://unpkg.com/my-tooltip/my-tooltip-bundled.js">
<my-tooltip content="Tooltip content">Hover here</my-tooltip>
Is there a way to bundle up a component such that it includes the Preact runtime, my library code, and hooks into <my-tooltip> elements?
In other words, can I interop my Preact components as Custom Elements, similar to ReactiveElements?
There's a great library that does this for you called preact-custom-element:
https://github.com/bspaulding/preact-custom-element
class SearchBox extends Component {
render() {
// ...
}
}
registerComponent(SearchBox, 'search-box');
Even though #Jason Miller`s answer helped me a lot, I still had difficulties in producing a basic working example, so here is how I solved this problem from start to finish:
My basic html document including the bundled script dummy.js containing the actual code of my dummy webcomponent:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<script async src="./dummy.js" type="text/javascript"></script>
<dummy-view name="Test"></dummy-view>
</div>
</body>
</html>
My dummy webcomponent:
import {div} from '../utils/hyperscript';
import registerCustomElement from 'preact-custom-element';
const DummyView = ({ name = "World" }) => (
div({}, `Hello, ${name}!`)
);
registerCustomElement(DummyView, "dummy-view", ["name"]);
My webpack config:
const path = require('path');
module.exports = {
entry: {
dummy: './lib/dummy/dummy-view.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
output: {
path: path.resolve(__dirname, 'webcomponent/')
}
};
Some more details:
I installed the preact-custom-element like so npm i preact-custom-element.
Bundling is done using webpack like so: npx webpack.
The index.html will be served under /webcomponent (e.g. http://localhost:3000/webcomponent/).
When visiting the above URL in the browser, the result will look like this:
<div>Hello, Test!</div>
Addendum:
Since I'm using preact I found an alternative approach using preact-habitat, which does something very similar: https://github.com/zouhir/preact-habitat
PreactJS themselves have a library to do just that
https://github.com/preactjs/preact-custom-element
In case you don't want to use another library to keep it slim you can do:
import {h} from "preact";
h("lottie-player", {
src: "/lf30_editor_mjfhn8gt.json",
background: "transparent",
speed: 1,
style: {
width: 300,
height: 300,
},
loop: true,
autoplay: true,
})
I wrote an article on achieving just this:
https://www.jameshill.dev/articles/custom-elements-with-preact/
In addition to other packages mentioned already, there's also:
https://github.com/jahilldev/preactement
It works in a similar way, but allows you to dynamically import your component files when needed, reducing your upfront javascript:
import { define } from 'preactement';
define('my-tooltip', () => import('./myTooltip'));
Disclosure: I'm the author :)
1) I have webcontent/bpl/nls directory
2) resource.js -.
define({ root:
({
software: " Software"
}),
"fr": true,
"fr-ca" : true,
"en-us": true
});
I have this file inside webcontent/bpl/nls directory
3)
In index.jsp, i am using like this -
<script type="text/javascript">
var dojoConfig = {
async: true,
parseOnLoad: true,
locale: 'en-us',
baseUrl: "/",
tlmSiblingOfDojo: false,
};
require(["dojo/i18n", "dojo/i18n!bpl/nls/resource"],function(
i18n, resource
){ alert(resource.software);}
);
</script>
BUT I am getting Undefined in alert box. What is the error ? what is right procedure ? I am using dojo 1.8.
It seems you're missing the actual dictionary file for your locale. I.o.w, you would need a webcontent/bpl/nls/en-us folder with resource.js in it, having the following:
define({
software: " Software"
});
And similar ones for fr and fr-ca locales (since you declared them in your root dictionary).
See dojo docs on i18n for more details.
Cheers!