I have application builded on top of the aurelia-skeleton-navigation. Everything works ok, but can't find solution how to properly import jquery-ui library. Need that one to implement draggable dialog.
I've installed jquery-ui:
jspm install jquery-ui
Trying to test something as simple as (it's in app.js):
import 'jquery-ui';
...
attached() {
...
$("#dialog").dialog();
}
Unfortunately, dialog function isn't working. Is it something important that i'm missing? Or perhaps it's little bit more complicated than simple import ...
I'll appreciate any tips.
my working solution for this was installing a component version of jquery-ui:
https://github.com/components/jqueryui
npm install components-jqueryui
jspm install npm:components-jqueryui
Then:
import { datepicker } from 'components-jqueryui';
attached(){
$( "#datepicker" ).datepicker();
}
And in the view:
<input type="text" id="datepicker">
Hope this can help.
Related
Sorry this topic has been covered many times. However, I just created a new rails 7 app using esbuild, added font-awesome-sass to the gem file, created application.css.scss (already had application.bootstrap.scss) and put "#import 'font-awesome';" in there.
I then added the following to a view page:
<i class="fa-sharp fa-solid fa-house"></i>
<%= icon 'fa-brands', 'font-awesome' %>
No page errors, no console errors---but, the icons are not visible on the page (code is in the source). I've been mindlessly trying to figure this out---but, can not figure out why this is not working.
Have I missed any step?
I've verified installation instructions for the gem, I also tried skipping the gem and installing fontawesome via yarn. Nothing has gotten icons to show up in the view.
As are you using esbuild, you can install fontawesome with npm
yarn add #fortawesome/fontawesome-free
and import it in your javascript/application.js
import "#fortawesome/fontawesome-free/js/all";
Just remember to use only the free icons, fa-sharp is not free
I have just tried with this and everything is fine, Could you try it?
Updated Steps:
create project with cmd rails _7.0.4_ new demo-rails-with-react-frontend -j esbuild
add font awesome following this
create component to test following this
The result (image below)
my file app/javascript/components/application.tsx:
import * as React from "react";
import * as ReactDOM from "react-dom";
interface AppProps {
arg: string;
}
const App = ({ arg }: AppProps) => {
return <i class="fa-solid fa-house"></i>;
};
document.addEventListener("DOMContentLoaded", () => {
const rootEl = document.getElementById("root");
ReactDOM.render(<App arg="Rails 7 with ESBuild" />, rootEl);
});
ENV
ruby 3.0.4
rails 7.0.4
font-awesome-sass 6.2.0
I want to display a dictionary in a nice way. In standard HTML I would use DL tag. I didn't find an analog in ant.design yet.
When you use the ant-design, you have to install yarn add antd or npm install antd --save
After, the easiest way for ant-design is adding the index.html(ex.For React)
https://cdnjs.com/libraries/antd
You can use these link.
<link type="stylesheet" href="paste the antd css from url">
And then, you will be use this.
Lastly, I recommend to you "min.css" file.
If you use ant.design, it doesn't mean that you can not use standard HTML tags, you can still use them.
For example, this will look nice:
import React from 'react'
import ReactDOM from 'react-dom'
import 'antd/dist/antd.css'
ReactDOM.render(
<div>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</div>,
document.getElementById('container')
)
I'm in the process of migrating a Rails 5.1.5 project, which uses CoffeeScript, from using sprockets to using webpacker. The project also uses select2.js. With sprockets, I did the following:
Install jquery-rails (jQuery is a dependency for select2).
Put select2.js code in vendor/assets/javscripts.
In application.js.coffee, add:
#= require select2
After that I was able to use select2 to in my application.js.coffee file:
$(document).on 'turbolinks:load' ->
$('select').select2
So far I've described the pretty standard way of including/using javascript libraries with sprockets.
However, with webpacker I can't make select2 work and I'm not sure why. I have two hypothesis:
I'm not importing/requiring it properly;
it doesn't find jQuery at some point of the load process;
So for jQuery, I did the following:
yarn add jquery
included in my environment.js:
const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}));
I've removed the jquery-rails gem, as well as #= require 'jquery' and tested that jquery works, so I guess I have correctly included it. However, I tried several ways of importing select2 (using es6 imports) and none of them worked. I tried:
import select2 from 'select2';
import select2 from 'select2/dist/js/select2'
import select2 from 'select2/dist/js/select2.js'
import 'select2/dist/js/select2.js'
I even tried to import it from the old vendor location by writing inside app/javascript/pack/application.js.coffee:
import '../../../vendor/assets/javascripts/select2'
I can confirm that the file contents is imported, as I put a console.log within the select2 file under node_modules/select2/dist/js/select.js and it did get printed. However, I also get the error TypeError: $(...).select2 is not a function when I execute $('select').select2() in the browser's dev tool console.
What am I missing or doing wrong?
P.S. I can provide much more info, but I didn't want my question to get any more bloated.
P.P.S. With my modest JS knowledge, I looked at the source code but couldn't recognize what exactly they are exporting and how am I supposed to import it.
I know this is an old post, but just in case someone else could benefit:
app/javascript/packs/application.js
...other requires...
require('select2')
window.Rails = Rails
import 'bootstrap'
...other imports...
import 'select2'
import 'select2/dist/css/select2.css'
$(document).on("turbolinks:load", () => {
$('.select2').select2()
})
My similar problem
I have stumble upon the same problem with another web component (Switchery):
I imported the component with yarn add switchery (no error)
I could import it correctly through WebPack with import 'switchery' (no error bundling the pack)
But when I was trying to use the Switchery object in the browser like they say in the doc:
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);
I would get the error: ReferenceError: Switchery is not defined
Note: I didn't want to install RequireJS as WebPack is supposed to do the same thing (and even better) nowadays.
My solution:
The problem was the webpack doesn't expose the pack-generated variables and classes in the global scope!
So to fix this, I needed to do two things:
Explicitly give a name to the imported class from Switchery:
import Switchery from 'switchery'
Use this Class only in the same JS file where the import was done
Testing hack:
If you want to try that out and "go back" to the mess that sprocket allowed, in the same file, you can expose "globally" the variable so you can use in from the browser:
import Switchery from 'switchery'
window.Switchery = Swicthery
now you can execute the switchery almost like in the example:
var init = new window.Switchery(elem);
Hope that helps...
I am putting an angular portion into my MVC app. As such, I have added a tag to my layout view to find the Angular source code, and this is working great.
My issue arises in trying to add a 3rd party module to my project. I added it through the package.json with no problem, and added the module to my app.module.ts as follows:
import { FileUploadModule } from 'primeng/fileupload';
The reference is found, Visual Studio is happy, everything is fine. However, when I run the project locally, I get the following 404 error:
GET http://localhost:59911/src/primeng/fileupload 404 (Not Found)
It seems to me likely that the tag is causing the issue, but I can't remove it without killing the rest of the Angular functionality. Any hints? Can I add an override to the imports call?
Thanks, Mike
On PrimeNG's official website they suggested using import { FileUploadModule } from 'primeng/fileupload'; but it doesn't work any more. I guess they didn't update the docs.
You need { FileUploadModule } from 'primeng/primeng';
The structure is
In the primeng.d.ts file PrimeNG re-exported all modules.
export * from './components/fileupload/fileupload';
For now, no matter which PrimeNG module is used, it is all from primeng/primeng. Here's the imported modules in my project:
import {
ButtonModule,
CodeHighlighterModule,
ConfirmDialogModule,
FieldsetModule,
FileUploadModule,
GrowlModule,
MessagesModule
} from 'primeng/primeng';
The version I use is "primeng": "^4.2.1"
The issue was that primeng was not in the mapping, so it was looking for it in src.
I added the following to systemjs.config.js:
in maps:
'primeng': 'npm:primeng',
in packages:
primeng: {
defaultExtension: 'js'
}
Thanks for the help everyone!
I have come across this strange problem and it is driving me nuts.
It looks like a bug, but I don't know if maybe I am doing someting wrong.
The CSS attached to a component via cssUrl doesn't work on Internet Explorer.
If I add some content to the html template and I use classes from the CSS, those classes are not applied in IE. However, the same code works fine in Dartium, Chrome and Firefox.
I have created a sample project in github showing the error:
https://github.com/gonzalopezzi/ie-angulardart-shadowdom-bug
The project has the following dependencies:
dependencies:
browser: 0.10.0+2
angular: 0.11.0
shadow_dom: 0.10.0
(I have tried to avoid "any" but those are the latest versions of such packages)
I have a very simple component:
import 'package:angular/angular.dart';
#Component(selector: 'internet-explorer-bug',
templateUrl:'internet-explorer-bug/internet-explorer-bug.html',
cssUrl:'internet-explorer-bug/internet-explorer-bug.css',
useShadowDom: true,
publishAs: 'cmp')
class InternetExplorerBug {
}
This is the css file (internet-explorer-bug.css):
.red-div {
background-color: red;
}
And this is the template (internet-explorer-bug.html)
<div id="main-div">
<div class="red-div">Red background?</div>
</div>
The component works properly in Dartium, Chrome and Firefox. It doesn't show the red background in Internet Explorer, though.
I have tested it in Internet Explorer 10 and 11. These are the results:
The red background is not displayed
The browser downloads the css file (I can see that in IE dev tools)
If I inspect the DOM, I see a strange css attribute assigned to the div with the name "background-color:red" and no value:
.red-div {
background-color:red: ;
}
I have posted the same question in the mailing list (here). If I somebody helps me there I will post the solution here too.
Any help will be appreciated.
Thanks in advance.
I guess this line causes the problem
<script src="packages/shadow_dom/shadow_dom.min.js"></script>
This is deprecated. You should use
<script src="packages/web_components/platform.js"></script>
You need to change your pubspec.yaml too (shadow_dom to web_components)