Having trouble loading ApexCharts using RequireJS - javascript

I'm working with Tabler (tabler.io) trying to migrate some of the templates into my own CMS installation. The problem I'm running into is that I'm trying to load all of the scripts using RequireJS (requirejs.org), and ApexCharts (apexcharts.com) is not loading properly. The relevant parts of my RequireJS config are as follows:
requirejs.config({
shim:{
'apexcharts':{'exports':'ApexCharts'}
},
paths:{
'apexcharts':'https://cdn.jsdelivr.net/npm/apexcharts#3.23.1/dist/apexcharts.amd'
}
});
It is my understanding that by identifying the exports parameter, RequireJS binds the module to the window object, but in Dev Tools window.ApexCharts is undefined, even though the script shows as being loaded. I've tried both the apexcharts.min.js and apexcharts.amd.js scripts and no luck with either.
I have code later on in the project that depends on ApexCharts being loaded but it doesn't pass the existence check for ApexCharts. The sample below doesn't completely run because $(window).ApexCharts is undefined.
requirejs(['jquery','apexcharts'],function($,ApexCharts){
$(document).ready(function(){
$(window).ApexCharts && (new ApexCharts($('#chart-revenue-bg'), {...})).render();
});
});
The original template from Tabler.io uses the apexcharts.min.js script, but as a result of my research into issues with RequireJS, I came across the following Issue reported on Github and tried the apexcharts.amd.js script as well as a result:
Loading using Require.js (AMD) broken #357
Anyone have insight into what I'm doing wrong here? (I'm not seeing any errors in the console, so I'm stumped)
CODEPEN example illustrating issue: https://codepen.io/cjholowatyj/pen/eYBZmrb

paths:{
'apexcharts':'https://cdn.jsdelivr.net/npm/apexcharts#3.23.1/dist/apexcharts.min',
'capexcharts':'https://cdn.jsdelivr.net/npm/apexcharts#3.23.1/dist/apexcharts.common',
}
and then:
define(["capexcharts", "apexcharts"], function (c, ApexCharts) {
});
see this link: https://codepen.io/waleed3amer/pen/GRMNYaQ

Related

JQuery CDN not working, and local JS script not seen

I can't understand this for the life of me. I normally work with Python, but am trying to dabble a bit in web development with JQuery. I've used the CDN from google, and have done everything from putting the script below the footer (A site I found said that was the best spot), to moving it up into the header (every other site I've been to since says that is the best spot), and nothing works.
From the error in the inspection tools 'Loading failed for the with source “http://localhost:63342/HTML/Omnifood/resources/javascript/script.js”.' It suggests to me that it can't even find the .js file I created to hold my code, but it is there, defined. (See screenshots attached)
Any help getting this sorted out would be appreciated.
Screenshot of HTML and file structure, as well as error in inspection tool:
Edit: The issue has been resolved in so far as the folder has been moved to the correct location (/resources/javascript/script.js), I even went in and added type="text/javascript" to all the script files just in case. Now when attempting to run script with following JQuery code:
$(document).ready(function() {
$('h1').click(function() {
$(this).css('background-color', '#ff0000')
})
});
I get the following errors in inspection tool:
The path is wrong http://localhost:63342/HTML/Omnifood/resources/javascript/script.js
your script.js is at
http://localhost:63342/HTML/Omnifood/vendors/javascript/script.js

google charts loader google.charts.load not triggering callback

I have a mysterious error which only started occurring today. I am using the google charts library in my angular2 web application and I load the appropriate package before initialising the app. This morning when I tried to reload the page, nothing happened!
I am using systemJS as my module loader for the project. To load the google charts package before starting the application, I have this line near the bottom of my systemjs.config.js:
google.charts.load('current',{ 'packages': ['corechart'] } );
google.charts.setOnLoadCallback(go);
function go(){
console.log('go!');
System.import ( baseUrl + '/app/main.js').then(null, console.error.bind(console));
}
My problem is that, from this morning, go is not called!
I have checked that the loader is being downloaded and it is. It is using version 45 and has been for a while. Nothing new here.
I have checked just in case the function name go was too generic and defined elsewhere - this is not the case.
google.charts.load is not throwing any errors at all.
No requests are being made on the network from the loader.
I am getting this error when running the project locally, and currently I'm getting no errors on the production site.
Any Ideas would be very much appreciated - thanks in advance!
Update
I have been able to load the visualization object with a bit of a bodge. I've specifically loaded version 45 of the loader:
https://www.gstatic.com/charts/45/loader.js
and then in my configjs I have:
google.charts.versionSpecific.load('45',{ 'packages': ['corechart'] } );
The setOnCallback still doesn't work, but I reckon that at the moment, the library downloads before it is needed, so I don't get any errors. This is not an ideal solution, or even a correct one. I would still like to find the root cause.
Update 2
As of this morning, the exact same code is working again. I can only think that there must have been some temporary change in the code in the loader that caused it to not do anything useful. I will have a look in the forums to see if there is any evidence of this.

Can't get $ to work using RequireJS and MooTools

I'm attempting to build a site using a combination of RequireJS and MooTools. It's my first time using both libraries. There is plenty of documentation for using RequireJS with jQuery but less for using it with MooTools. I've found only this really. But I'm having some trouble and much of it probably is a result of ignorance; still, perhaps you all can help.
At the moment, I'm just trying to test out basic functionality and understand how I would go about setting this up. Here is what I have tried:
In my site footer, I have this script tag:
<script src="assets/js/vendor/require.js" data-main="../app.js"></script>
This loads requirejs with the file app.js. Inside app.js I mainly deal with paths:
requirejs.config({
"baseUrl": "assets/js",
"paths": {
"mootools": "//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed"
}
});
// Load the main app module to start the app
requirejs(["main"]);
Finally, in main.js, I have (so far) the following:
define(["mootools"], function($) {
var a = $$('.menu'); // .menu is a nav menu in the DOM
console.log(a);
var b = $('.menu');
console.log(b);
});
So here, a works, but b causes an error: undefined is not a function. So there are a couple of questions embedded here. First, can someone tell me what the difference in meaning for $ and $$ with mootools? I gather from this tutorial, that both are used in mootools. Also, why is it that mootools is not mapped to $? As I understand it, with jQuery, this is how you would do this, see here for example.
I'm sure there are some basic confusions here, but please have mercy. I'm a newbie to these tools.
MooTools (as is) is not AMD-compliant. David Walsh is cool but he does not like or use RequireJS. The info in his post is well out of date and not practical any more. In fact, I believe none of the MooTools-core team likes AMD or uses it. Anyway, that's beside the point. jQuery now IS based around AMD so using it is easy. MooTools tried it 2 years ago - https://github.com/arian/mootools-core/tree/1.5amd - and gave up. 1.5 is still not out (hopefully next week, still no AMD).
Anyway
You cannot do this quite in that fashion by expecting the script to magically return $ where a module has not been defined.
There is another issue here which is with the fact that you are loading a remote script and that you leave the protocol to be determined automatically - which are sort of quirky things for RequireJS to handle in their own accord.
Two or three ways to handle it.
you can just define a local module, eg your own mootools.js
define([
'http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'
], function(){
return window.$;
});
then use by requiring it:
require(['mootools'], function($){
$(document.body).adopt(new Element('div[html=hi]'));
});
eg. http://jsfiddle.net/dimitar/5zYnW/
however, mootools will export all sorts of globals anyway, so it's not really useful. you are better off using the requirejs shim config.
shim example
require.config({
paths: {
mootools: 'https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed'
},
shim: {
mootools: {
exports: '$'
}
}
});
// some code.
require(['mootools'], function(){
document.id('foo').adopt(new Element('div[html=hi]'));
});
eg: http://jsfiddle.net/dimitar/5zYnW/1/
old school
I find that it's easier to load MooTools before RequireJS and assume it's all global in all modules that I write - it makes more sense as there are too many global exports to catch. eg. Class, Element, Request etc etc.
eg. https://github.com/epitome-mvc/Epitome/blob/master/example/js/model-demo-require.js -s from my MooTools MVC framework Epitome.
Here's example module code via a UMD wrap - https://github.com/epitome-mvc/Epitome/blob/master/src/epitome-model.js - the only code that implicitly requires MooTools is the node.js code.

How do I include the CLDR.js library in my Ember application?

I'm building an Ember application which started using the ember-skeleton (which means I'm using Rake Pipeline as my build toolchain). I'm using ember-i18n, and that constantly throws warnings about not having the CLDR.pluralForm function.
I've added the CLDR plural functions which ember-i18n uses to the app/vendor/ directory and added that file to my Assetfile. I've verified that the code is included in my app.js before the ember-i18n code. I've also added the appropriate require lines in my main.js:
require('plurals');
require('ember-i18n');
Still, ember-i18n is giving warnings. This is the code where it's happening:
if (typeof CLDR !== "undefined" && CLDR !== null) {
pluralForm = CLDR.pluralForm;
}
if (pluralForm == null) {
Ember.Logger.warn("CLDR.pluralForm not found. Em.I18n will not support count-based inflection.");
}
How do I make sure CLDR is defined in my app?
Because no-one else has, I will suggest a few things I might look at if I were debugging the problem myself.
If the message you see in your site is the same as in the fiddler, it is due to the files just load out of order. Pretty much "plural" must load before the "i18n" plugin. If you flip the order of the linked files it will work (I forked the error-ing example).
I would try validating I am wrong by throwing some debugger; statements into each file to see which actually gets loaded first on the browser.
Because of your require('plurals') I am going to assume you are using requirejs (github is down for maintenance so I can't actually examine ember-skeleton at the moment... so this might get an edit in the future). If this assertion is true, you need to declare that 'plurals' is a dependency of 'i18n'.
"If you do not express the dependencies, you will likely get loading errors since RequireJS loads scripts asynchronously and out of order for speed." - RequireJS API
This means you probably will end up wrapping the two calls into one, adding a define or making a "shim"; these (and more) examples can be found on the RequireJS site.
Sorry if this does not help you but without seeing it actually broken; it is hard for me to debug the problem.
EDIT: Looking at the ember-skeleton, I don't see requireJS. I have never used rake (we ended up writing our pipeline in nodeJS) so I am not quite sure if you were actually trying to concat the files with require "blaw" in rake or if you actually trying to use both.... So now I assume this answer might not be super helpful.

MVC-Mini-Profiler Error: yepnope is not defined

I am using the mvc-mini-profiler to profile my MVC site. It runs fine on my local machine, but when i publish to my hosting server, the profiler doesn't load, and i get the following error:
yepnope is not defined
yepnope([
As far as I can tell, the problem lies in the profiler trying to use yepnope before yepnope has been loaded. Is there a way around this, maybe by forcing a check to see if yepnope has been loaded before executing the miniprofile render command? Here are the relevant lines from the page's generated source
<script type="text/javascript" src="/mini-profiler-yepnope.1.0.1.js"></script>
<script type="text/javascript">
yepnope([
{ test: window.jQuery, nope: '/mini-profiler-jquery.1.6.1.js' },
And for completeness, the calls in my _layout file
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
#MiniProfiler.RenderIncludes(position: RenderPosition.Left, showTrivial: false, showTimeWithChildren: false)
Check if you are getting a 404 error when trying to load yepnope.js. There was a bug in MvcProfiler in dealing with application path, which has been addressed
in later builds.
MVC Mini Profiler includes not respecting application's path
Make sure that you aren't clearing your routes when registering them for your site. The mini profiler adds its own routes for those javascript files to the RouteCollection potentially before your site is initialized.
In case anyone else has this problem, it has been submitted to their google code project. It is a known issue, and they are working on it.
Issue Page if you want to track it

Categories