How should I include jquery.mobile.js in my project so that I can use it with RequireJS.
When I add jquery.mobile.js in my project I start getting following error.
Uncaught Error: Mismatched anonymous define() module: function ( $ ) {
factory( $, root, doc );
return $.mobile;
}
I also followed this post.
Separating jQuery Mobile (1.1.0) from AMD (RequireJS)
Here is a working example. It includes Requirejs, jQueryMobile, Backbone, and Marinonette.
In the index.html file, you need to specify the main module for requirejs to load.
<script type="text/javascript" data-main="js/main" src="js/libs/require-2.1.2.min.js"></script>
In this example, the main module is under "js/main.js"
Inside, main.js, you specify the require.config and use define to load your modules.
Related
Trying to get a (what should be) simple module to work: metisMenu
However, unfortunately I'm failing in doing so, apparently something in my Webpacker setup because when loading my page I get the error: Uncaught TypeError: $(...).metisMenu is not a function
There is an issue in loading the module in application.js. The module is being loaded in vendor/assets/javascripts/app.js
I have jQuery correctly installed
the following snippet into the head section makes it work (but this is without the use of Webpaker):
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/metismenu"></script>
.
I've created a github branch. Please help! https://github.com/henkjanwils/metisMenu-error
For the sake of debugging the javascript-part of a Rails 6 (version 6.0.0.rc1) web application I want to use my custom javascript functions also in the Chrome console (aka. Inspect).
Back when I used just static HTML files to build a website (as opposed to using a web-framework like Rails as of right now) you would simply embed the JS file in the DOM like this
<!-- custom JS -->
<script src="js/custom.js"></script>
and could instantly access and execute all custom functions that were placed in this file.
Background:
The JS file is placed at the correct rails 6 specific directory as provided in this article: How to require custom JS files in Rails 6
Note:
The rails 6 application also uses the JS file already, since the browser shows the console log message.
Here is the full content of the JS file:
// app/javascript/packs/custom.js
console.log("loaded custom.js successfully")
function sayHello () {
console.log("Hello good Sir or Madam!")
}
Expectation: I am expecting to open the browser's (Chrome) console and be able to use the sayHello() function in the console.
However, when I do so, I get an error message in the console stating:
Uncaught ReferenceError: sayHello is not defined
Try something like
sayHello = ()=>{
console.log("Hello good Sir or Madam!");
}
then you can evoke in console:
>sayHello();
I am trying to create an editable SlickGrid (which uses jquery-ui) and also use Dojo.
When my page contains
<script src="../../bower_components/dojo/dojo.js"></script>
<script src="../../bower_components/SlickGrid/lib/jquery-ui-1.11.3.js"></script>
<script src="../../mlads/fillDemo/FillDemo.js"></script>
the console shows
Error: multipleDefine
return mix(new Error(error), {src:"dojoLoader", info:info}); dojo.js (line 106)
src: dojoLoader dojo.js (line 1896)
info: Object { pid="dijit", mid="dijit/_WidgetsInTemplateMixin", pack={...}, more...}
If I comment out the jquery-ui line, the error goes away.
FillDemo.js is my source code, which starts with
require(
[ "dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/registry",
"dijit/form/Button",
"dijit/form/DropDownButton",
It looks like this is an error with the order in which jQuery UI is loaded vs when the dojo loader is intialized.
See the discussion here for more context: https://geonet.esri.com/message/448542#comment-448449
The solution is to make sure dojo loader is called after jQuery UI and jQuery have loaded. For this, you can move the loading of dojo to the bottom of the HTML page, and leave jQuery and jQueryUI in the header.
I want to use less preprocessor in my dart angular 2 app. What I exactly do :
include dependency into pabspec.yaml file
- less_dart:
entry_point: web/main.less
build_mode: dart
include <link rel="stylesheet" href="main.css"/> into index.html file
In web folder I added main.less file as well
In this point my app works correct, but when I try to include other .less files in other components in leads to exaption, for instance:
I created file app.less, inside I writed some less code
In file app_component.dart I included it like: styleUrls: const ['app.less'],
As result I had such exaption as:
GET http://localhost:8080/packages/SmartPeopleUI/app.less.dart
An error occurred loading file: package:Project/app.less.dart
I am working on an app for Rails 4. I installed this gem to work with web components
At some point, I wanted to add this component to use Google Maps, so I installed it with bower
...
"dependencies": {
"google-map": "GoogleWebComponents/google-map#~1.0.3"
}
...
and added it to my component list on app/assets/components/application.html
// This is a manifest file that'll be compiled into application.html, which will include all the files
// listed below.
//
// Any web component HTML file within this directory or vendor/assets/components, if any,
// can be referenced here using a relative path.
//
//= require polymer/polymer
//= require google-map/google-map
so I added the code to my website quite simply
<style>
google-map {
height: 600px;
}
</style>
<google-map latitude="37.77493" longitude="-122.41942"></google-map>
But all I get is whitespace. When I open the developer tools, I get this info:
Uncaught TypeError: Cannot read property '_notifyEffect' of undefined
Uncaught TypeError: Cannot read property '_importsLoaded' of undefined
I know the element works, because if I try to use it in a vanilla website without framework, it works alright. What did I mess?