hey guys so I am using metronic theme and I made an angular version of demo3 HTML version
and everything looks fine except
if I import external js like this
<!doctype html>
<html lang="fa" direction="rtl" dir="rtl" style="direction: rtl">
<head>
<meta charset="utf-8" />
<base href="/">
<script src="assets/plugins/global/plugins.bundle.js" type="application/javascript"></script>
<script src="assets/plugins/custom/prismjs/prismjs.bundle.js" type="application/javascript"></script>
<script src="assets/js/scripts.bundle.js" type="application/javascript"></script>
<script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js" type="application/javascript"></script>
<script src="assets/js/pages/widgets.js" type="application/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body kt-root id="kt_body" class="header-mobile-fixed subheader-enabled aside-enabled aside-fixed aside-secondary-enabled page-loading">
</body>
</html>
I don't have any error but toggle buttons not working
and if I added like this to angualr.json file
"scripts": [
"src/assets/plugins/global/plugins.bundle.js",
"src/assets/plugins/custom/prismjs/prismjs.bundle.js",
"src/assets/js/scripts.bundle.js",
"src/assets/plugins/custom/fullcalendar/fullcalendar.bundle.js",
"src/assets/js/pages/widgets.js"
]
when I serve the project I get this error
add
import 'core-js';
in the polyfills.ts file before the zone
and if you have or imported es6-shim just remove that
and I don't know why your external js not working that's the other problem
Related
HELP ME PLEASE 🙏🙏🙏🙏🙏
im new into inertia.js
CSS FILE WORKING BUT JS FILE NOT WORKING
iam using inertia.js with laravel 9 with vue.js-3
using admin html template im bulting admin dashboard but im facing problem with js file it was not working but when i used normal laravel 9 with blade.php concept it work perfectly.
so i tryied from 2 days with different paid admin templets but it was not working
help me to fix it
i tried below methods but not working
MY
my code
APP.BLADE.PHP FILE
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- //css -->
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<!-- //js -->
<script src="{{URL::asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/us-merc-en.js')}}"></script>
<!-- Scripts -->
#routes
#vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
#inertiaHead
</head>
<body class="font-sans antialiased">
#inertia
</body>
</html>
I TRYID THIS METHOD ALSO
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<script src="assets/libs/jsvectormap/js/jsvectormap.min.js"></script>
<script src="assets/libs/jsvectormap/maps/world-merc.js"></script>
<script src="assets/libs/jsvectormap/maps/us-merc-en.js"></script>
METHOD 2
<link rel="stylesheet" href="assets/css/dashlite.css?ver=3.1.1">
<link id="skin-default" rel="stylesheet" href="assets/css/theme.css?ver=3.1.1">
<script src="{{URL::asset('assets/libs/jsvectormap/js/jsvectormap.min.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/world-merc.js')}}"></script>
<script src="{{URL::asset('assets/libs/jsvectormap/maps/us-merc-en.js')}}"></script>
I have solution to this, so rather than adding the js and css in the app.blade.php file, move asset folder resources folder.
Import the all css file in app.css like as
//resources/css/app.css
#import '../assets/css/dashlite.css?ver=3.1.1';
#import '../assets/css/theme.css?ver=3.1.1';
same import the all js file in app.js like as
//resources/js/app.js
import("../assets/libs/jsvectormap/js/jsvectormap.min.js");
import("../assets/libs/jsvectormap/maps/world-merc.js");
import("../assets/libs/jsvectormap/maps/world-merc.js");
Now in app.blade.php add css and js inside the vite directive
#vite(['resources/js/app.js', 'resources/css/app.css',
"resources/js/Pages/{$page['component']}.vue"])
May this will help you. Happy coding
I have an HTML Template with CSS and JS. I wanted to import it in SvelteKit.
Adding HTML and CSS is pretty straightforward. When it comes to JS, there are problems.
As far as I have tested with the browser, The imported JS code works, but it fails to affect the DOM.
Ex. console.log works, but adding bootstrap.js or slick.js do not work. Also, custom JS written is not loading. This means there is no issue with the directory.
This is how I have imported CSS and JS in Svelte.
<svelte:head>
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/responsive.css" />
<script src="/js/jquery-3.6.0.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/isotope.pkgd.min.js"></script>
<script src="/js/slick.min.js"></script>
<script src="/js/script.js"></script>
</svelte:head>
Is there another way to import external JS to Svelte files, a way where the JS will affect the DOM?
For global scripts, you can add them to your app.html or index.html in your SvelteKit project, just like how you would with a normal HTML webpage:
src/app.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Metadata such as title or description -->
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
<!-- Your CSS / JS globally -->
<link rel="stylesheet" href="https://some-cdn.com/css/bootstrap.min.css" />
<script src="https://some-cdn.com/js/script.js"></script>
%sveltekit.head%
</head>
<body>
<div>%sveltekit.body%</div>
</body>
</html>
HOWEVER, it seems you're importing them from an absolute URL. If this is located inside the /lib folder, you can import them using a tag in your +layout.svelte:
<script>
import "$lib/css/bootstrap.min.css"
// you can do the same with JavaScript
</script>
A very common scenario, however, is that they are in node_modules. To import these, you can import them from the module:
<script>
import "module/style.css"
</script>
If they are in your static folder, you can use app.html to import them as shown in the first example.
Since you're using bootstrap, I would recommend to use svelte-add/bootstrap and import any necessary JS in app.html using a CDN
I'm using Angular 5 and I want to include my script files .js
I'm using the script tag in the index.html
When I refresh the page everything works fine, but when i'm using SPA routing my js files does not included
Here's an exemple :
If I refreshed the page
When i'm using SPA navigation
Here's index.html where i include all my script whith script tag
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<title>Listeo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/colors/main.css" id="colors">
</head>
<body>
<app-base></app-base>
<script type="text/javascript" src="../assets/scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="../assets/scripts/mmenu.min.js"></script>
<script type="text/javascript" src="../assets/scripts/chosen.min.js"></script>
<script type="text/javascript" src="../assets/scripts/slick.min.js"></script>
<script type="text/javascript" src="../assets/scripts/rangeslider.min.js"></script>
<script type="text/javascript" src="../assets/scripts/magnific-popup.min.js"></script>
<script type="text/javascript" src="../assets/scripts/waypoints.min.js"></script>
<script type="text/javascript" src="../assets/scripts/counterup.min.js"></script>
<script type="text/javascript" src="../assets/scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="../assets/scripts/tooltips.min.js"></script>
<script type="text/javascript" src="../assets/scripts/custom.js"></script>
<script type="text/javascript" src="../assets/scripts/switcher.js"></script>
</body>
</html>
and here's the navigation bar :
<nav id="navigation" class="style-1">
<ul id="responsive">
<li>
<a [routerLink]="['home']" [routerLinkActive]="['current']">Home</a>
</li>
<li>
<a [routerLink]="['restaurants']" [routerLinkActive]="['current']">Restaurants</a>
</li>
</ul>
</nav>
When I'm using the href everything wirks fine, but with [routerLink] I'm facing the problem.
Are you using the Angular CLI?
Then you can put your custom js files into .angular-cli.json
"scripts": [
"<path_to_script",
"<path_to_second_script"
]
Then you don't have to reference them in the index.html.
You need to manually trigger the script
From looking at the documentation ( http://rangeslider.js.org/), the way to trigger the script is
$('input[type="range"]').rangeslider();
So what you probably need to do is trigger this in your component's ngAfterViewInit method (the one using rangeslider). This need to be in ngAfterViewInit to make sure that the dom elements have been created.
//component.ts
ngAfterViewInit()
{
$('input[type="range"]').rangeslider();
}
I'm pretty new to react js. I need to integrated Google Nexeus like menu to my app. I'm not sure how to include the custom javascript files in my react webpack setup. I tried to include it in following way. But it is not working. When I check the network communication in firefox developer tools I can see that same html content is comming as the response to GET gnmenu.js, not the actual javascript content.
<!doctype html>
<html>
<head>
<title>My Application</title>
<link href="static/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="static/lato/lato.css" rel="stylesheet">
<link href="static/opensans/opensans.css" rel="stylesheet" type="text/css">
<link href="static/raleway/raleway.css" rel="stylesheet" type="text/css">
</head>
<body style="margin: 0">
<script src="/static/gnmenu.js"></script>
<div id="content" class="myApp"></div>
<script src="/static/bundle.js"></script>
</body>
</html>
Has anyone used gnmenu with react?
I created default ASP.NET MVC 3 web application. Then I added three css and three js files to \Views\Shared_Layout.cshtml view:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/StyleSheet1.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/StyleSheet2.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JScript1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JScript2.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
....
when I run the application, I html code is
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/StyleSheet1.css" rel="stylesheet" type="text/css" />
<link href="/Content/StyleSheet2.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/JScript1.js" type="text/javascript"></script>
<script src="/Scripts/JScript2.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
Is it possible to have a handler in MVC to change my output html to like:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<script src="js.axd=/Scripts/jquery-1.5.1.min.js,/Scripts/JScript1.js,/Scripts/JScript2.js" type="text/javascript"></script>
<link href="css.axd=/Content/Site.css,/Content/StyleSheet1.css,/Content/StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
So the link js.axd=/Scripts/jquery-1.5.1.min.js,/Scripts/JScript1.js,/Scripts/JScript2.js
will return content of all these js files to the browser, and link css.axd=/Content/Site.css,/Content/StyleSheet1.css,/Content/StyleSheet2.css will return content of all css files.
I did something before in ASP.NET by IHttpHandler, but can't figure out how to do that in MVC, since I'm just starter in MVC.
Any help and code samples will appreciate.
Thank you!
You can use bundle and minification nuget package. Bundling and Minification
At the NuGet console type: "Install-Package Microsoft.AspNet.Web.Optimization"
Example here:
Using Web Optimization with MVC 3
I use cassette in my own projects. Also, this list here contains top 20 in Nuget.