how to add javascripts to jekyll? - javascript

So, I am trying out jekyll and I have successfully added my .scss files and they are working but there seems to be a problem with the .js files.
I have tried adding .coffee files and adding the plug-in jekyll-coffeescript but that too isnt working
so my folder structure is this:
\javascripts
|__ main.js
\_includes
\_sass
\_layouts
\_config.yml
\index.html
now in the main.js file i just have
console.log("this worked");
alert("hello");
and I have a head.html in the _includes folder where I added
<script type="text/javascript" src="{{site.baseurl}}/javascripts/main.js" ></script>
when I load the page nothing is happening, why? what is the mistake?
I added the same thing like this and it worked
<script type="text/javascript" >
console.log("this worked");
alert("hello");
</script>
so why is the previous method not working
I have written nothing in the _config.yml file about any javascript

I assume that you have kept your main.js file under your_site/assets/js/javascripts/
Try this path to load the js file:
<script type="text/javascript" src="/assets/js/javascripts/main.js" ></script>
Also you can check localhost:port/assets to see other files as well.
Let me know if this helps.

Related

How to use a separte js file in Laravel Blade Html?

How to use a js file outside Laravel Blade html?
Besides my layouts file, I have a single file welcome.blade.php for the html and it requires a fair amount of scripts. To improve neatness, I wanted to move the <scripts> from the bottom of welcome.blade.php into a separated .js file.
See below for current code, mainly a test to get things working.
welcome.blade.php
#extends('layouts')
#section('content')
<div>
Body Content
</div>
#endsection
// Script added to the bottom of welcome.blade
// How to move into a separated file, like in resources/js/welcome.js
// <script src='/js/welcome.js'></script> doesn't work
<script>
alert('js works');
</script>
Even when I create a new welcome.js script inside the resources/js folder, linking via src or assets doesn't work.
I don't want to put it in the app.js (default laravel install folder structure), because then it'll load in for EVERY page, instead of just welcome.js.
I've tried using stack, but the file doesn't exist when using asset. However, it does work when writing the script itself into the push block. But then that's not using a separate .js file anyway...
layouts.blade.php
<body>
...
#stack('scripts')
</body>
</html>
welcome.blade.php
...
#push('scripts')
// Works when directly writing the script here
// Trying to use `<script src="{{ asset('js/welcome.js' }}"></script>` fails
// No js/welcome.js found.
<script>
alert('js works');
</script>
#endpush
How can I use a separate .js file inside a Laravel Blade HTML Template?
Edit
Did I actually need to make the welcome.js script public in webpack mix? It seems to work now after adding the additional .js line.
See answer.
Versions: Laravel 8
Issue was that the separated .js file didn't exist anywhere, hence couldn't be by welcome.blade.php. Solved by outputting the script to public in webpack mix
Script file, welcome.js
alert('js works');
welcome.blade.php
#push('scripts')
<script src="{{ asset('js/welcome.js' }}"></script>
#endpush
layouts.blade.php
<body>
...
#stack('scripts')
</body>
</html>
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/welcome.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);

How to import or use external JS files and functions in my angular web application

I want to integration external code (html, js and css files) into my angular web application.
in this external code, the HTML files is just like this:
index.html
<html>
<header>
</header>
<body>
</body>
<script src="app/components/landing-page/js/bootstrap.min.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>
<html>
as you see, there are several javascript files, and a funciton initComparisons() will be called.
If I only double click index.html, everything works fine. But I copy this html code in one component.html, that was not working. I can not see any animation.
I have googled some solutions,
and I have change my angular.json file just like this:
"scripts": [
"src/app/components/landing-page/js/imageComparisonSlider.js",
"src/app/components/landing-page/js/owl.carousel.min.js",
"src/app/components/landing-page/js/cbpAnimatedHeader.js",
"src/app/components/landing-page/js/theme-scripts.js"
]
and also import all js files in index.html in my angular web application
<script src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
and in the component.ts, I also do this:
import initComparisons from './js/imageComparisonSlider.js';
ngOnInit() {
this.isLoggedIn = this.authService.isLoggedIn;
initComparisons();
}
I added some code in stackblitz;
https://stackblitz.com/edit/angular-qowfwy?file=angular.json
but it was not working.
can somebody help me and give me some suggestion.
Best Regards,
Leo
If you want to use external js in your angular project you have to import in your angular.json in the "scripts": [] area that will be allow you to bring the js and make the build after without problem.
After putting the external scripts in angular.json (paths correct and everything), in component you should
declare const initComparisons;
// ...
ngOnInit() {
initComparisons();
}

Does table sorter work without CSS?

I have a folder 'test' in the root of my hosting. I downloaded a sorter plugin from http://tablesorter.com and uploaded 'jquery' folder in the 'test' folder i created. Then I made an html table in the index.html file in the 'test' folder.
I entered the below within the head tag
<script type="text/javascript" src="jquery/jquery-latest.js"></script>
<script type="text/javascript" src="jquery/jquery.tablesorter.js"></script>
Then I entered the following script within the head tag
<script>
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
In the table I entered
<table id="myTable" class="tablesorter" border="1" width="100%">
Still the sorter is not working... As far as I know, I followed proper instructions. What did i do something wrong?
MY path is public_html/mydomain.com/test
The the files under test folder is
jquery
index.html
The files under jquery folder is
jquery-latest.js
jquery.metadata.js
jquery.tablesorter.js
jquery.tablesorter.min.js
After playing with the code for a while i found the problem. I downloaded a bootstrap template and added a table to it and at the bottom, just before /body tag there are 3 paths
<script src="./js/jquery-1.10.0.min.js"></script>
<script src="./js/bootstrap/js/bootstrap.min.js"></script>
<script src="./js/script.js"></script>
If I remove this, the sorter works but then the website stops working. Any ideas???
I did a lot of juggling with the paths and I did not understand the logic but it worked.
This is what I did
I kept the following in head tag
<script type="text/javascript" src="jquery/jquery-latest.js"></script>
<script type="text/javascript" src="jquery/jquery.tablesorter.js"></script>
I kept one more instance of the following in before /body end tag
<script type="text/javascript" src="./js/jquery-latest.js"></script>
<script type="text/javascript" src="./js/jquery.tablesorter.js"></script>
and placed both the files in both the folders /jquery and the default /js folder included in the website template
Phew!

jquery not running with rails in external js file

i am using rails and trying to call jquery code present in external js file whose path i have specified correctly in my html file.The jquery code is executing correctly when i include it directly in html file.
my test.js
$(function(){
alert("yes");
});
and index.html.erb :
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/assets/javascripts/views/test.js"></script>
</head>
jquery executes when included inside html
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
alert("yes");
});
</script>
</head>
the test.js path is correct since other javascript functions are getting called from the same file but not jquery code
why you have head tag in index.html.erb file . It already included in layout/application.html.erb file . in this way you are including jquery file twice. If you include two versions of jquery in any html they always create issue.
In my suggestion you need to remove your head tag from index file completely . And what ever js file you want to include, include it in your application.js file. for current scenario you can do it like below.
//= require views/test
#user3946910
Try like this.
in your index.html
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/assets/javascripts/views/test.js"></script>
</head>
and in your test.js file add this.
$(document).ready(function(){
alert("yes");
});
Like this just import all plugins in the html itself, and create fresh .js page to write just your own script.
I hope it will help.

cant get jquery to work with php file

I have a linux webserver that has /var/www configured in the Apache2.conf file as the DocumentRoot. Next I have my jquery core file located at /var/www/js/jQuery_v1.4.2.js (a central location for all my websites to access.
The .php index file is located at /var/www/AOI/aoiparse.php, where the aoifunctions.js file is also located. My <head> tag looks as follows:
<script type='text/javascript' scr='/js/jQuery_v1.4.2.js'></script>
<script type='text/javascript' scr='aoifunctions.js'></script>
my aoifunctions.js file has the following in it in order to verify that the script link works:
$(document).ready(function(){
alert("hello");
});
My problem is that I cannot get the alert() to work. I'm not getting an error message so I do not know where the problem is.
You can try <script type='text/javascript' src='../js/jQuery_v1.4.2.js'></script>
(The attribute is src, not scr, plus your path was incorrect)
put the jquery file in /var/www/AOI/js/ and then
remove the first /
<script type='text/javascript' src='js/jQuery_v1.4.2.js'></script>
so it lies in a subdirectory to your main page
or use this if you want to leave it where it is:
<script type='text/javascript' src='../js/jQuery_v1.4.2.js'></script>
You misspelled "src" in your <script> tags. It's short for SouRCe.
<script type='text/javascript' src='/js/jQuery_v1.4.2.js'></script>
<script type='text/javascript' src='aoifunctions.js'></script>
If you used Firebug you'd have been able to easily tell that the scripts weren't loaded.

Categories