I'm using django-autocomplete-light
Django==1.8
django-autocomplete-light==3.1.6
django-easy-select2==1.2.5
django-suit==0.2.13
django-tables2==1.0.4
It works fine when I run it in the django development server but it does not load when I set DEBUG=False and run the app in apache.
I've run collectstatic and select2 javascript and css exist and can be downloaded.
The page shows a javascript error that select2 is not a function.
settings.py
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.messages',
'django.contrib.staticfiles',
'suit',
'myapp',
'dal',
'dal_select2',
'django.contrib.admin',
'django_extensions',
'simple_history',
'django_tables2',
'django.contrib.admindocs',
'rest_framework',
'rest_framework.authtoken',
)
admin page order of content:
<link href="/static/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="/static/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.min.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/jquery.init.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/vendor/select2/dist/js/select2.full.js"></script>
<script type="text/javascript" src="/static/autocomplete_light/select2.js"></script>
<script type="text/javascript" src="/static/admin/js/related-widget-wrapper.js"></script>
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"></script>
This was wierd. After spending a lot of effort playing with this, I wiped out the static folder content and ran collectstatic django command from scratch and it's working now. When I diff it, I see that there are changes in admin and select2.js so maybe they've updated the packages to fix the issue.
Related
According to documentation these are the files that need to be added
<script src="https://unpkg.com/#progress/kendo-vue-charts#latest/dist/cdn/js/kendo-vue-charts.js"></script>
<script src="https://unpkg.com/#progress/kendo-vue-intl#latest/dist/cdn/js/kendo-vue-intl.js"></script>
<script src="https://unpkg.com/#progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
// Load the Kendo Default Theme
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-default#latest/dist/all.css">
// Load the Kendo Bootstrap Theme
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-bootstrap#latest/dist/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-default#latest/dist/all.css">
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-bootstrap#latest/dist/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://unpkg.com/#progress/kendo-vue-charts#latest/dist/cdn/js/kendo-vue-charts.js"></script>
<script src="https://unpkg.com/#progress/kendo-vue-intl#latest/dist/cdn/js/kendo-vue-intl.js"></script>
<script src="https://unpkg.com/#progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
The Error is
Cannot read properties of undefined (reading 'support') at Module. (kendo-vue-charts.js:1:28556)
The order of the script tags is wrong - we need to put the drawing script tag first, then the intl and last but not least the charts script.
I'm trying to decrease the bundle size of my Vue project, which scaffolded by the vue-cli, by using CDN of firebase, Vue, and Vuetify.
So, I've added links of these CDN in public/index.html as follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>magiclabel</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css" />
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but t4v4 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Add config.externals to vue.config.js as follow:
module.exports = {
"transpileDependencies": [
"vuetify"
],
chainWebpack: (config) => {
config.externals({
firebase: 'firebase',
'firebase/auth': 'firebase',
firebaseui: 'firebaseui',
vue: 'Vue',
vuetify: 'Vuetify',
'vuetify/lib': 'Vuetify',
})
}
}
Then, the report.html created by issueing yarn build --report indicated that the Vuetify is still in the bundle even other firebase and Vue is going away as follow:
Is there any wrong or insufficient steps?
If you are using vuetify from vue-cli-plugin-vuetify (vue add vuetify), treeshaking and auto component import is enabled by default, by using vuetify-loader.
If you look into the source code of vue-cli-plugin-vuetify, it only uses vuetify-loader if it is present in your package.json. So removing vuetify-loader from package.json should disable this behavior.
I have downloaded the asp.net core template from the below location but I am missing most of the JS files here-
downloaded location - https://github.com/aspnetboilerplate/aspnet-core-template
When I invoke the Web API swagger and it works fine without any issue but when I run the web app I am missing most of the JS & CS files as shown below-
There is no libs folder...Is there something missing?
<script src="~/libs/jquery/dist/jquery.js" asp-append-version="true"></script>
<script src="~/libs/bootstrap/dist/js/bootstrap.bundle.js" asp-append-version="true"></script>
<script src="~/libs/admin-lte/dist/js/adminlte.js" asp-append-version="true"></script>
<script src="~/libs/jquery-validate/jquery.validate.js" asp-append-version="true"></script>
<script src="~/libs/jquery-validate/jquery.validate.unobtrusive.js" asp-append-version="true"></script>
<script src="~/libs/block-ui/jquery.blockUI.js" asp-append-version="true"></script>
<script src="~/libs/spin/spin.js" asp-append-version="true"></script>
<script src="~/libs-ext/spin/jquery.spin.js" asp-append-version="true"></script>
<script src="~/libs/sweetalert/sweetalert.min.js" asp-append-version="true"></script>
<script src="~/libs/toastr/toastr.min.js" asp-append-version="true"></script>
<script src="~/libs/push.js/push.js" asp-append-version="true"></script>
<script src="~/libs/moment/moment-with-locales.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/abp.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.jquery.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.toastr.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.blockUI.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.spin.js" asp-append-version="true"></script>
<script src="~/libs/abp-web-resources/Abp/Framework/scripts/libs/abp.sweet-alert.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/jquery.dataTables.min.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/dataTables.bootstrap4.min.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/dataTables.responsive.min.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/responsive.bootstrap4.min.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/dataTables.buttons.js" asp-append-version="true"></script>
<script src="~/libs/datatables/js/buttons.bootstrap4.js" asp-append-version="true"></script>
<script src="~/js/abp.dataTable.js" asp-append-version="true"></script>
<script src="~/js/main.js" asp-append-version="true"></script>
An old question, but incase someone else needs help.
First install Microsoft.Web.LibraryManager.CLI
dotnet tool install -g Microsoft.Web.LibraryManager.CLI
and run
libman restore
from the Mvc folder
I'm taking some MVC.net training, and noticed something weird about the tilde.
I have a list of links to scripts that look something like this:
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/easing.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
But when I run the application on my machine, the jquery wasn't working. Checking the source code, I notice that the first tilde wasn't being converted as it should:
(source code:)
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/Scripts/easing.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap.js"></script>
It can be pretty easily fixed by just adding a link to nothing at the top of the list:
<script type="text/javascript" src="~/Scripts/nothing.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/easing.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
But I was wondering if any of you have seen anything like this, or had an explanation as to what is going on?
I feel a little obscure in understanding the Guide to install spree_bootstrap_theme (https://github.com/Andrewmp1/spree_bootstrap_theme) . Do you have any suggesions for me? Thanks a lot!
Below is what I have done:
Create a new sandbox for spree.
Add to Gemfile:
gem 'spree_bootstrap_theme', :git => 'git://github.com/Andrewmp1/spree_bootstrap_theme.git'
Rename application.css inside stylesheets to application.css.scss
Create a new file: bootstrap_and_overrides.css.scss inside stylesheets folder.
Add to bootstrap_and_overrides.css.scss this below line:
#import 'store/spree_bootstrap_theme';
Open application.js, add:
//= require bootstrap
Run rails server
Result I received: http://imageshack.us/f/405/spreet.png/
As you can see, the layout was broken.
I view source the file and do not see anything about bootstrap. What I got is here:
<meta content="Spree demo site" name="description" />
<link href="/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href="/assets/normalize.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/skeleton.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/screen.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/spree_core.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/spree_promo.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<link href="/assets/store/all.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<meta content="authenticity_token" name="csrf-param" />
<meta content="BoSR3FtvQBjqF68s7amtXGMVypmaW68e7tHhRzYvqzw=" name="csrf-token" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.validate/jquery.validate.min.js?body=1" type="text/javascript"> </script>
<script src="/assets/store/checkout.js?body=1" type="text/javascript"></script>
<script src="/assets/store/product.js?body=1" type="text/javascript"></script>
<script src="/assets/store/cart.js?body=1" type="text/javascript"></script>
<script src="/assets/store/spree_core.js?body=1" type="text/javascript"></script>
<script src="/assets/store/spree_promo.js?body=1" type="text/javascript"></script>
<script src="/assets/store/all.js?body=1" type="text/javascript"></script>
I TRIED TO ADD gem 'bootstrap-sass' to the Gemfile too but the result in both case is THE SAME as above.
I've just created a file, inside stylesheets/store, named "spree_bootstrap.scss" with the content:
#import 'store/spree_bootstrap_theme'
After that, i removed the code below from stylesheets/store/all.css
*= require store/spree_core
*= require store/spree_promo
And the same for javascripts/store/all.js:
//= require store/spree_core
//= require store/spree_promo
And i included the following, in javascripts/store/all.js::
//= require bootstrap
Start your server and you'll see the correct style of spree_bootstrap_theme.
I think you should not rename application.css to application.css.scss . The file application.css is a special purpose file . Here you can read about its format and syntax .