I am trying to add Custom css and js in my django admin. But CSS is working but js is not working. I have checked my code. I don't think there is any error in my code.
my admin.py
from django.contrib import admin
from .models import Blog
# Register your models here.
class BlogAdmin(admin.ModelAdmin):
class Media:
css = {
"all": ('css/main.css',)
}
JS = ('js/blog.js',)
admin.site.register(Blog, BlogAdmin)
my blog.js
console.log("This is blog.js");
let sc = document.createElement('script')
sc.setAttribute('src', 'https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js')
document.head.appendChild(sc);
document.addEventListener("DOMContentLoaded", function (event) {
console.log("This is blog.js");
let sc = document.createElement('script')
sc.setAttribute('src', 'https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js')
document.head.appendChild(sc);
sc.onload = ()=>{
tinymce.init({
selector: '#id_content'
});
}
});
In the first line of js I have written a code console.log("This is blog.js");. But while inspecting the page I didn't see "This is blog.js" in console. It means my js is not loading in Django admin.
Please look into this issue. Thanks in advance.
Is the static file management done properly?
Is there a STATIC_URL and a STATIC_ROOT defined in your
settings.py file
Also, have you properly set up the server to deliver the static files?
Finally, if you have done everything, check whether changes happen when you make changes in the original file rather than one created after running the command python3 manage.py collectstatic
Use this code, my friend, it works. Took me a long time to figure this out. I was also stuck on the same .
$( document ).ready(function() {
let sc = document.createElement('script')
sc.setAttribute('src','https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js');
document.head.appendChild(sc);
sc.onload = ()=>{
tinymce.init({
selector: '#id_content'
});
}
});
Related
I am trying to learn how a small routing library for javascript apps works - page.js
So I made one very tiny app for my own learning purposes but for some reason i can't make it work properly.
The app is really as simple as it gets - one folder named test-routing with one file and one folder
in it - index.html and src; the src folder has also one file - app.js and another folder-
views, with 3 files in it - home.js, page1.js and page2.js
The html file has empty body tag and in the head tag I wrote this:
<script src="./src/app.js" type="module"></script>
In the app.js there is this:
import page from '../node_modules/page/page.mjs';
import { home } from './views/home.js';
import { page1 } from './views/page1.js';
import { page2 } from './views/page2.js';
page('/',home);
page('/first',page1);
page('/second/:id',page2);
page.start();
Each of the three files in the views folder has one line of code:
home.js
export function home(){ console.log('HOME PAGE'); }
page1.js
export function page1(){ console.log('PAGE ONE'); }
page2.js
export function page2(context, next){ console.log('PAGE TWO', context.params.id); }
Together with page.js I also installed locally live-server. I ran it and it started
working properly on port 8080.
My expectations were that when I go to http://localhost:8080 I would find
'HOME PAGE' in the console and that was indeed the case.
But when I tried with http://localhost:8080/first and http://localhost:8080/second/2,
I received in both cases 404 (Not Found) in the console instead of 'PAGE ONE' and 'PAGE TWO 2'
and it was also printed in the web page itself 'Cannot GET /first' and 'Cannot GET /second/2'
respectively.
Can anyone tell me where I went wrong, please?
Thank you very much in advance!
You may need to think about push state technique
pushState
I'm trying to create a custom web page in stencil website and trying to add custom javascript module.
This is the html file named '/templates/pages/custom/page/customz.html'
{{~inject 'template' template}}
<h2>Hello World!</h2>
<body>
Some custom content!
<body>
<script>window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
<script src="{{cdn 'assets/dist/theme-bundle.main.js'}}"></script>
<script>window.stencilBootstrap("{{page_type}}", {{jsContext}}).load();</script>
This is the javascript file named '/asset/js/theme/customz.js'
import PageManager from './page-manager';
export default class Customz extends PageManager {
onReady() {
console.log('onReady');
}
constructor(context) {
super(context);
console.log(context);
}
}
then i added this in app.js file
const customClasses = {
'pages/custom/page/customz': () => import('./theme/customz')
};
and also added it .stencil file to test it locally
I also created the web page in bigcommerce dashboard.
The problem i have is that the HTML is loaded but the Javascript file is not injected (i cannot see the console log strings in console or other js logic i insert).
Where can be the problem?
The place I usually start when troubleshooting a custom template is the related section on the BigCommerce Dev Center here: https://developer.bigcommerce.com/stencil-docs/storefront-customization/custom-templates#troubleshooting-template-authoring
If you've verified the version of the Stencil CLI and URL you're using, try using this same code with the base Cornerstone theme on the latest version.
you need add link for Windows too:
Look like:
const customClasses = {
'pages/custom/page/customz': () => import('./theme/customz'),
'pages\\custom\\page\\customz': () => import('./theme/customz')
};
And your custom page must contains:
`{{~inject 'template' template}}
<script>window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
<script src="{{cdn 'assets/dist/theme-bundle.main.js'}}"></script>
<script>window.stencilBootstrap("{{page_type}}", {{jsContext}}).load();</script>`
If don`t connection on base file from layout.
My client sent me an HTML template that heavily relies on jQuery. The app itself runs on nuxt. I have a js file that contains a whole lot of $(function(){...}). Now I don't know how to run this file on each page transition.
So far, I have tried:
Creating a plugin inside plugins dir that looks like:
export default async ({ app }) => {
app.router.afterEach((to, from) => {
require('~/static/js/base-init.js');
})
}
here base-init.js has all those jquery code
Adding mounted (inside default.vue layout) but that doesn't work either.
Does anyone have a clue?
If you want to use your jquery file on nuxt just do this
Inside your nuxt.config.js add
npm i jquery
plugins: [
'~plugins/my-jquery-code.js'
]
And inside plugins/my-jquery-code.js
if (process.BROWSER_BUILD) {
const $ = require('jquery')
$(function() {
console.log('document ready!');
// do whatever you want with html and jquery
})
}
I'm refering to this link => https://github.com/nuxt/nuxt.js/issues/356
its work for me !
Good Lucks.
I have downloaded tracking.js and added it to my /src/assets folder
In my angular-cli.json file I have added to my scripts:
"scripts": [
"../src/assets/tracking/build/tracking-min.js"
],
issue here - In my angular component, I import tracking as follows:
import tracking from 'tracking';
and in the chrome inspection window I can hover over 'tracking' and see all of the properties as shown:
I can even call the ColorImage constructor in the console window! :
However when it tries to execute the constructor in my code I get the error about tracking being undefined:
I had assumed it was because I wasn't passing in the tracking object through the constructor in the traditional DI fashion, but when doing so I got the error that the namespace couldn't be used as a type:
The only other thing I could think of was to try and add the external reference in the main index.html file, but I got an error about strict MIME checking.
To clarify: this is all happening in my angular component constructor (when the tracking methods get exercised)
Any ideas?
go to your node_modules folder and find this file : "node_modules/tracking/build/tracking.js" . open the file and add this line of code to end of the file :
module.exports = window.tracking
save file and in use this code to import it :
import * as tracking from 'tracking';
I don't think you can use DI with that external library. However, you should be able to create a new instance in the constructor:
import tracking from 'tracking';
constructor(...) {
this.colors = new tracking.ColorTracker(...);
}
myFunction() {
this.colors.doWhateverIWant();
}
If you only want a single tracking instance throughout your app, then you'll have to create your own trackingService and inject that.
another solution is to reference the tracking.js via script tag :
<html>
<head></head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tracking.js/1.1.3/tracking-
min.js"></script>
</body>
</html>
and in your component.ts write :
(window as any).tracking.ColorTracker(["magenta"]);
Using the SSR and inject initial packages,
I currently have the following server-side code:
Meteor.startup(function() {
.....
Inject.rawHead('importList', function(imports) {
return imports = Blaze.toHTML(Template.imports);
});
});
This injects a list of html imports into the head, and works perfectly.
I'd like to modify the function so that the code is injected into /client/imports.html instead of into the head... can this be done?
Looks close to this solution. Try this in the client folder of Meteor or use if(Meteor.isClient) for compactness:
Inject.rawHead('importList', function(imports){
return imports = Blaze.toHTML(Template.imports)
})
Meteor.startup(function(){
//...
})