I am using Ionic with vanila java script
I am using CDN in head component
<script type="module" src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/#ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#ionic/core/css/ionic.bundle.css"/>
In the body of HTML
<ion-alert-controller></ion-alert-controller>
......
.....
<script src="app.js"></script>
in app.js
const alertCtrl = document.querySelector('ion-alert-controller');
..
..
..
alertCtrl.create ({
message: 'ABC',
header: 'DEF',
button: ['Okay']
});
getting an error saying
app.js:29 Uncaught TypeError: alertCtrl.create is not a function
at HTMLElement. (app.js:29)
I'm not used to code with vanilla, but according to Ionic docs for js, you should use alertController this way :
const alertCtrl = document.querySelector('ion-alert-controller');
alertCtrl.message ='ABC';
alertCtrl.header='DEF';
alertCtrl.button= ['OK'];
I faced the same situation.
The ionic CDN you are using will download the latest version of ionic, however I guess ion-alert-controller directive is ionic 4.
you need to use
<link href="https://unpkg.com/#ionic/core#4.0.2/css/ionic.bundle.css" rel="stylesheet">
<script src="https://unpkg.com/#ionic/core#4.0.2/dist/ionic.js"></script>
Note that the links above refer to unpkg.com, not jsdelivr.net
Please refer to
https://unpkg.com/browse/#ionic/core#4.1.0-dev.201902272232.d66b12b/README.md
lines 26 & 27
Related
I am currently aiming to make a weather widget work by using an npm module https://react-open-weather.gitbook.io/project/. This is a React component, which is something I have never worked with before.
I've taken the CDN's provided by the npm module, but other than that I don't know how to somehow "enable" my JS file to read the React component, or how I can integrate it. I've tried this link (https://reactjs.org/docs/add-react-to-a-website.html) previously to asking the question on here but stuff started breaking (see code snippet further below).
The problem is that I don't know how to work with React I managed to mess it up. This is why I'm turning to you now: Anyone with React experience who could help me out here?
The following react component is how I need to load the today weather data by city name:
<ReactWeather
forecast="today"
apikey="bdb591c14b9e4a079623b1a838313888"
type="city"
city="Copenhagen"
/>
My project is built with vanilla JS, so I would need help integrating this component into my file.
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-
icons.min.css"
type="text/css"/>
</head>
<body>
<section id="weather">
<div class="weather_component_container"></div>
</section>
<!-- npm module for weather -->
<script src="node_modules/react-open-weather/lib/js/ReactWeather.js"></script>
<!-- Load React -->
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component -->
<script src="weather.js"></script>
<script src="script.js"></script>
</body>
I got the following started code from https://reactjs.org/docs/add-react-to-a-website.html and replaced it with my DOM element, which is #weather
And this is the error I get in the console: "The "data" argument must be one of type string, Buffer, TypedArray, or DataView. Received type object"
weather.js
'use strict';
React.createElement(ReactWeather, {
forecast: "today",
apikey: "bdb591c14b9e4a079623b1a838313888",
type: "city",
city: "Copenhagen"
});
ReactDOM.render(
document.getElementById('weather')
);
By default, JavaScript don't understand JSX syntax. You may miss this document:
https://reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx
Please add the script and try again
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
Note: don't use this script in production because it may slow your app. To use in production, refer to the doc https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project
My HTML file:
<!DOCTYPE html>
<head>
...
</head>
<body>
...
<script src="script.js"></script>
</body>
My JavaScript file - script.js:
import * as FilePond from 'filepond';
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
But error occurred, the browser said:
Uncaught SyntaxError: Cannot use import statement outside a module
So I edited the script.js into this:
const FilePon = require('filepond')
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
But error occurred again, the browser said:
Uncaught ReferenceError: require is not defined at script.js:1
How can I fix it?
It's simple:
Just include the FilePond css & js file from CDN instead like:
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
Next, you do not need any import or require. You can simply use the rest of the code as FilePond is globaly declared now like:
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(myPond.element);
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
require() is a NodeJS function, not a browser JS function.
If the package uses npm, chances are its made for NodeJS and not browser JS.
If you want to include js files in the browser, you need to use html includes:
<script src="script.js"></script>
Or a templating solution which allows to include other files such as EJS
Actually, require() is for Node.js. You can't use it in browsers.
First solution:
Add the type="module" attribute to the <script> tag.
So it will be <script type="module" src="script.js"></script>
Second solution:
Just add <script src="https://cdn.jsdelivr.net/npm/filepond#4.13.6/dist/filepond.js"></script> and <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet"> before calling script.js
I think this will work for you:
<script src="https://cdn.jsdelivr.net/npm/filepond#4.13.6/dist/filepond.js"></script>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script>
const myPond = FilePond.create({
multiple: false,
name: 'filepond'
});
document.body.appendChild(pond.element);
</script>
I don't know if it's the same error as many got here:
jQuery is not a function erreor
how to fix : Uncaught TypeError: $(...).summernote is not a function #2087
jquery: Uncaught TypeError: $(…).error is not a function
But I'm stuck with it like a gum under my shoe.
Here's the actual error on my Chrome's Developer Tools.
I just wish to update Summernote from an older version which has this # sign error.
Cant write # using AltGr + # combination or Ctrl + Alt +#Combination #1406
But then, with the newer version from 0.8.0, it seems that the $(...).code() function is no longer available. Any knows the change I should bring to make it work?
simply works in my case when I added defer
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js" defer></script>
My jquery version is 3.3.1
From documentation:
destroy and code
After v0.7.0, direct jquery methods, destroy and code were removed for
avoiding conflict with other jquery libraries. You can call this
methods with summernote api.
The direct jQuery code() function has been deprecated and you now have to use the summernote() function:
$('#summernote').summernote();
You'll need to call the function differently as stated by their API Docs https://summernote.org/getting-started/#basic-api
$('#summernote').summernote('code');
For me, I wanted to use summer note with bootstrap4, I copied the below code from the official documentation but it didn't work, I realized afterwards that I was embedding a newer bootstrap version at the beginning of my page (I was reaching out to some bootstrap files located at the assets), I removed that line and everything went just fine:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.js"></script>
https://stackoverflow.com/a/62644428/10121188
1. Steps
I created this post because the suggestions in other posts didn't work in Summernote v0.8.18.
As stated in the Summernote documentation, the following container is defined in the area where the editor will be rendered:
<div id="summernote">Test Application</div>
<button id="print">Print</button>
The following script is written to load the summernote editor when the web page is loaded:
$(document).ready(function () {
$('#summernote').summernote({ height: 95, codemirror: { theme: 'monakai' }});
});
The method call used to get the Summetnote editor content has been changed:
$('#print').click(function() {
/* Get the plain text typed into the editor */
var plainTextContent = $($("#summernote").summernote("code")).text();
console.log(plainTextContent);
/* Get the formatted text written to the editor */
var formattedTextContent = $("#summernote").summernote("code");
console.log(formattedTextContent );
});
2. Demo
$(document).ready(function () {
$('#summernote').summernote({ height: 95, codemirror: { theme: 'monakai' } });
});
$('#print').click(function() {
/* Get the plain text typed into the editor */
var plainTextContent = $($("#summernote").summernote("code")).text();
console.log(plainTextContent);
/* Get the formatted text written to the editor */
var formattedTextContent = $("#summernote").summernote("code");
console.log(formattedTextContent );
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
<div id="summernote">
Test Application
</div>
<button id="print">Print</button>
I am attempting to use the google calendar module of the fullcalendar plugin in JavaScript. When I attempt to load the google calendar, the console is displaying:
Uncaught TypeError: Cannot read property 'applyAll' of undefined
The error is occurring on line 23 of gcal.js:
21| var fc = $.fullCalendar;
22| console.log($.fullCalendar);
23| var applyAll = fc.applyAll;
The console.log() that I have added returns $.fullCalendar as undefined, and then fc.applyAll is also returning undefined. My knowledge of JS is not good enough to fully understand what is going on in this file, and I am not sure what is going wrong.
Here is my html:
<head>
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/gcal.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<link href='style.css' rel='stylesheet' />
</head>
<body>
<div id='calendar'></div>
</body>
My JavaScript:
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'my-api-key',
events: {
googleCalendarId: 'my-calendar-id'
}
});
});
And I have downloaded the most recent version of gcal.js (there seemed to be a problem with the file, and the site provided a link to the most up to date version).
The problem is with the order you've imported the library files.
fullcalendar is a jQuery plugin, which usually means it will end up as a property on the jQuery object e.g. $.fullCalendar.
Now, the gcal file depends on that property being there, so that it can access the .applyAll method on it, however, you're loading gcal.js before you load fullcalendar.js.
If you change the ordering like this, it works without problems.
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script src='fullcalendar/gcal.js'></script>
As a rule of thumb, try and put the files that you know have no dependencies (they don't rely on another library) first.
I am trying to create "coach marks"/ instruction overlays in my hybrid mobile app using Jquery and the Chardin.js library : https://github.com/heelhook/chardin.js
But unfortunately I keep getting this error :
[FATAL] [NONE] Uncaught Exception: TypeError: 'undefined' is not a function (evaluating '$('body').chardinJs('start')') at (compiled_code):5
this is how my JS file looks like :
$(document).ready(function() {
console.log("IN CHARDIN INIT");
$('.container').chardinJs('start');
});
And I load all the files in the HTML file like this (this code is not showing all the div elements for simplicity):
<head>
<link rel="stylesheet"
href="../../css/jquery/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="../../js/jquery/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<!-- Chardin/ Coach marks stuff -->
<script src="../../js/chardin/chardinjs.min.js"></script>
<link href="../../js/chardin/chardinjs.css" rel="stylesheet" />
</head>
<body>
<!-- Coach marks stuff -->
<script type="text/javascript" src="../../js/chardin/chardinInit.js"></script>
</body>
Am I doing something wrong here ??
After days of debugging I found out that the ChardinJs lib was not loading and I had to add it to the body of HTML to load.
The other thing was that Chardin JS has a dependancy that is not mentioned on their website. It needs the bootstrap plugin that I was missing. As soon as I added this dependancy, It started working.